Take the HTML quiz for practice.

• Monday
• Wednesday
• Friday

Cascading Style Sheets

Monday

• Introduction
• Enables separation of content and presentation - easier to redesign the appearance while keeping the content clean.
• Works by allowing you to set values for various style properties.


• Can be implemented on a page in 3 ways:
  1. by setting the style HTML attribute for an element(inline)
  2. by writing it in between <style> tags (internal).
  3. by linking to a separate style sheet file (external). Take a look at the course page's css file


• Syntax is rule-based. You state what you're setting the style for using selectors:
  1. an element type (<p>) - all paragraphs will use this style

     p {
         color: blue;
     }                
                 

  2. a id-named element (<p id="myPara">) - just the element named myPara will use this style

     #myPara {
         color: green;
     }                
                 

  3. a general class that any element could use (<p class="coolStyle">) - any element that sets the "class" attribute to the style's class name will use it

     .coolStyle {
         color: red;
     }                
                 

  4. a universal selector * , which affects all elements on the page

     * {
         font-size: 24px;
     }                
                 

  and then you define values for properties, separating each property-value pair with a semicolon.


• You can implement CSS in all 3 simultaneously, if you like! If multiple styles are present, they will be interpreted as a virtual style sheet where any common rules are overwritten by the most recently-loaded style. By this convention, the inline style will take priority over internal and external styles (see Multiple Style Sheets).
• This text has no style, but this text does and now it's back to no style.

Wednesday

• Setting colors. Take note of:
  1. Using named colors, hexcodes, RGB
  2. Transparency (alpha) effects:
     This is a big old block of text
     The background color is red
     Except for here, where it's green
     And here, where it's transparent green on top of red, making an unpleasant color
• Text
• Fonts
• Lists

Friday

• Link states and colors Set to default Set to other
• Margins and padding
  • Preview: CSS Box Model
• Tables, table stylings, nth-child selector

  Example caption

  Title	Release date	Runtime
  The Second Stage Turbine Blade	March 5, 2002	48:44
  In Keeping Secrets of Silent Earth: 3	October 7, 2003	1:09:34
  Good Apollo, I'm Burning Star IV, Volume One: From Fear Through the Eyes of Madness	September 20, 2005	72:04

• Borders
• Setting backgrounds:
  1. Using a background-color property
     

     Note that setting background color does not automatically give compatible results with text color!

  2. Using a background image with different repeat rules:
     Change to tile Change to default

     
     
     
     
                         Nananananananana cat maaaaaaaaaaaan!