CSS Rule Structure

Rules for Rules

H01a - (time)
- CSS Style Sheet:
  - A collection of rules.
  - Using the proper tags, a style sheet can be embedded in the head of an html file or in a separate .css file that is linked to.
- The parts of a rule:
  - Selector (this will be covered in a subsequent lesson)
    - { A declaration box starts and ends with curly brace
      - Declaration (consists of the following)
        Property : value ;
      - Another Declaration (you can have many in a rule)
        Property : value ;
    - } ...a curly brace closes the declaration box
  - Comparison between the syntax of css and html:
    - html
      - attribute=value
    - css:
      - property:value;

<style  type="text/css">
h3 {
color: green;  
}
</style>

H01c - (time)
- You can put a bunch of rules all in a row, but it is better to stack the declarations on top of each other for improved legibility. Example of all of a rule's declarations in one row:
  selector { property:value; property:value; property:value; }
- It’s OK to have line breaks, spaces, and tabs in a declaration without problems.
- CSS Comments /* */

H01d - (time)
1. Create an html5 file.
2. Name it yourlastname_H01.html
3. Give it an html title of : yourlastname_H01
4. Put style tags into the head of the document as I have done here.
5. Within that style element, create a new rule.
6. Use the strong tag as the selector instead of an h3 tag.
  1. Make the text color blue
  2. Add a second declaration with the property and value of
    font-family : arial ;
  3. Use the vertical layout for the rule.
7. Make a second rule inside the style tag.
  1. Simply put it under or above the first rule you created, but also within the opening and closing style tags.
  2. Use the horizontal layout for this rule.
  3. Use the em tag as the selector.
  4. Define the text color as orange
  5. Make the font-size a size of 20px (note that in CSS you must always specify a unit of measurement).
8. Test it in your browser before sending it.
9. Thanks!