Cascading Style Sheets (CSS)

1. Cascading Style Sheets(CSS) DBI 2003

2. Overview of CSS

3. Same Page – Different Styles • Look at W3C Core Style Sampler • How is it done? • Style declarations are in a separate file • The HTML (or XML) document has a link to the style sheet • You can download and look at the Modernist style sheet • The style for the H1 tag, as defined in modernist.css, is shown on the next slide

4. h1 { font-family: Impact, Arial Black, Helvetica Black, sans-serif; font-size-adjust: .46; font-size: 2.33em; font-weight: 400; font-style: normal; text-decoration: none; word-spacing: normal; letter-spacing: normal; text-transform: none; }

5. What is a Style? • Font properties • family, size, weight, style, variant • Text properties • color, transform, decoration • Background • background-color, background-image, background-repeat, background-attachment, background-position, background Property names appear in red

6. A Style is Also a Layout • Text Layout • direction, word-spacing, white-space, letter-spacing, line-height, text-align, text-indent • Elements as Boxes • margin-top (-bottom, -left, -right) • padding-top (-bottom, -left, -right) • border-width, border-color, border-style • Positioning Boxes • float, clear, display, vertical-align • position, left, top, width, height, overflow, visibility, clip, z-index Property names appear in red

7. How and Where the Style is Described? • The style is specified by style rules • The style rules appear either in the document or in external files, called style sheets • Inside a document, there are inline styles and embedded style sheets • External style sheets are either linked or imported

8. Cascading of Styles • CSS merges style rules from different places (inline, document-level, imported and linked) • Different places may have conflicting style rules • The process of merging (“cascading”) styles from different places determines which style rules have priority

9. Overview of the Layout Process in CSS • Think of each word as a rectangular box • The natural layout of the boxes is • left to right • top to bottom • Think of each HTML (or XML) element as a big box that contains smaller boxes (e.g., words)

10. The Layout of Big Boxes • Big boxes are also laid out left-to-right, top-to-bottom • Inside each big box, the smaller boxes are laid out similarly • This is a simplified description of the layout process • Actually, there are more options than just the natural document flow

11. Layout in HTML vs. CSS • In pure HTML, the only way to control the positions of elements is by using tables • It is cumbersome to control positions in this way • Rendering tables in a browser may take some time (check out this page) • CSS makes it easy to position elements on a page

12. Relative vs. Absolute • In CSS, positions (of boxes) and sizes (of fonts and boxes) could be either relative or absolute • In an “absolute” style • Font size is fixed • Sizes and positions of elements are fixed • In a “relative” style • you can change the font size • The sizes and positions of elements may change when the size of the window is changed

13. Examples of Relative vs. Absolute • www.ynet.co.il (like most newspapers) has an “absolute” design • Is it possible to change the font size? • Is it possible to view more material if you have a wide screen? • www.useit.com has a “relative” design • You can change the size of the fonts • The width of the two columns is adjusted according to the width of the browser window

14. Design Tip • Make your design as “relative” as possible, since • The Web is not WYSIWYG because of the variability in supported platforms • 21-inch monitor • Laptop • Hand-held device • In other words, site designers and page authors should not try to fully control how their pages will be viewed

15. In Particular • Site designers and page authors should not override the the style rules of the client (although it can be done)

16. Different Levels of CSS • W3C has specifications for CSS Level 1, CSS Level 2 and CSS Level 3 • Most recent versions of browsers try to implement CSS Level 2 • Hardly any browser implements CSS Level 2 completely and correctly • You should try your style sheets on different browsers, especially if you use complex features of CSS

17. Design Tip • Design your site so that it will be rendered reasonably well also on browsers that do not support CSS

