Cascading Style Sheets Part 1

1. Cascading Style SheetsPart 1 Spring, 2008 Modified by Linda Kenney Feb. 28, 2008 Cascading Style Sheets Part 1

2. Presentation • XHTML is meant to be used to inform the browser about the internal structure of our Web pages and their content. Cascading Style Sheets Part 1

3. Presentation (cont.) • Although HTML has historically offered a variety of elements and attributes that could be used for providing presentational info to the browser, many of them have been deprecated. • In the interest of customizing HTML for structural use, these presentational aspects of HTML have been deprecated in favor of another language designed specifically for presentational purposes. • This presentational language is named Cascading Style Sheets (CSS). Cascading Style Sheets Part 1

4. A separate presentational language • Cascading Style Sheets (CSS) is a separate language from XHTML. • It has its own syntax rules and its own vocabulary of terms. • CSS was designed separately from XHTML . • It was designed for the specific purpose of conveying presentational info to the browser. • Since it was designed for a specific job, it is able to do that job very well without making compromises. Cascading Style Sheets Part 1

5. Advantages of CSS • It allows presentation to be specified separately. • This makes it possible to use the same presentational specifications for several pages. • This also makes it easier to change the presentation of those pages. • And it makes it possible to have different presentational info applied to the same page under different circumstances. • As an added benefit, it results in smaller, simpler XHTML documents for those pages. Cascading Style Sheets Part 1

6. The <div> and <span> elements • We learned that the <div> container element can be used to create generic divisions within an XHTML document. • What we really meant is that the <div> element is a block element that has no other meaning in the context of XHTML structure. • Without any inherent structural meaning, the default presentation of the <div> element is just enough to render it as a block by adding the implied line break. Cascading Style Sheets Part 1

7. The <div> and <span> elements (cont.) • There’s a similar generic inline element called <span> • The <span> element has no implied structural meaning and therefore no default presentation associated with it. • If you were to use a <span> element without any associated CSS, it would have absolutely no effect on the way the browser presents the page. Cascading Style Sheets Part 1

8. The <div> and <span> elements (cont.) • Since both the <div> and <span> elements have no implied or default presentation, they are commonly used with CSS. • These elements can be used, in combination with the class or id attributes and appropriate CSS style rules, to effectively create custom elements that are presented in exact accordance with the author’s wishes. • Although it’s not a requirement to use <div> and <span> elements with CSS, it is a very common and convenient mechanism. • Don’t forget their end tags! Cascading Style Sheets Part 1

9. Inline styles • Inline styles are added directly to the start tags of the elements to which they apply. • They use the style attribute and set its value equal to the CSS declaration desired. • A declaration has 2 parts • Property • Value See http://pubpages.unh.edu/~ltv6/cs403/resource/samples.html (Chapter 3 – about.html, numbers 1 and 2) Cascading Style Sheets Part 1

10. Example – inline.htm • http://pubpages.unh.edu/~ltv6/samples/chap9/inline.htm <p style="background-color:green;color:white;font-family:Arial;font-size:24px“ >This paragraph is using an inline style.</p> <p>This paragraph is NOT using an inline style.</p> Cascading Style Sheets Part 1

11. Example – divexp.htm • http://pubpages.unh.edu/~ltv6/samples/chap9/divexp.htm div>This sentence is NOT using an inline style. <div style="background-color:#00FF00;color:#FFFFFF;font-family:Arial; font-size:24px">This sentence is in a div using an inline style.</div> This sentence is NOT using an inline style. </div> Cascading Style Sheets Part 1

12. Example – spanexp.htm • http://pubpages.unh.edu/~ltv6/samples/chap9/spanexp.htm <div>This sentence is NOT using an inline style. <span style="background-color:#00FF00;color:#FFFFFF;font-family:Arial;font-size:24px"> This sentence is in a span using an inline style. </span> This sentence is NOT using an inline style. </div> Cascading Style Sheets Part 1

