1. CLASSES REVIEW: HREF, CONTEXT, FILE STRUCTURE

2. BIG CAVEAT Never cut and paste from a Powerpoint slide Punctuation is not the same Note that the “ is curly. It should not be in HTML

3. PUBLIC_HTML STRUCTURE onyen public_html comp101 index.html project1 index.html project1.css

4. HREF FORMATS (HREF=“ “) To referenceUse Another file in the same folderfile.ext A file in a subfoldersubfolder/file.ext index.html in a subfoldersubfolder A file in a containing folder../file.ext An anchor point on this page (need an id!)#anchor The top of this page# An anchor point on another page in same folderfile.ext#anchor An external page (target=“_blank”)http://www.complete.url

5. CSS IN CONTEXT HTML used to structure the context Use that structure to format Structure tags: header, nav, main, div, section

6. 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

7. CLASS FOR ONE ELEMENT Name the declaration set for a specific selector (tag) HTML: class=“name” CSS: tag.name div.intro{ text-align: center; }

8. CLASS FOR MANY ELEMENTS HTML: class=“name” CSS:.name Particularly useful for maintaining consistency.intro{ text-align: center; color: red; } Header 1 Header 2

9. USING CLASS AND PSEUDO p.intro:first-letter { color: red; } a.highlight:hover { color: red; }

10. 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; }

11. SHORTHAND: MULTIPLE SELECTORS h1 { text-align: center; } h2 { text-align: center; } h1, h2 { text-align: center; } Two forms have same effect Good way to maintain consistency

12. REFERENCING IDS id can also act as a class But notice that you can only use it once on any page Can repeat it on multiple pages To reference an id in CSS #idname instead of.classname All the same forms (one element, any element, context) Or limit ids to location and classes to format can have both