Adding HTML Stylesheets

It is becoming less and less common in include any information in a HTML document that relates to the appearance of the page. Instead, HTML is used to describe the structure of the document, such as marking headings, paragraphs, headers and footers. Style information is included using a technology known as CSS, or cascading stylesheets. CSS is a very powerful technology that is transforming online web design and creating much more visually interesting pages than would be possible with HTML alone.

CSS information can be included in two places: directly in the HEAD section of the document or linked in through a separate CSS file. To include CSS information directly in the HEAD section of a document we add a style element, as shown in the example below.

<head>
<title>Example with included CSS</title>
	<style type="text/css">
	body {
		background-color: black;
		margin: 10px;
	 }	
	</style>													
</head>

In this example, we set the background of the body of the page to be black and have 10 pixel margins on all sides. This is done using a CSS selector. In a CSS selector, we first specify the type of element that we are setting the style for. In this case, we specify that we are changing the body element. Then, enclosed in brackets ({}), we set the properties of that element.

To include CSS information from file, use <link> tag as in example:

<link rel="stylesheet" type="text/css" href="styles.css">
List of <link> tag's attributes
rel Defines attitudes between the current document and a linked file. It is necessary for browser knew how to use the linked document.
type MIME-type of attached file. For CSS files used type "text/css"
href Path to attached file.

Besides setting the properties of a type of HTML elements (like body, h1, p, etc.) you can also change the properties of classes of elements. This is a very powerful technique because it lets you simplify your HTML greatly. For example, if you are creating a blog and you want all of your posts to be in a specific font, you add a class attribute to your post containers and then use CSS to style all of the posts.

Below is an example of how you would style a page like a blog.

<head>
	<title>Using CSS to style a class of elements</title>
	<style type="text/css">
		body { background-color: black; }		
		.post {
			font-face: georgia, times, sans;		
		}	
	</style>
</head>
<body>
	<div class="post">
		This is blog post 1	
	</div>
	<div class="post">
		This is blog post 2	
	</div>
</body>

In this example, using CSS we can eliminate the need for font tags setting the font of each post to match our design. Notice how for each div element for the posts we set the class to “post”. In the CSS, we write the selector with a period in front of post (“.post”) to tell the browser that we want to change the style for a class.

Using CSS over font tags has a number of advantages. The first is that if you want to change the style, you only have to change it in one place. The second is that your pages will load faster and your bandwidth costs will be less. By only including style information once, you diminish the amount of information that must be sent over the Internet.

There is one more thing to take a look at in the above CSS code. When we set the font-face element, we specify three fonts. If the surfer who comes to your page does not have the font Georgia installed, Times will be used, then Sans. Normally, you can assume that everyone will have one of these three fonts installed: sans, sans-serif, and monospace. If you specify at least one of these in your CSS, you can be sure that your page will look the way you intend on the majority of computers.


HTML menu.