13. Because inline styles end up being scattered throughout the XHTML code, they increase the size of your XHTML files and defeat the maintenance advantages afforded by the centralization of presentational info in internal an external style sheets. • Therefore, it’s probably wise to avoid the use of inline styles whenever possible. Carefully constructed internal or external style sheets are almost always preferable to inline styles. Cascading Style Sheets Part 1

14. Internal (or embedded) style sheets • An internal style sheet is just a collection of one or more style rules. • Because it’s part of the XHTML file with which it’s associated, the connection between the XHTML and the CSS is clear. Cascading Style Sheets Part 1

15. Internal (or embedded) style sheets (cont.) • It is included within the XHTML file using the <style> container element. • The <style> container element must be used only within the <head> element. • The <style> element should have a type attribute set equal to the MIME type for CSS: “text/css”. • The contents of the <style> element will be interpreted as CSS style rules and it must therefore follow CSS syntax, not XHTML syntax. Cascading Style Sheets Part 1

16. It is possible for a single XHTML document to utilize both internal style sheets and inline styles simultaneously. • Style rules are applied in the order they are seen by the browser. • So when there are conflicts between the rules the browser will decide in favor of whichever conflicting rule it sees last. • External Styles • Internal Styles • Inline Styles • XHTML Attributes Cascading Style Sheets Part 1

17. An internal style sheet example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS using an internal style sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> h1 {color: red;} p {color: green;} h2 {color: orange;} div {color: gray;} </style> </head> <body> <h1>CSS Example 4</h1> <p>This example uses a simple internal style sheet.</p> <h2>Using the color property</h2> <p>The color property is used to set the color of the text within this page.</p> <div>&copy; 2004, A. Michael Gildersleeve<br /> <a href="mailto:amgilder@cs.unh.edu">amgilder@cs.unh.edu</a></div> </body> </html> Cascading Style Sheets Part 1

18. Style rules • A style rule has two parts • Every style rule ends with a declaration enclosed within curly braces. • Every style rule starts with a selector, which is outside the curly braces. Cascading Style Sheets Part 1

19. Style rules – the declaration • The declaration provides the presentational aspects that the style rule specifies. • A declaration consists of a property and a value for that property, separated by a colon. • Although not strictly necessary, it’s common to end each declaration with a semicolon. • This allows a single rule to contain multiple declarations within a single set of curly braces, each separated from the next by a semicolon. • Various XHTML elements possess various properties. • By setting the values of those properties, a Web author can control how the browser presents that element. h1 {color: green;} h1 {color: green;} h1 {color: green;} h1 {color: green;} h1 {color: green;} Cascading Style Sheets Part 1

20. Style rules – the selector • Every style rule starts with a selector, which is outside the curly braces. • The selector serves to associate that rule’s declaration with one or more elements in the associated XHTML. • For every element with which a rule’s declaration is associated, a browser will set that element’s properties in accordance with the values specified for those properties in the declaration . • The example above says “set the color property of all <h1> elements to a value of green”. Cascading Style Sheets Part 1

21. Element name selectors • The most commonly used type of selector is the element name selector. • An element name selector is simply the name of an XHTML element being used as a selector. • For example, the following style rule uses the name of the <h1> element as its selector. • This selector tells the browser to apply the style rule to every <h1> element in the associated XHTML file. • Note that only the name of the element is used as the selector, not the angle brackets that make the element name into a tag. • All XHTML element names may be used as element name selectors. h1 {color: green;} Cascading Style Sheets Part 1

22. Example -- embedded.htm • http://pubpages.unh.edu/~ltv6/samples/chap9/embedded.htm <head> <title>Embedded Styles</title> <style type="text/css"> body { background-color: #000000; color: #FFFFFF; font-family:Arial,sans-serif; } </style> </head> Cascading Style Sheets Part 1

