Skip to main content Link Menu Expand (external link) Document Search Copy Copied

CSS Fun

In this activity, we will test out a few different ways to style our page with CSS.

Inline CSS

  1. Create an HTML file named inline-css.html.
  2. Copy and paste the following code in the <body> section of your inline-css.html.
     <p style="color:crimson; font-weight: bold;">CSS Examples</p>
     <p style="font-style:italic; font-size:2em; background:yellow;">Your name</p>
     <p>Paragraph with default format</p> 
    
  3. Open the inline-css.html in a web browser. Observe how the document is displayed.
  4. Create another HTML file named inline-css2.html. This will be an example of a second page in our site. Repeat the same process to make inline-css2.html look similar to inline-css.html.
  5. In inline-css.html, add two paragraphs with the same format.
     <p style="color:crimson; font-weight: bold;">A new paragraph is added.</p>
     <p style="color:crimson; font-weight: bold;">And then another paragraph.</p>
    
  6. Modify the color property of the paragraphs in inline-css.html with another color, e.g., green.
     <p style="color:green; font-weight: bold;">CSS Examples</p>
     <p style="font-style:italic; font-size:2em; background:yellow;">Your name</p>
     <p>Paragraph with default format</p> 
     <p style="color:green; font-weight: bold;">A new paragraph is added.</p> 
     <p style="color:green; font-weight: bold;">And then another paragraph.</p>
    
  7. Open the inline-css.html in a web browser. Observe how the document is displayed.
  8. Modify inline-css2.html to make it look similar to inline-css.html.

Notice that to keep the style consistent, we need to modify every instance of the property. If the same style will be used across multiple files, we need to repeatedly modify every instance of the property of every file.

Document-level CSS

  1. Create an HTML file named document-css.html.
  2. Copy and paste the following code in the <head> section of your document-css.html.
     <style>
       .custom { 
         color: crimson; 
         font-weight: bold; 
       }
       .important { 
         font-style: italic; 
         font-size: 2em; 
         background: yellow;
       }
     </style>  
    
  3. Copy and paste the following code in the <body> section of your document-css.html.
     <p class="custom">CSS Examples</p>
     <p class="important">Your name</p>
     <p>Paragraph with default format</p> 
    
  4. Open the document-css.html in a web browser. Observe how the document is displayed.
  5. Create another HTML file named document-css2.html. This will be an example of a second page in our site. Repeat the same process to make document-css2.html look similar to document-css.html.
  6. In document-css.html, add two paragraphs with the same format.
     <p class="custom">A new paragraph is added.</p>
     <p class="custom">And then another paragraph.</p>
    
  7. Modify the color property of the .custom class selector in <style> of document-css.html with another color, e.g., green (we will discuss CSS selector in detail later).
       .custom { 
         color: green; 
         font-weight: bold; 
       } 
    
  8. Open the document-css.html in a web browser. Observe how the document is displayed.
  9. Modify document-css2.html to make it look similar to document-css.html.

Within a single file, how many instances of the color property did you modify? When the same style is used across multiple files, how many instances of the color property did you modify?

External-Level CSS

  1. Create a folder named styles in the directory where your HTML file locates. In the styles folder, create a stylesheet named exercise.css.
    • Optional: Depending on how you would like to organize your files, you may create a hierarchical structure, containing multiple levels of folders. Consider how you would like to organize your files for future maintenance, reuse, and evolution.
  2. Copy and paste the following code in exerercise.css.
       .custom { 
         color: crimson; 
         font-weight: bold; 
       }
       .important { 
         font-style: italic; 
         font-size: 2em; 
         background: yellow;
       }  
    
  3. Create an HTML file named external-css.html.
  4. Copy and paste the following code in the <head> section of your external-css.html.
     <link rel="stylesheet" type="text/css" href="styles/exercise.css">  
    
  5. Copy and paste the following code in the <body> section of your external-css.html.
     <p class="custom">CSS Examples</p>
     <p class="important">Your name</p>
     <p>Paragraph with default format</p> 
    
  6. Open the external-css.html in a web browser. Observe how the document is displayed.
  7. Create another HTML file named external-css2.html. This is an example of a second page in our site. Link to exercise.css. Repeat the same process to make external-css2.html look similar to external-css.html.
  8. In external-css.html, add two paragraphs with the same format.
     <p class="custom">A new paragraph is added.</p>
     <p class="custom">And then another paragraph.</p>
    
  9. Modify the color property of the .custom class selector in exercise.css with another color, e.g., green (we will discuss CSS selector in detail later).
       .custom { 
         color: green; 
         font-weight: bold; 
       } 
    
  10. Open the external-css.html in a web browser. Observe how the document is displayed.
  11. Open the external2-css.html in a web browser. Observe how the document is displayed.

Where did you modify the color property? To keep the style consistent, how many times did you modify the color property?