ProblemYou want to use CSS in your web pages. SolutionStart 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 browserThen 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 CSSDiscussionCSS 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.
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; } See AlsoRecipe 1.2 for more information about CSS selectors; and Appendix C, "CSS 2.1 Selectors, Pseudo-classes, and Pseudo-elements," for a listing of selectors. |