1. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS Cascading Style Sheets

2. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS Define style, look and presentation of the website content The way the content is presented on the page is determined in presentation rules in a style sheet layout background fonts margins

3. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS HTML is used to create logical structure of the content CSS is used to style the structured content

4. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Styles External reside in a separate style sheet file (.css) Internal located inside individual page within tags inside the document’s Inline located within HTML tags themselves and only apply to the content of that tag

5. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Style rules Cascade There are rules to determine which style takes precedence while multiple styles can cover a single element of the page. When style rules conflict, the laws of the cascade determine how the conflict is settled. The order of the cascade 1. External 2. Internal 3. Inline

6. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Style rules Cascade The closer a rule to the element getting styled, the more power the rule has in the battle of conflicting style rules. The order of the cascade 1. External 2. Internal 3. Inline

7. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Creating CSS A style rule begins with a selector. Selector can be a tag class id

8. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Creating a style rule for a tag Redefining the style for a tag gives considerable control, as HTML has a tag for nearly any type of text you need to format.

9. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC DW CSS categories Type Background Block Box Border List Positioning Extensions

10. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Creating a Custom class Style rule for something that does not have tag as a label. Custom name for a style when you create a class..myclass Do not create classes for something that has a logical tag, like heading You can simply redefine one of the heading tags. HTML is used to create logical structure of the content CSS used to style the structured content

11. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Creating a Custom class Class is reusable Many different elements on a page can be assigned to the same class Class has a name A period (.) precedes a class selector Named elements can be targeted with CSS rules

12. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Creating a Custom class Class style rule must be applied to the document

13. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Creating advanced selectors (IDs, pseudo-class selectors) An ID can only be used once per page IDs are unique Used in addition to CSS rules A hash or pound sign (#) precedes an id selector. #subnav

14. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Creating advanced selectors (IDs, pseudo-class selectors) ID is another method for assigning names ID style rule must be applied to the document

15. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Pseudo-class selectors Names so because pseudo-states don’t actually exist in the document The user must do something to trigger the pseudo-class, such as Visit a link Hover over a link Browse over a visited link

16. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Pseudo-class selectors L-V-H-A order LoVeHAte A: link A: visited A: hover A: active

17. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC Verification of styles Previewing in a variety of browsers and browser versions Sometimes the style rules conflict and you get enexpected results

18. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS for layout Box model DIV division

19. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS for layout Box model Margin Border Padding Content CSS set rules For each element

20. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS for layout Position and float Static Relative Inherit Absolute Fixed

21. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS for layout Position and float Static Relative Inherit Absolute Fixed

22. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS for layout Float Left Right None Inherit

23. AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC CSS for layout Elements in HTML can nest. Inside the body tag might be a div (division) named content with a div named newitem nested inside. Each of these nested elements exist in a parent-child relationship that allows CSS properties to be inherited. The child elements are descendants of the parent and inherit properties from them.