Reusable Code


A basic premise of modern web design is separating presentation from content. This is accomplished by storing css stylesheets in separate files from html files.
If we have a stylesheet named style.css, there are two methods for embedding it into our html page. Either statement can be placed in the head section of our HTML page. This allows easy sharing of common CSS styles across many HTML pages.
view plaincopy to clipboardprint?
  1. <link href="style.css" rel="stylesheet" type="text/css">  
view plaincopy to clipboardprint?
  1. <style type="text/css">  
  2.   @import url(style.css);  
  3. </style>  
We have already seen that css rules can be used to modify the style of any html block. For example, we might want a css rule for all paragraphs to have a specific font color and have a specific background color:
view plaincopy to clipboardprint?
  1. p {  
  2.     color: red;  
  3.     background-color:yellow;      
  4.     }  

Introducing Classes and IDs


One way to target a specific area of your document is by adding classes and IDs. A class css rule starts with a period whereas an ID uses a # symbol. They are very similar in their application. We'll look at classes in this lesson and IDs in the following lesson.
Let's say we wanted to present a series of famous speeches such as the Gettysburg Address. We want to present the title, author, and the content of the speech each in a visually distinct manner. Here's how our html would look after we added class definitions to our markup:
view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>The Gettysburg Address</title>  
  5.     </head>  
  6.     <body>  
  7.         <p class="title">The Gettysburg Address</p>   
  8.           
  9.         <p class="author">Abraham Lincoln</p>   
  10.           
  11.         <p class="content"> Four score and seven  
  12.         years ago our fathers brought forth on this continent, a new  
  13.         nation, conceived in liberty, and dedicated to the proposition  
  14.         that all men are created equal. </p>   
  15.           
  16.         <p class="content"> Now we  
  17.         are engaged in a great civil war, testing whether that nation,  
  18.         or any nation so conceived and so dedicated, can long endure. We  
  19.         are met on a great battlefield of that war. We have come to  
  20.         dedicate a portion of that field, as a final resting place for  
  21.         those who here gave their lives that that nation might live. It  
  22.         is altogether fitting and proper that we should do this. </p>   
  23.           
  24.         <p class="content"> But in a larger sense, we cannot dedicate - we  
  25.         cannot consecrate - we cannot hallow - this ground. The brave  
  26.         men, living and dead, who struggled here, have consecrated it,  
  27.         far above our poor power to add or detract. The world will  
  28.         little note, nor long remember, what we say here, but it can  
  29.         never forget what they did here. It is for us the living,  
  30.         rather, to be dedicated here to the unfinished work which they  
  31.         who fought here have thus far so nobly advanced. It is rather  
  32.         for us to be here dedicated to the great task remaining before  
  33.         us - that from these honored dead we take increased devotion to  
  34.         that cause for which they gave the last full measure of devotion  
  35.         - that we here highly resolve that these dead shall not have  
  36.         died in vain - that this nation, under God, shall have a new  
  37.         birth of freedom - and that government of the people, by the  
  38.         people, for the people, shall not perish from the earth. </p>  
  39.           
  40.     </body>  
  41. </html>  
View Current Version

Now we're ready to add css rules based on our class descriptions. We'll create a file called style1.css with the following rules:
view plaincopy to clipboardprint?
  1. p.title{  
  2.     font-size:24px;  
  3.     font-weight:bold;  
  4.     text-align:center;  
  5. }  
  6.   
  7. p.author{  
  8.     font-size:18px;  
  9.     font-style:italic;  
  10.     text-align:center;  
  11. }  
  12.   
  13. p.content{  
  14.     font-size:16px;  
  15.     color:gray;  
  16.     text-indent:20px;  
  17. }  
Now we'll add the following to the head section of our html page:
view plaincopy to clipboardprint?
  1. <link href="style1.css" rel="stylesheet" type="text/css">  

View Updated Version

Sample Projects