1. CSS BASICS

2. CSS Rules

3. Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a property and a value  Property: Aspect of an element that is modified, e.g., color, width, etc.  Value: The specific style applied to the selected element

4. CSS Selectors  CSS selectors can specify from one to many elements  The Universal Selector * { color: blue; } Selects all foreground (text) elements on the page and colors them blue

5. Element Selector  Selects all elements specified by a tag name  More specific than the universal selector  Still, not very specific since it selects ALL occurrences of the chosen element em { color: red; } will color each instance of the em (emphasize) element on the page red

6. Class Selector  Targets any element with the class name in its class attribute  Can be applied to almost every element  Any number of elements can belong to the same class…not very specific.info { color: purple; } will color any text in the class info purple

7. ID Selector  Will select ONLY the element with the specified ID  Almost any element can have an ID attribute  The value of that attribute can be used only ONCE per page  Since an ID selector can only be used once per page, the ID selector is more specific than the class selector #introduction { color: green; } Will give the element with the ID introduction a green foreground

8. Pseudo Class Selectors  Like a class selector, but selects an element in a particular state  The same specificity as the class selector  Preceded by a colon ( : )  Order is important  :link { color: blue; } selects all hyperlinks and colors the text blue  :visited { color: purple; } selects all previously selected hyperlinks and colors the text purple  :hover { color: green; } selects an element (usually a hyperlink) and colors the text green

9. Pseudo Classes (continued)  :active { color: red; } selects links that are being clicked by a mouse (or the RETURN key being pressed) and colors the text red  :focus { color: orange; } selects an element that has the focus and colors the text orange…not supported by all browsers

10. Descendant (Contextual) Selectors  Created from two or more of the previously described basic selector types separated by spaces  Will select elements matching that position in the document tree

11. Descendant (Contextual) Selectors  Examples #introduction em { color: yellow; } will color any em element within the ID #introduction yellow #introduction.info p * { color: pink; } Will color the foreground of anything pink that is in a P element that is within the.info class, that is within the ID #introduction

12. Combining Selectors  Two or more selector types can be combined, e.g., an element and an ID, or and ID and a class p.info { color: green; } the foreground of anything in element p within class.info is colored green p#introduction a.info:hover { color: silver; } Selects hovered links (a elements) belonging to the.info class that are within the p element of the ID #introduction

13. Grouping Selectors  Selectors can be grouped together to form a single rule  Selectors are separated by commas p, h1, h2 { color: blue; } Colors any p element, h1 or h2 element blue p#introduction em, a.info:hover, h2.info { gold; } Selects all em elements within the paragraph element with ID #introduction, all hovered links with class info, and h2 elements in the info class

14. Specificity and Cascading  Given: h2 { color: orange; }.title { color: blue; } Specificity and the Cascade What will happen? Because classes are more specific than elements, the class takes precedence and the text color is blue

15. Specificity and Cascading  Rules of specificity (in reverse order): 1. Universal selector: not specific at all 2. Element selector: more specific than a universal selector 3. Class or pseudo class selector: more specific than an element selector 4. ID selector: more specific than a class or pseudo class selector 5. Properties in an inline style attribute are the most specific of all

16. Cascading  Given:.info h2 { green; } h2.title { orange; }  In this case, h2 in the title class is a descendent of h2 in the info class.  Both of the above rules should apply to h2 because the selectors are equal in specificity  But, style declarations are applied in the order they are received, so later declarations override earlier ones

17. Cascade Order  Since style declarations are applied in the order they are received, later declarations override prior ones  This is true whether the declarations occur in the same rule, in a separate rule in the same style sheet, or in a separate style sheet downloaded after a prior one p { color: black; color: green; } color: green will override color: black because it is declared after (later than) color: black

18. In-line Styles HTML and CSS Inline Styles It is easy to use CSS

19. Embedded Styles Using Classes h1.left {text-align:left;color:red;} h1.center {text-align:center;color:black;} h1.right {text-align:right;color:green;} HTML and CSS Embedded Styles It is easy to use CSS

20. Embedded Styles Using IDs #myid {border-width: 1; border: solid; text-align: center} This h1 is not affected This h1 is affected by style This h1 is not affected

21. Why Not Inline Styles?  The browser has to process too much redundant code  If an inline style has to be changed, you’ll have to find every instance of that style and change it  This can be tedious work with a large website  Inline styles apply to only one line at a time  Inline styles are not constructed as rules, defeating the purpose of CSS

