BOOKS, TUTORIALS, TOOLS:

__________________________________________________________________

CODE EXAMPLES:

  • Sample CSS web page:
    This is a simple template with a horizontal header menu – sampleSite.
    Download: sampleSite.zip

    Use this stylesheet instead for a vertical sidebar menu (don’t forget to change css link in the HTML file). Notice there are only a few things changed – a fixed width for the #navigation div, and a fixed left margin in the #content div to allow space for the navigation div sidebar.
    Download: sampleSiteStyle-vertMenu.css

  • How to vertically center elements in CSS:
    CSS wasn’t designed well for vertically centering content. Here is one method of doing this, it is based on an old “table” model from pre-CSS days, and also includes a workaround in the HTML for Internet Explorer – verticalCenter.
    Download: verticalCenter.zip

    You don’t have to understand this, just copy and paste, but if you want to find out more read this: http://www.noobcube.com/tutorials/html-css/horizontal-and-vertical-centering-using-css-a-beginners-guide-/#step10.

  • xHTML page: [e.g. "index.html", used in conjunction with "style.css" below]

    			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
			<html xmlns="http://www.w3.org/1999/xhtml">

			<!-- Comment: This is my basic web page. -->

			<head>
				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
				<title>PAGE TITLE HERE</title>
				<link rel="stylesheet" type="text/css" href="style.css" />
			</head>

			<body>
				<div id="content">
					<p>CONTENT HERE.</p>
				</div>
			</body>

			</html>
  • CSS page [e.g. "style.css"]:

    			/* Comment: This is my basic style sheet. */

			body {
				background-color: #333333;
			}

			#content {
				padding: 20px;
			}

			p {
				color: #0000cc;
				font-family: Tahoma, Verdana, sans-serif;
			}

			h1 {
				font-size: 2em;
			 }

			a:link {
				text-decoration: none;
				color: blue;
			}