Cascading Style Sheets CSS DBI 2003 1 Overview

Cascading Style Sheets (CSS) DBI 2003 1

Overview of CSS 2

Same Page – Different Styles • Look at W 3 C 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 H 1 tag, as defined in modernist. css, is shown on the next slide 3

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

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

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

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 7

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 8

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) 9

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 10

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 11

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 12

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 13

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 14

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

Different Levels of CSS • W 3 C 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 16

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

Examples and Resources • Suppose you want to fix your logo on the background – look at an example • W 3 Schools has many simple examples and a good CSS 2 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 18

CSS Rules 19

Declarations • A declaration consists of a property and one or more values • The property is separated from the values by a colon Øproperty 1: value 1 Øproperty 2: value 1 value 2 value 3 • Slides 5 and 6 list many of (but not all) the properties of CSS • See a list of properties and their possible 20 values in W 3 Schools

Declaration Blocks • A declaration block is a list of zero or more declarations that are separated by semicolons: property 1: value 1; property 2: value 1 value 2 value 3; … • 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” 21

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

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. 5 em; font -style: italic”> This text will be shown in italic green and the size will be 1. 5 times the current font size </P> 23

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. 5 em; font-style: italic} 24

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

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

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

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 28

(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 29

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. 2 em} Ø #introduction {font-size: 1. 2 em} 30

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. 31

Pseudo-Classes • The pseudo-classes : link and : visited are used to define styles for links and visited links • : hover is 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) 32

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

More Examples of Pseudo-Classes • Look at the examples in W 3 Schools 34

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> 35

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: 48 px; color: red} 36

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 37

Grouping of Selectors • The following rule applies to all elements of that match either H 1, H 2, H 3 or P B, H 1, H 2, H 3 {font-size: 120%} 38

Example <HTML> <HEAD><TITLE>Formatting style with CSS</TITLE></HEAD> <BODY> <IMG SRC="tomato. gif"> <H 1>A joke</H 1> <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> 39

40

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

42

Another Example 43

<HEAD><TITLE>Some more style examples</TITLE></HEAD> <style TYPE=text/css> <!-BODY {font-size: 30} P: first-line {color: #ff 0000; font-variant: small-caps} --> </style> <BODY> <SPAN style="float: left; font-size: 100 px; line-height: 90 px; width: 60 px">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> 44 </HTML>

45

The Sources of Style Sheets 46

Embedded Style Sheets <HTML> <HEAD> <STYLE type="text/css"> <!-BODY {color: red} --> </STYLE> </HEAD> <BODY>. . . </BODY> </HTML> 47 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.

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> 48

Imported Style Sheets • The @import rule imports style rules to the beginning of the style sheet • Usage: @import url(name. Of. File. 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 49

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> 50 </HTML>

Inheritance and Cascading 51

Inheritance of Properties • If an element does not match any rule for some given property, then the element inherits the computed value for that property from its parent element 52

Example • Given the rules: ØBODY { font-size: 10 pt{ ØH 1 { font-size: 120%{ • What will be the font size of the EM element? <BODY> <H 1>A <EM>large</EM> heading</H 1> </BODY> 53

Cascading Order • When several rules define the same property and match the same element, then the cascading order is as follows: ØPrimary sort: weight and origin ØSecondary sort: specificity of selectors ØFinal sort: order of appearance • The cascading order determines which rules applies 54

Weight and Origin • Author style sheets override user style sheets • User style sheets override default (browser) style sheets • ! important declaration overrides normal declaration • If both author and user declarations have ! important, the user declarations still override the author declarations (in CSS 2, but not in CSS 1) 55

Specificity of a Selector • Let a be the number of ID attributes in the given selector • Let b be the number of attributes and pseudo-classes in the given selector • Let c be the number of element names in the given selector • Sort the triples (a, b, c) lexicographically) • Pseudo-elements are ignored 56

Example • Consider the two rules ØP {…} Ø. introductory {…} • If an element matches both, then the second rule has a higher specificity and overrides the first 57

Order of Appearance • If two rules have the same weight, origin and specificity, then the one that appears last in the style sheet overrides the others • Rules in imported style sheets are considered to appear before local rules 58