Css Basics

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#introductiona.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#introductionem, 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; } <h2 class=“title”>Specificity and the Cascade</h2> 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): • Universal selector: not specific at all • Element selector: more specific than a universal selector • Class or pseudo class selector: more specific than an element selector • ID selector: more specific than a class or pseudo class selector • 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> <head> <title>HTML and CSS</title> </head> <body> <h1 style="color: black; text-align:center">Inline Styles</h1> <h1 style="color: red; text-align:left">It is easy to use CSS</h1> <h1 style="color: blue; text-align:center">It is easy to use CSS</h1> <h1 style="color: green; text-align:right">It is easy to use CSS</h1> </body> </html>

19. Embedded Styles Using Classes <html> <head> <style> h1.left {text-align:left;color:red;} h1.center {text-align:center;color:black;} h1.right {text-align:right;color:green;} </style> <title>HTML and CSS</title> </head> <body> <h1 class="center">Embedded Styles</h1> <h1 class="left">It is easy to use CSS</h1> <h1 class="center">It is easy to use CSS</h1> <h1 class="right">It is easy to use CSS</h1> </body> </html>

20. Embedded Styles Using IDs <html> <head> <style type="text/css"> #myid {border-width: 1; border: solid; text-align: center} </style> </head> <body> <h1 class="myclass"> This h1 is not affected </h1> <h1 id="myid"> This h1 is affected by style </h1> <h1> This h1 is not affected </h1> </body> </html>

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: <html> <head> <link type="text/css" rel="stylesheet" href="mystyle.css"> <title>A Web Page Using an External Style Sheet</title> </head> <body> <h1>A Web Page Using an External Style Sheet</h1> <h2>It is easy to use HTML</h2> </body> </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: • extended • 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 • <head> • <style type="text/css"> • 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%;} • </style> • <title>Using CSS with Anchors</title> • </head>

35. Using CSS with Anchors • <html> • <head> • <style type="text/css"> • 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%;} • </style> • <title>Using CSS with Anchors</title> • </head> • <body> • <p> • <a href=“http://analog.net/”>analog24.net</a> • </p> • </body> • </html> • run StyleLinks.html

36. Using Links - Changing Backgrounds • <head> • <style type="text/css"> • 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;} • </style> • <title>Using Links - Changing Backgrounds</title> • </head>

37. Using Links - Changing Backgrounds • <html> • <head> • <style type="text/css"> • 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; • } • </style> • <title>Using Links - Changing Backgrounds</title> • </head> • <body> • <p> • Options:<br/> • <a href="home.html">Home</a><br /> • <a href="menu.html">Menu</a><br /> • <a href="locations.html" >Locations</a> • </p> • </body> • </html> • run BackgroundLinks.html

38. Buttons for Links • <head> • <style type="text/css"> • 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;} • </style> • <title>Using Links with Background Images</title> • </head>

39. Using Buttons for Links • <html> • <head> • <style type="text/css"> • 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;} • </style> • <title>Using Links with Background Images</title> • </head> • <body> • <p> • Options: • <a href="home.html">Home</a><br /> • <a href="news.html">News</a><br /> • <a href="menu.html">Menu</a><br /> • <a href="locations.html">Locations</a> • </p> • </body> • </html> • run ButtonLinks.html

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