1. Selective Formatting

2. Auto Grader

3. Multiple selectors  May use the same formatting for two elements h1, h2 { font-family: cursive; }  Maintains consistency

4. Basic page design  Header, includes  h1 title  Nav(igation)  main for main body  Footer

5. Formatting by section  Paragraph in each section may want to look different  Smaller in header or footer  Lists  No bullets  In a line  Different spacing

6. Selecting one of several definitions for the same tag  Name the context in the css by using a space header p { text-align: center; } footer p { text-align: right; }

7. Multiple selectors with context  May use the same formatting for two elements h1, h2 { font-family: cursive; }  When using context, need to repeat it header h1, main h2 { font-family: cursive; }

8. Multiple Styles: Classes HTML: class=“name”  Use names to imply content, not style  Multiple ways to define  Style that applies to only one element  Style that applies to many elements

9. Class for one element  Name the declaration set for a specific selector (tag)  HTML: class=“name”  CSS: tag.name div.intro{ text-align: center; }

10. Class for many elements  HTML: class=“name”  CSS:.name  Particularly useful for maintaining consistency.intro{ text-align: center; color: red; } Header 1 Header 2

11. Using class and pseudo p.intro:first-letter { color: red; } a.highlight:hover { color: red; }

12. Nested Selector  Only applies within context  Avoids putting class= everywhere!  Useful for formatting lists  HTML: class=“name” only for encompassing  CSS: tag.name tag ul.horizontal { list-style-type: none; } ul.horizontal li { display: inline; }