1. The Internet 10/20/11 CSS Layout CIS 228

2. 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: [identifier]

3. XHTML Grouping • Block grouping: div element • <div class=“cats”> • <h1>Cats For Sale</h1> • <h2>Six week old Tabby</h2> • <p> … </p> • <h2>Eight week old Siamese</h2> • <p> … </p> • </div> • Inline grouping: span element • <span class=“x”><em>Trotsky</em> arrived</span>

4. The Style Attribute • Three ways to attach CSS rules to a web page • The style element (in <head>) • The link element (in <head>) • The style attribute (on an element in <body>) • Attribute value: CSS declaration(s) • <p style=“color: red;”> • <li style= “color:red; font-style: italic;”> • Deprecated (try to avoid using) • Violates separation of semantics from presentation

5. The Cascade • Which declaration for property p applies on element e? • Concatenate style sheets: • Browser defaults • User style sheet • Applicable author style sheet(s) • External before internal (<link>'s before <style>'s) • Gather declarations whose selectors match the e • 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

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

7. Pseudo Classes and Elements • Refer to state not represented in the element tree • Pseudo-classe selectors • :link, :visited, :hover register the state of hyperlinks • e.g. a:link { color: C4C } • :first-child selects the first element of its parent • e.g. blockquote > p:first-child { indent: 4em } • Pseudo-element selectors (must come last) • :first-letter, :first-line • e.g. p.first-letter { font-size: 5em } • :before, :after(not supported by IE) • e.g. blockquote:before { content: open-quote }

8. Attribute Selectors • Match elements based on their attribute • [title] elements with a title attribute • e.g. li > a[title] • [title=UN] matches elements with title UN • e.g. p[class=loser] (same as p.loser) • [title~=UN] matches element with UN in the title • In a value that is a list of identifiers separated by “ ” • [lang|=en] matches elements containing en in lang • In a value that is a list of identifiers separated by “-”

9. Normal Flow • Block elements • Arranged vertically • Line break between successive elements • Margins overlap • Ignore floats • Inline elements • Arranged horizontally • Lines wrap (if they get too long) • Margins add • Respect float boundaries

10. Floats • Floats are • removed from the normal flow • pushed to the right (or left) of the page • at the point they were removed • ignored by block elements in the normal flow • avoided by inline elements in the normal flow • float: right ; • Clear property • delays a block element until after any float • clear: right ;

11. Creating a Sidebar • In XHTML • 1 Wrap sidebar content in a div element • 2 Give div element an id attribute (e.g. id= “sidebar”) • 3 Move div element to where sidebar should start • In CSS • 4 Set width property of the sidebar • 5 Set float property of the sidebar • 6 Increase margin for content next to the sidebar • 7 Set clear property for content immediately below sidebar

12. The Position Property • Absolute • top (right, bottom, left) relative to containing positioned element • z-index property orders absolutely positioned elements • Fixed • Top (right, bottom, left) relative to viewport (browser window) • Relative • Top (right, bottom, left) relative to element's normal flow position • Static • Default (normal flow position)