CIS 228 The Internet 10/18/11 Grouping XHTML

CSS Selectors Rule: selector-group { property-declaration* } Selector-group: selector *, Selector: simple-selector * operator Operator: descendant (“”) | child (“>”) | sibling (“+”) Simple-selector: (universal (“*”|“”)|type) context* (type is an XHTML element name) Context selectors Id-selector: #identifier Class-selector:.identifier Pseudo-class: :identifier (e.g. :link, :visited, :hover, etc.) Attribute-selector: (stay tuned)

CSS Selector Examples h1, h2, h3 p.legalese *.legalese (same as.legalese) p#footer *#footer (same as #legalese) a:link (same as :link why?) blockquote p (any paragraph inside a blockquote) blockquote > h2 (heading child of a blockquote) h1 + p (first paragraph after a heading) em em, p.legalese#footer, h1 + blockquote > p q em

The Box Model Element content is surrounded by (optional) boxes: Padding transparent space Border width style solid double groove outset dotted dashed inset ridge color if not specified, same as content text (element color) Margin transparent space

Sides Each box has four sides: top right bottom left (clockwise ordering) Properties of an individual side can be specified border-bottom-style: dotted padding-left: 10% Properties of each side can be specified in turn border-style: none double dotted inherit margin: 2em 5% 30px 6pt padding: 4em 8em (4em 8em) border-width: 3px (3px 3px 3px)

XHTML Grouping Block grouping: div element Cats For Sale Six week old Tabby … Eight week old Siamese … Inline grouping: span element Trotsky arrived

The Cascade Which declaration for property p applies on element e? Concatenate style sheets: Browser defaults User style sheet Applicable author style sheet(s) (in order) Gather declarations whose selectors match the e (If none, check inheritance) If any are “ ! important ”, ignore the rest (You can mark declarations “ ! important ”, but don't!) Ignore all but the most specific declarations The physically last remaining declaration wins

Selector Specificity Rules specified by style attributes are most specific If there is one, ignore the rest Id-selectors are most important Ignore rules with less than the most id-selectors Context-selectors are very important Ignore rules with less than the most context-selectors Type selectors are important Ignore rules containing less than the most type-selectors Remember: last remaining rule wins

The Style Attribute Three ways to attach CSS rules to a web page The style element (in ) The link element (in ) The style attribute (on an element in ) Attribute value: CSS declaration(s) Deprecated (try to avoid using) Violates separation of semantics from presentation