18. Examples and Resources • Suppose you want to fix your logo on the background – look at an example • W3Schools has many simple examples and a good CSS2 reference • Many tutorials on the Web (e.g., Mulder's Stylesheets Tutorial) • Eric Costello describes layout techniques using CSS and has links to tutorials and other resources on layout techniques

19. CSS Rules

20. Declarations • A declaration consists of a property and one or more values • The property is separated from the values by a colon • property1: value1 • property2: value1 value2 value3 • Slides 5 and 6 list many of (but not all) the properties of CSS • See a list of properties and their possible values in W3Schools

21. Declaration Blocks • A declaration block is a list of zero or more declarations that are separated by semicolons: • A declaration block usually appears inside a pair of { and } • In in-line styles, a declaration block appears inside a pair of double quotes • “declaration block” property1: value1; property2: value1 value2 value3;…

22. Examples • color: red; font-size: 12pt • margin-top: auto; margin-right: 100px; margin-bottom: 10%; margin-left: 5mm • Alternatively, we can set all four margins in one declaration as follows • margin: auto 100px 10% 5mm

23. Inline Styles • In an inline style, the declaration block appears as the value of the attribute style (conforming to XML syntax) <P style=“color: green; font-size: 1.5em; font-style: italic”> This text will be shown in italic green and the size will be 1.5 times the current font size </P>

24. CSS Rules • A rule has the following form selector {declaration block} • The selector determines when the rule is applied • The following rule applies to text that is inside a <P> tag P {color: green; font-size: 1.5em; font-style: italic}

25. Several Kinds of Selectors Selectors can be grouped • Universal Selector • Type Selectors • Descendant Selectors • Child Selectors • Adjacent-Sibling Selectors • Attribute Selectors • Class Selectors • ID Selectors • Pseudo-Class Selectors • Pseudo-Element Selectors

26. Type Selector • A type selector is the name of an element type • A type selector matches every instance of the element type • What will be the color and the size if the font is inside a <P> element which is inside a <DIV> element? P {color: green; font-size: 1.5em; font-style: italic} DIV {color: red; font-size: 16px}

27. Universal Selector • The universal selector matches every element type • The following rule means that all the text will have a size of 40px * {font-size: 40px} • But even that may not work • The following will always work * {font-size: 40px ! important}

28. Class Selectors • The definition of the class <P class="introductoryparagraph"> .... </P> • Style rules for the class • P.introductoryparagraph {color: blue} • applies to P elements with the class name introductorypargraph • .introductoryparagraph {color: blue} • applies to any element with the class name introductoryparagraph

29. Class Selectors (cont’d) • An element may have more than one class, e.g., <P class="green quote new”> • This element matches the following selectors • P.quote.green • P.new • P.quote.new.green • It does not match P.new.old • Few browsers support it

30. ID Selectors • IDs are identical to classes, except that there can only be one element with a given ID in a document • In the HTML (or XML) document: • <BODY id="introduction"> • In the style sheet: • BODY#introduction {font-size: 1.2em} • #introduction {font-size: 1.2em}

31. Attribute Selectors • P[attribute] • matches P when attribute is set to any value • P[title=intro] or P[title="intro"](the quotes are optional) • matches P when its title attribute is set to "intro" • P[class~=green] • matches P when the class attribute is set to "green small", "small green", "green", etc.

32. Pseudo-Classes • The pseudo-classes :link and :visited are used to define styles for links and visited links • :hoveris used to define a style for an element when the mouse is over that element • :focus is used to define a style when the element is ready to accept input • :active is used while an element is being activated by the user (during the time between pressing the mouse button and releasing it or pressing it again in a different place)

33. Examples of Rules for Pseudo-Classes • A:link {color: blue} • A:visited {color: purple} • A:hover {font-size: 1.5em} • A:active {color: red} • INPUT:focus {background-color: yellow} For links, the order of the rules is important From a usability point of view, it is not recommend to change the default colors of :link and :visited

34. More Examples of Pseudo-Classes • Look at the examples in W3Schools

35. The :first-child Pseudo-Class • It is used to denote an element which is the first child of its parent <OL><LI>This is the first child of OL – it is matched by the selector LI:first-child <LI>This is the second child of OL – it is not matched by the above selector</OL>

36. Pseudo-Elements • A pseudo-element selector matches part of an element (whereas a pseudo-class selector matches a complete element) • :first-line and :first-letter match the first line and the first letter of an element, respectively • Examples: • P:first-line {text-transform: capitalize} • P:first-letter {font-size: 48px; color: red}

37. Contextual Selector • P B {color: red} • The above rule is matched by a B element if that element is nested (at any level) inside a P element

38. Grouping of Selectors • The following rule applies to all elements of that match either H1, H2, H3 or P B P B, H1, H2, H3 {font-size: 120%}

39. Example <HTML> <HEAD><TITLE>Formatting style with CSS</TITLE></HEAD> <BODY> <IMG SRC="tomato.gif"> <H1>A joke</H1> <P> A mama tomato, a papa tomato and a baby tomato are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!"). </P> </BODY> </HTML>

41. Adding Style <STYLE type="text/css"> <!-- BODY { background-image: url("tomato1.gif"); background-attachment: fixed } H1 { background-color: rgb(100,150,100); color: rgb(250, 200, 250) } P { background-color: yellow; color: purple; font-size: 200% } --> </STYLE>

43. Another Example

44. <HEAD><TITLE>Some more style examples</TITLE></HEAD> <style TYPE=text/css> <!-- BODY {font-size: 30} P:first-line {color: #ff0000;font-variant: small-caps} --> </style> <BODY> <SPAN style="float: left; font-size: 100px; line-height: 90px; width: 60px">T</SPAN> wo cows were walking together in a field. One turns to the other and says, "hey larry are you worried about getting that mad cow disease?" <P> Larry, in a very odd and wacky voice says, <SPAN style="text-decoration: underline"> "why would I, I'm a chicken?"</SPAN> <SPAN style="text-decoration: line-through"> "why would I, I'm a cow?"</SPAN> </BODY> </HTML>

46. The Sources of Style Sheets

47. Embedded Style Sheets <HTML> <HEAD> <STYLE type="text/css"> <!-- BODY {color: red} --> </STYLE> </HEAD> <BODY> ... </BODY> </HTML> The embedded style sheet appears in the header inside a <STYLE> element. All the text of the style sheet is inside an HTML comment so that browsers that do not support CSS will ignore the text.

48. Inline Styles • Any tag, except the <HTML> tag itself, can have the style attribute • For example, the following will define the color of the paragraph to be green <P style="color: green"> and this is green</P>

49. Imported Style Sheets • The @import rule imports style rules to the beginning of the style sheet • Usage: @import url(nameOfFile.css) • Several import rules may appear at the beginning of the style sheet • Import rules can appear in embedded style sheets or in external style sheets

50. Linked Style Sheets • Links to external style sheets can appear in the header of an HTML page <HTML> <HEAD> <LINK rel="stylesheet" type="text/css” href=“name.css“ media=“print handheld”> </HEAD> <BODY> ... </BODY> </HTML>