CSS Rule Structure
Rules for Rules
Rule nomenclature:
- 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:
Putting a rule into a file
<style type="text/css">
h3 {
color: green;
}
</style>
More About Rules
- 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 /* */
Assignment
- H01d - (time)
- Create an html5 file.
- Name it yourlastname_H01.html
- Give it an html title of : yourlastname_H01
- Put style tags into the head of the document as I have done here.
- Within that style element, create a new rule.
- Use the strong tag as the selector instead of an h3 tag.
- Make the text color blue
- Add a second declaration with the property and value of
font-family : arial ;
- Use the vertical layout for the rule.
- Make a second rule inside the style tag.
- Simply put it under or above the first rule you created, but also within the opening and closing style tags.
- Use the horizontal layout for this rule.
- Use the em tag as the selector.
- Define the text color as orange
- Make the font-size a size of 20px (note that in CSS you must always specify a unit of measurement).
- Test it in your browser before sending it.
- Thanks!