23. Example – embedded2.htm • http://pubpages.unh.edu/~ltv6/samples/chap9/embedded2.htm <head> <title>Embedded Styles</title> <style type="text/css"> body { background-color: #000000; color: #FFFFFF; font-family:Arial,sans-serif } h1 { color: #FF0000; font-style:italic; } </style> </head> Cascading Style Sheets Part 1

24. Inheritance • When one element is nested within another, we can think of the outer element as the parent element and the inner element as the child element. • In CSS, children can inherit properties from their parents. • When a style rule sets a property of one element, any children of that element generally inherit that property setting. • For example, if a rule sets the color property of all <p> elements to green, children of <p> elements will inherit that green color. Cascading Style Sheets Part 1

25. Inheritance (cont.) • Of course, any child whose color property has been explicitly set by another rule will use the color that has been set for it rather than the color it inherits from its parent. • In general, more specific settings take precedence over more general settings in CSS. • Inheritance is considered very general, so it is easily overridden with more specific rules. • Since all elements that represent visible content within the page are descendent elements of the <body> element, style rules associated with the <body> element can be inherited throughout all the elements on a page. Cascading Style Sheets Part 1

26. Using external style sheets • Writing an external style sheet is simply a matter of creating a text file that contains one or more style rules and saving it with a name ending in .css • To make use of that external style sheet, however, it must be linked to an XHTML document. <link rel="stylesheet" type="text/css" href="mainstyles.css" /> Cascading Style Sheets Part 1

27. The <link /> element must be inserted into the <head> of the XHTML document. • The <link /> element’s rel attribute is set to a value of “stylesheet” to indicate the type of linkage being created. • Its type attribute is set to “text/css” so the browser knows to interpret the contents of the linked file as CSS. • And its href attribute is set to the URL of the external style sheet’s file. • When the <link /> element is used to link an XHTML file and an external style sheet, the rules in the external style sheet apply throughout the XHTML document. Cascading Style Sheets Part 1

28. CSS files • Like an XHTML file, a CSS file is just a text file. • We create and edit CSS files with a text editor. • CSS files must be given names that end with a .css extension. • Unlike an XHTML file, however, a CSS file contains no XHTML tags or elements. • A CSS file does not contain a <!DOCTYPE> element. • Instead, a CSS file contains nothing but style rules. • A CSS file must contain at least one style rule. • There is no limit on how many style rules a single CSS file may contain. • For our purposes, a CSS file needs to be associated with one or more XHTML files. • A CSS file used in this way is an external style sheet. • External style sheets provide presentational guidance to the browser for any XHTML file with which they are associated. Cascading Style Sheets Part 1

29. Advantages to External Style Sheets… • Most authors try to use external style sheets whenever possible. • Since several different XHTML documents can derive their presentational info from a single external style sheet, external style sheets offer excellent centralization of presentational info. • This makes it easier to specify the presentation of several pages initially and easier to update that presentation later. Cascading Style Sheets Part 1

30. Advantages to External Style Sheets… • It also means the presentational info does not appear in each XHTML document. • So, the Web (html) pages are smaller and can be retrieved from the server more quickly. • The external style sheet also needs to be retrieved, but after it’s retrieved for the first time it can be stored in the browser’s cache to speed up the display of other pages that use it as well. Cascading Style Sheets Part 1

