1. Today’s objectives  Review  CSS | Rules | Declarations  HTML Structure document  Class asignment

2. CASCADING STYLE SHEETS CSS

3. CSS Level 1 – CSS1  First version of CSS (CSS Level 1 - CSS1) in 1996.  CSS Level 2 (CSS2) released in 1998.  CSS Level 2, Revision 1 (CSS2.1) Recommendation (W3C)  CSS3 specification – Working draft

4. The Benefits of Using CSS  Better type and layout controls.  Less work. Change appearance of site by editing one style sheet.  Potentially smaller file sizes and faster download.

5. The Benefits of Using CSS  More accessible sites. Meaningfully marking up content makes it more accessible for nonvisual or mobile devices.  Reliable browser support. Almost all browsers support all of CSS1 and most of CSS2.  Many browsers already support features from CSS Level 3 (CSS3) - still in development.

6. WAYS TO INCLUDE STYLES IN DOCUMENTS CSS

7. Inline Styles Heading 1

8. Internal Style Sheets h1 { color : #C0C0C0; } font-family: Arial; font-size: 1.5em;} p { font-size: 1em; font-family: sans-serif; }

9. External Style Sheets | Linked with HTML | 1 or more sheets  rel="stylesheet" | identifies the type of link, link to a style sheet.  type="text/css" tells browser what type of data, a text file with CSS.

10. External Style Sheets | Link with CSS @import url(myStyle.css);

11. External Style Sheets | Link with CSS @import url(body.css); @import url(paragraphs.css); p { color:red; }

12. Link to Master External Style Sheets with @import directives Import.css file contains @import url(body.css); @import url(paragraphs.css);

13. @import url(body.css); @import url(paragraphs.css); If I add another stylesheet, only have to modify Import.css, not all of the html pages. Import.css Body.css Paragraphs.css newstyles.css HTML Documents

14. Link to Master External Style Sheets with @import directives  Benefit of using single external style with @import directives :  Do not need to modify html in pages, when adding or removing sheets.  If you divide styles or add additional styles sheets, just open the main style sheet containing the @import directives and add or remove @import url(fileName.css).

15. RULES, SELECTORS, DECLARATIONS CSS

16. CSS Grammer  One or more style instructions (called rules).  Rules describe how elements get displayed. h1 { color: green; } or h1 {color : rgb(255, 0,0);} p { font-size: small; font-family: sans-serif; }

17. The Rule h1 { color : #C0C0C0; } Rule

18. The Rule h1 {color : #c0c0c0;} SelectorDeclaration Rule (What to format)

19. The Rule h1 {color : #c0c0c0; font-family : Arial; font-size : 2em; } Selector Declaration block Rule

20. The Rule h1 {color : #c0c0c0; font-family : Arial; font-size : 2em; } Brackets distinguish declarations | rules Colon separates property and values Semicolon separates declarations

21. TYPES OF SELECTORS CSS

22. Types of selectors  The Universal Selector* { }  Tag or HTML Selectorsh1 { } p { } body { }  Class Selectors.imageframes { }  ID Selectors#main-navigation { }  Selecting in contenth1 strong { }  Attribute Selectorsli img[title] { }

23. Types of selectors | HTML | Tag h1 {color : #c0c0c0;} body {background-color : #FFFFFF;} p {padding : 10px;}

24. Types of selectors | Classes  Classes (applies to more than one type of element).pageType {font-family: Verdana; font-size: 1em;} Hello World Learning CSS

25.  Dependent Classes (when the class is applied to a specific tag -.hiLight only applies to h1 element) h1.hiLight {background-color : blue;} Hello World Types of selectors | Dependent Classes

26.  Dependent Classes (when the class is applied to a specific tag.) h1.hiLight {background-color : blue;}.hiLight {background-color : yellow;} Hello World

27. Types of selectors | multiple classes Multiple classes applied to the same tag.  Add two or more class names to tag. List more than two classes but need space between class names..hiLight {color : blue;}.banner {font-family : Arial, sans-serif;} Hello world

28. Types of selectors | Class Names Class names  Use meaningful names  Start with period  Class name must always start with a letter. .3Rivers is invalid .threeRivers is valid |.p3Rivers is valid  Can contain any letter, number, hyphen or underscore  Can NOT contain symbols like &, *, or !.  Case sensitive – mytext is different from myText

29. Types of selectors | Class Names Name classes (and IDs) by purpose not appearance  Use names that describe purpose of the style.  If red is used to highlight errors in a report, then:.redColor – is a poor name.showErrors – is a better name

30. Types of selectors | ID  ID selectors identify:  Major sections  Unique content | a rule to ONE element on a page.  Configured with #idname #banner { background-color : #FF00FF;}

31. Types of selectors | ID  Creates a rule for an id titled “banner”.  Red, large (2em = 2 x Default type size), italic.  Applies to ID “banner” #banner { color : #FF0000; font-size:2em; font-style: italic; } Hello world!

32. Types of selectors | ID Names Don’t use ID names based on position  Use name based on purpose of content: Poor #topRight #colMid #top #bottom #sideNav Better #events #mainNav #branding #siteInfo #news

33. Combining Rules | Group Selectors h1 { color : #F1CD33; } h2 { color : #F1CD33; } h3 { color : #F1CD33; } h4 { color : #F1CD33; } h5 { color : #F1CD33; } h6 { color : #F1CD33; } OR  Styling Groups of Tags h1, h2, h3, h4, h5, h6 { color : #F1CD33; }

34. Combining Rules | Group Selectors  Tags only h1, h2, h3, h4, h5, h6 { color : #F1CD33; }  Combination of selector types in a group selector. h1, p,.copyright, #banner { color: #CCCCCC; } (sets color of tags, class, ids to #CCCCCC)

35. HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

36. HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday.

37. HTML Tree

38. HTML Tree Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and

39. HTML Tree  Ancestor: tag that wraps around another tag. ancestor of all other tags  Descendent: A tag inside one or more tags.  Parent: tag’s closest ancestor HOME  Child: tag directly enclosed by another tag. HOME…

40. HTML Tree  Sibling: tags that are children of same tag. Siblings

41. Selectors | Context | Descendent Descendent selector - context  h1 strong { color: red; } Any tag inside a level 1(h1) is red, but other instances of the tag on the page aren’t affected.  li a { font-family: Arial; }  Any tag inside a line item is Arial font, but other instances of the tag on the page aren’t affected.

42. Specificity | Descendent selectors  Specific descendent selectors override less specific selectors li a {color : green;} All anchors ( ) in line items are green ol li a {color : green;} Only anchors in line item in ordered lists are green

43. Selectors | Descendent selectors p.intro { color : red;} Hello World Any paragraph with.intro class will be Red. p.intro {color : red;} Hello World Any tag with.intro class that is in a tag will be Red.

44. Child | descendent selectors  div > h1 {color : blue; }  All heading 1 that are children of div will be blue. Hello world Hello everyone

45. Adjacent Siblings  A tag that appears immediately after another tag in HTML h1+p {color : green;} Paragraphs that are adjacent to heading 1 will be green.

46. Sibling: tags that are children of same tag. h1+p { } My Web Page Main Topic A web page about the days of the week, specifically Tuesday. These elements are adjacent: h1+p.

47. Attribute Selectors  Format a tag based on any attributes it has. img[title] {border : solid 4px #EFEFEF;} All images with a title attribute will have a border

48. Attribute Selectors li img[title] {border : solid 4px #EFEFEF;} All images that are line items with a title attribute will have a border

49. Attribute Selectors  Can be used with classes.hiLight[title] {color : red;} 186,000 MPS Tags using.hiLight class and title attribute are red

50. Attribute Selectors | ^ and $ Format external links: a[href^="http://"] { color : yellow; } ^ - begins with Any link that begins with “http://” is yellow a[href$=".zip"] { color : green; } $ - Ends with Any link URL that ends with “zip” is green.

51. Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}  * - Contains  All images where src attribute contains “_Ire” get a green, solid border.

52. Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}

53. Pseudo-Classes  a:link| a:link { color : #EFEFEF; }  a:visited | a:visited { color : #CCCCCC; }  a:hover| a:hover { color : # F33333; }  a:active | a:active {color : #B2F511;}  Hover: (these will also work)  h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }

54. Pseudo-Classes  Proper way to order four link pseudo-classes: 1. a:link { color: #F60; } 2. a:visited { color: #900; } 3. a:hover { color: #F33; } 4. a:active {color: #B2F511; }  If order is changed, the hover and active don’t work.

55. Pseudo-elements  :first-letter – p:first-letter {font-size : 2em; font-weight: bold; color: red;}  :first-line – p:first-line {font-size : 2em; font-weight: bold; color: red;}.hiLite:first-line { text-transform: uppercase; }

56. Pseudo-element | :before  :before  Adds content before an element. p:before {content : "ON SPECIAL! " } p.onSpecial:before {content : "ON SPECIAL! “; color : red;}

57. Pseudo-element | :after  :after  Adds content after an element  p:after {content: url(bullet_Ire.png);}  p.tip:after {content: url(bullet_Ire.png);}

58. Pseudo-element | :first-child  :first-child  the first of all children an OL may have. ol li:first-child { font-size:1.2em; } Item 1 Item 2 Item 3

59. Selectors  http://gallery.theopalgroup.com/selectoracle/ http://gallery.theopalgroup.com/selectoracle/  Type selectors to understand why they do