CSS Cont'd: Cascading Style Sheets

Transcription

1 CSS Cont'd: Cascading Style Sheets Comuter Science and Engineering College of Engineering The Ohio State University Lecture 14

2 Classes Not all aragrahs created equally Some aragrahs are not finalized (), so want th styled differently Solution: class attribute < class=""> </> CSS syntax for selector: elt.class. { color: gray; } Wildcard (any elent):.class. { font-style: italic; } An elent can be in multile classes < class=" even"> </>

3 Classes Add to Tree Structure body elent class name h1 a img q

4 Notes on Classes When an elent belongs to multile classes, which style gets alied? Different roerties are combined Conflicts on same roerty need to be resolved (more later) Classes should reflect santics or structure, not visual formatting Bad class name: green Good class name: Examle: csstest.html

5 Probl Multile block elents that need to be styled together Header and aragrah are both art of a warning that needs to be highlighted < class="warning"> </> < class="warning"> </> This aroach is awkward Every block elent in grou needs to be decorated in this way Difficult to style the entire unit (e.g., add a border around the whole warning)

6 Solution: Div Elent Div gives a logical block elent Can be styled just like any other block elent Font, dimension, border, margin, etc..warning { border: thick; } Can have block elents as children Style inherited by children <div class="warning"> <> </> <> </> </div>

7 Divs in the Tree body elent class name h1 div warning q a img

8 San Div is a (logical) block level elent Gives line breaks Sometimes styling/santics belongs to inline elents Text discussing different textbooks, where titles aear here and there Solution: San tag <>One book to consider is the <san class="book">book of Ruby</san>, Now all book titles can be styled consistently Like div, san often used with classes

9 Adding Sans to the Tree body elent class name h1 div warning san university q san university University of Michigan a img The Ohio State University

10 Ancestors in Selectors Sometimes you care about where in the tree an elent occurs University names aearing somewhere inside warnings need a different styling CSS syntax: ancestor ancestor elt.warning.university Note: big difference between.warning.university.warning,.university.warning,.university

11 Your Turn body.warning. san.university.warning.university div.university h1 div warning san university q san university University of Michigan a img The Ohio State University

12 More Exotic Paths in Selectors Child: >.warning >.warning li > Adjacent sibling: + h1 + /*only first after h1*/ General sibling: ~ h1 ~ /*all sibling 's after h1*/ Attributes: [attr="value"], *=, $= inut[tye="button"] a[href$=".df"]

13 Your Turn: Select Shaded Node h1 div warning body? body > h1 ~.warning + + san university q san university University of Michigan a img The Ohio State University

14 Id: Class Plus Invariant Some classes are meant to be unique At most one such elent er age <div class="sonsors"> Solution: id attribute <div id="sonsors"> CSS syntax for selector: elt#id #sonsors { color: red; } Wildcard (any elent): #id #headline { box-style: thin; } An elent can have at most one id

15 Summary Classes and Ids Class gives an extra dimension to tree ID is unique: at most one er age CSS selector syntax (. vs. #) Divs and Sans Div is a logical block elent San is a logical inline elent Often used together with classes/ids Selectors with ancestors, siblings CSS selector syntax (sace, >, +, ~)