22. Why Not Embedded Styles?  They only apply to one page at a time  Other pages in the website have to have their own embedded styles…more redundant code

23. External Style Sheets Contents of mystyle.css: h1 {color: black; text-align: center;} h2 {color: blue; text-align: center;} Contents of ExternalStyle.html: A Web Page Using an External Style Sheet A Web Page Using an External Style Sheet It is easy to use HTML

24. Why External Style Sheets?  Since external style sheets are downloaded only once, then cached, pages load faster  Presentation and structure are completely separated  Allows your entire site’s visual design to be controlled by one style sheet

25. Cascade Order  Browser Style Sheet  User style sheet  Author style sheets (in the order that they are linked or embedded)  Inline author styles

26. A Rule of Thumb  The style closest to the content wins  Whichever value is declared last will be the one applied when the content is rendered

27. !important  !important will force the browser to honor that value above all others  The !important directive must be placed at the end of the value before the semicolon h1 { color: red !important; }

28. Formatting CSS  Two general formats: 1. extended 2. compacted

29. Extended Formatting h1, h2, h3 { color: red; } h1 { font-size: 160%; } h2 { font-size: 130%; }

30. Compacted Format h1, h2, h3{color:red;} h1{font-size:160%;} h2{font-size:140%;} h3{font-size:120%;margin-bottom:.5em;}

31. Semicompacted Format h1, h2, h3 { color: red; } h1 { font-size: 160%; } h2 { font-size: 140%; } h3 { font-size: 120%; margin-bottom:.5em; }

32. CSS Comments /* these base styles apply to all headings */ h1, h2, h3, h4, h5, h6 { color: red; } /* adjust some sizes */ h1 {font-size: 180%; } h2 { font-size: 160%; } h3 { font-size: 140%; } /* hide these rules h4 {font-size: 120%; } h5 { font-size: 100%; } h6 { font-size: 80%; } End hiding */

33. Font Families  A rule for setting the Font Family of an Element Body { font-family: Georgia, “Times New Roman”, Times, serif } Note double quotes…

34. Using CSS with Anchors   a:link { color: red; text-decoration: underlined; font- size: 180%; }  a:visited { color: green; text-decoration: none; font- size: 180%;}  a:hover {color: blue; text-decoration: none; font- size: 250%;}   Using CSS with Anchors 

35. Using CSS with Anchors   a:link { color: red; text-decoration: underlined; font-size: 180%; }  a:visited { color: green; text-decoration: none; font-size: 180%;}  a:hover {color: blue; text-decoration: none; font-size: 250%;}   Using CSS with Anchors   analog24.net   run StyleLinks.html run StyleLinks.html

36. Using Links - Changing Backgrounds   a {color: black;  font: 12px Arial,Helvetica,sans-serif;  text-decoration: none;  border: 2px solid black;  display: block;  width: 200px;  padding: 3px 10px;  background: #dcdcdc;}  a:hover, a:active, a:focus {  background: #4169E1;  font-weight: bold;}   Using Links - Changing Backgrounds 

37. Using Links - Changing Backgrounds   a {color: black;  font: 12px Arial,Helvetica,sans-serif;  text-decoration: none;  border: 2px solid black;  display: block;  width: 200px;  padding: 3px 10px;  background: #dcdcdc;  }  a:hover, a:active, a:focus {  background: #4169E1;  font-weight: bold;  }   Using Links - Changing Backgrounds   Options:  Home  Menu  Locations   run BackgroundLinks.html run BackgroundLinks.html

38. Buttons for Links   a {color: black;  font: 12px Arial,Helvetica,sans-serif;  text-decoration: none;  display: block;  width: 200px;  height: 22px;  padding-top:8px;  text-align:center;  background-image: url('btnOn.gif');}  a:hover {  background-image:url('btnOff.gif');  font-weight: bold;}   Using Links with Background Images 

39. Using Buttons for Links   a {color: black;  font: 12px Arial,Helvetica,sans-serif;  text-decoration: none;  display: block;  width: 200px;  height: 22px;  padding-top:8px;  text-align:center;  background-image: url('btnOn.gif');}  a:hover {  background-image:url('btnOff.gif');  font-weight: bold;}   Using Links with Background Images   Options:  Home  News  Menu  Locations   run ButtonLinks.html run ButtonLinks.html

40. CSS and Tables  TableBorder.html TableBorder.html  TableAlignment.html TableAlignment.html  TableBackground.html TableBackground.html