FORMATTING IN CONTEXT

FOLLOW UPS

ANCHOR POINTS MUST BE UNIQUE  If you have more than one, how does it know where to go?  They can be repeated across pages  You can always have an id=“top”

FIXED WIDTH DIV  Let the background fit the window  Define all of your content in a fixed width div  Width: 900px;  Why?  Simpler formatting  Even % of a fixed size is a fixed size

FORMATTING BY SECTION (LAST WEEK)  Paragraph in each section may want to look different  Smaller in header or footer  Lists  No bullets  In a line  Different spacing

SELECTING DEFINITION FOR SAME TAG  Name the context in the css by using a space header p { text-align: center; } footer p { text-align: right; }

MULTIPLE STYLES: CLASSES HTML: class=“name”  Use names to imply content  Multiple ways to define  Style that applies to only one element  Style that applies to many elements

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

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

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

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

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

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