31. A sample external style sheet h1 {color: red;} p {color: green;} h2 {color: orange;} div {color: gray;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS using an external style sheet</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="styles01.css" /> </head> <body> <h1>CSS Example 1</h1> <p>This example uses a simple external style sheet.</p> <h2>Using the color property</h2> <p>The color property is used to set the color of the text within this page.</p> <div>&copy; 2004, A. Michael Gildersleeve<br /> <a href="mailto:amgilder@cs.unh.edu">amgilder@cs.unh.edu</a></div> </body> </html> Cascading Style Sheets Part 1

32. Chapter 3 Examples http://pubpages.unh.edu/~ltv6/cis599/samples/chapter3/ See examples 4 - 9 Cascading Style Sheets Part 1

33. An example of inheritance h1 {color: red;} p {color: green;} em {color: black;} div {color: gray;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS demonstrating inheritance</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="styles02.css" /> </head> <body> <h1>CSS Inheritance Example</h1> <p>This example demonstrates <dfn>inheritance</dfn>, which is an <em>important</em> concept in <acronym>CSS</acronym>.</p> <div>&copy; 2004, A. Michael Gildersleeve<br /> <a href="mailto:amgilder@cs.unh.edu">amgilder@cs.unh.edu</a></div> </body> </html> Cascading Style Sheets Part 1

34. Class selectors • While element name selectors are useful, they can be too generalized for some purposes. • Sometimes we’d like to define a rule that is associated only with certain elements of a specific type, but not all elements of that type. • Other times, we’d like to define a rule that is associated with several elements of different types. • For both these purposes we can use a class selector. Cascading Style Sheets Part 1

35. Class selectors (cont.) • A class selector associates a rule with all elements that belong to a specific class. • To add an element to a specific class, simply add a class attribute to that element’s start tag and assign it the class name as its value. • Any XHTML element that can appear within a <body> element can accept a class attribute. • And a style rule with a class selector will be associated with all elements that belong to that class, regardless of element type. <h1 class="subtle">This is a heading</h1><p class="subtle">This is a paragraph</p> Cascading Style Sheets Part 1

36. Class selectors (cont.) • To create a class selector, simply precede the name of the class with a period. • Since class selectors are more specific than element name selectors, class selectors take precedence when a conflict occurs. .subtle {color: gray;} Cascading Style Sheets Part 1

37. ID selectors • Any XHTML element that can accept a class attribute can also accept an id attribute. • While the class attribute is used to indicate the element’s membership in a group, the id attribute is used to give each element a unique identity. • For this reason, no two elements in a single page may have the same value for their id attribute. <h1 id="title">The page title</h1><div id="footer">&copy; 2004. All rights reserved.</p> Cascading Style Sheets Part 1

38. ID selectors (cont.) • To associate a style rule with a specific identified element, use that element’s unique id value as an ID selector. • An ID selector is simply an id value preceded by a pound sign (#) • ID selectors are typically used to format page elements that are sure to appear only once per page, such as titles, headers, and footers. • Since ID selectors are more specific than class selectors, ID selectors take precedence when conflicts occur. #title {color: red;}#footer {color: gray;} Cascading Style Sheets Part 1

39. An example of class and ID selectors h1 {color: teal;} p {color: green;} .dark {color: maroon;} #title {color: red;} #footer {color: gray;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Simple CSS class and ID selectors</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" type="text/css" href="styles03.css" /> </head> <body> <h1 id="title">CSS Class and ID Example</h1> <p>This example demonstrates <dfn class="dark">inheritance</dfn>, which is an <em>important</em> concept in <acronym class="dark">CSS</acronym>.</p> <h1>A second heading</h1> <p class="dark">Another paragraph, but this one is in the dark class.</p> <div id="footer">&copy; 2004, A. Michael Gildersleeve<br /> <a href="mailto:amgilder@cs.unh.edu">amgilder@cs.unh.edu</a></div> </body> </html> Cascading Style Sheets Part 1

40. Chapter 3 Examples http://pubpages.unh.edu/~ltv6/cis599/samples/chapter3/ See examples 10, 11, 14 Cascading Style Sheets Part 1

41. Combining selectors • class and id selectors can be combined with element name selectors to create more specific selectors. • To accomplish this, simply start with the element name selector and add the desired class or id selector to the end of it. • The above example applies only to <h1> elements that are members of the “chapter” class. • This color applies only to a <td> element with an id of “logo”. h1.chapter {color: purple;} td#logo {color: maroon;} Cascading Style Sheets Part 1

42. Pseudo-classes • Pseudo-classes are similar to regular classes in that they apply only to certain elements. • However, unlike regular classes, the author does not associate pseudo-classes with elements, the browser does. • This allows pseudo-classes to capitalize on the browser’s knowledge of the page and the state of each item on it. Cascading Style Sheets Part 1

43. Pseudo-classes (cont.) • This is particularly useful in association with links. • A link is created with an <a> element. • Links can be in several different states: unvisited, visited, active or hover. Cascading Style Sheets Part 1

44. Pseudo-classes (cont.) • It’s the same <a> element regardless of the state the link is in. So a single <a> element can be in any one of these states at different times. • Only the browser knows for sure what state the link is in. The browser associates the link with a specific pseudo-class based on its current state. • A link may start out displayed in the unvisited state, enter the hover state as a user moves the mouse over it, and then enter the active state if the user clicks the mouse button. If the user then returns to the same page later, that same link will be in the visited state. • Using pseudo-classes as selectors, we can change the appearance of the link in each of these distinct states. Cascading Style Sheets Part 1

45. Pseudo-class selectors • When a pseudo-class appears in a style rule’s selector, it is called a pseudo-class selector. • Pseudo-class selectors are typically associated with the <a> element as an addendum to its element name selector. • There is a separate pseudo-class selector for each of the four states it is possible for a link to be in. a:link {color: navy;}a:visited {color: teal;}a:hover {color: blue;} a:active {color: maroon;} Cascading Style Sheets Part 1

46. Pseudo-class selectors (cont.) • In the previous example, the rules instruct the browser to display unvisited links in navy, visited links in teal, active links in maroon, and hover links in blue. • Be cautious when setting link colors; many users are accustomed to the standard browser default colors (unvisited blue; visited purple; active red; hover not defined) and could be confused by drastically different color schemes. • This doesn’t mean you shouldn’t change the colors, just do so with good reason. • The order in which you specify these selectors in important. • Use LoVe/HAte as a mnemonic. Cascading Style Sheets Part 1

47. Pseudo-element selectors • CSS also offers pseudo-element selectors that allow rules to be associated with specific portions of block elements. • One pseudo-element selector is used to associate a rule with only the first letter in a block element. • Another pseudo-element selector is used to associate a rule with the entire first line of a block element. • Note that it would be impossible to accurately predict the extent of the first line as an author, since the length of a line is generally determined by the browser based upon factors such as the size of the browser window and the text. • Not all properties are available for use in rules that use these pseudo-element selectors, so be sure to research and/or test before relying upon them. • Most of the properties that would make sense, however, are available. See: http://www.w3schools.com/css/css_pseudo_elements.asp h1 {color: navy;} h1:first-letter {color: blue;} p {color: black;} p:first-line {color: maroon;} Cascading Style Sheets Part 1

48. Chapter 3 Examples http://pubpages.unh.edu/~ltv6/cis599/samples/chapter3/ See examples 12, 13 Cascading Style Sheets Part 1

49. Contextual selectors • Sometimes it is useful to define style rules that are applied only to elements that appear in a specific context. • For example, we might want a rule that applies to <em> elements only when they appear nested within <li> elements. • In this case, we can use a contextual selector. • Note that the contextual selector simply consists of two or more other selectors separated by spaces. em {color: red;}li em {color: maroon;} Cascading Style Sheets Part 1

50. Grouping selectors • Another convenient feature of CSS is the ability to group several selectors together for a single style rule. • This allows an author to apply a single rule to several different elements, classes, ids, etc. • To group several selectors for a single rule, simply separate them with commas. • The example above sets the color for all headings at once. Note that it is the commas that make this a grouping of several selectors and not a contextual selector. h1, h2, h3, h4, h5, h6 {color: maroon;} Cascading Style Sheets Part 1