Recipe 1.1. Using CSS with HTML

Problem

You want to use CSS in your web pages.

Solution

Start with a blank page in Notepad, your favorite text processor, or web development software like Macromedia Dreamweaver or Microsoft Expression.

Add the following HTML between the body tags and save the file as cookbook.html (see Figure 1-4):

<html>  <head>    <title>CSS Cookbook</title>  </head>  <body>   <h1>Title of Page</h1>   <p>This is a sample paragraph with a    <a href="http://csscookbook.com">link</a>.</p>  </body> </html>

Figure 1-4. Default rendering of HTML in the browser

Then add the following code changes in order to redefine the style for links, bulleted lists, and headers, and then check out Figure 1-5:

<html>  <head>   <title>CSS Cookbook</title>   <style type="text/css">   <!--   body {    font-family: verdana, arial, sans-serif;   }   h1 {    font-size: 120%;   }   a {    text-decoration: none;   }   p {    font-size: 90%;   }   -->   </style>    </head>  <body>   <h1>Title of Page</h1>   <p>This is a sample paragraph with a  <a href="http://csscookbook.com">link</a>.</p>  </body> </html>

Figure 1-5. Page is rendered differently after adding CSS

Discussion

CSS contain rules with two parts: selectors and properties. A selector identifies what portion of your web page gets styled. Within a selector are one or more properties and their values. The property tells the browser what to change and the value lets the browser know what that change should be.

For example, in the following declaration block example, the selector tells the browser to style the content marked up with the h1 element in the web page to 120% of the default size:

h1 {  font-size: 120%; }

Table 1-1 breaks out the CSS by selector, property, and value used in the solution. The result column explains what happens when you apply the property and value to the selector.

Table 1-1. Breakdown of selectors, properties, and values from the solution
Selector	Property	Value	Result
h1	font-size	120%	Text size larger than default size.
a	text-decoration	none	Links don't have any decorations, including underlining
p	font-color	blue	Text appears in blue
p	font-size	90%	Text size smaller than default size.

The standard for writing CSS syntax includes the selector, which is normally the tag you want to style followed by properties and values enclosed within curly braces:

selector { property: value; }

However, most designers use the following format to improve readability:

selector {  property: value; }

Both are valid approaches to writing CSS. Use whatever method is more comfortable for you.

Also, CSS allows selectors to take on more than one property at a time to create more complex visual presentations. In order to assign multiple properties within a selector, use a semicolon to separate the properties as shown below:

selector {  property: value;  property: value, value, value;  property: value value value value; } selector, selector {  property: value; }

Problem

Solution

Figure 1-4. Default rendering of HTML in the browser

Figure 1-5. Page is rendered differently after adding CSS

Discussion

Table 1-1. Breakdown of selectors, properties, and values from the solution

See Also