SE-2840 Dr. Mark L. Hornick 1 Separating Structure from Presentation: CSS

SE-2840 Dr. Mark L. Hornick 2 Recall: Modern HTML is structural markup Describing only the content of a document, not the appearance How does the browser know how to render any element (e.g. font, size, color)? Appearance is specified via CSS rules, which define presentation styles CSS:Cascading Style Sheets

SE-2840 Dr. Mark L. Hornick 3 CSS is not HTML and is defined by it’s own standards: First proposed in : CSS Level 1 First supported in IE : CSS Level : CSS Level 2.1 (Went from Candidate to Proposed Recommendation as of April 2011 – 7 years as CR!) CSS Level 3 June 2011 – CSS 3 Color Module is now a CR

SE-2840 Dr. Mark L. Hornick 4 CSS style rules can be embedded directly within an HTML document, within a … tag SE2840 /* Embedded CSS style rules go here…. */ /* Note you can’t use HTML comments in this section! */

SE-2840 Dr. Mark L. Hornick 5 CSS rules can be placed in an external.css file and linked to the HTML document: SE2840

SE-2840 Dr. Mark L. Hornick 6 Multiple embedded and external style sheets can be used simultaneously CS422 /* Embedded CSS style rules go here…. */ /* More embedded CSS style rules go here…. */ All styles will be applied, but if any style definitions are repeated, the last one wins.

What if an HTML document contains no embedded rules or to external.css rules? The browser applies its own built-in rules for applying styles to various HTML elements! Different browsers define different default styles If you view an “unstyled” HTML document in different browsers, they will probably look different! SE-2840 Dr. Mark L. Hornick 7

8 CSS has its own syntax/vocabulary CSS expresses style rules selector { property1: value1; property2: value2; /* a CSS-style comment */ propertyN: valueN; } The selector specifies the target element(s) to which the style rule will be applied The properties specify the style parameters that are to be applied body { background-color: white; }

SE-2840 Dr. Mark L. Hornick 9 Selectors can be specified by considering the nested structure of an HTML document body { color: #d2b48c ; } /* applies to all elements and descendants*/ p { color: Red; } /* applies to all elements and descendants*/ h1 strong { color: Navy; } /* applies to all elements within elements (and descendants)*/ p em { color: Teal; }] /* applies to all elements within elements (and descendants)*/ html h1 head body strong p title p em p strong These are called “descendant selectors”

SE-2840 Dr. Mark L. Hornick 10 How do you express a style for an individual element?

SE-2840 Dr. Mark L. Hornick 11 One approach: Style can be embedded within an individual element using the style attribute SE2840 … Almost like the old “font” attribute which mixed presentation into structure. However, this usage is deprecated!

SE-2840 Dr. Mark L. Hornick 12 A second approach uses Element Attributes Elements may often contain attributes which provide additional information about the element’s structure: Syntax: content An attribute‘s value must be enclosed in double quotes Ex: MSOE

SE-2840 Dr. Mark L. Hornick 13 The id attribute Elements may often contain an id attribute: GNU: GNU’s Not Unix No elements may share the same id attribute value within an HTML document (must be unique)

SE-2840 Dr. Mark L. Hornick 14 The id attribute is often used as a target in an element GNU Clicking on this href causes the browser to scroll its window to position the element with the specific attribute

SE-2840 Dr. Mark L. Hornick 15 Using the id attribute for style p#gnudef { color: Maroon; } Used in a style rule, the id attribute forms a specifier that is unique to the individual element possessing the “gnudef” attribute value Since the id is unique, the “p” may be omitted: #gnudef { color: Maroon; } Incidentally, there are many predefined colors

SE-2840 Dr. Mark L. Hornick 16 The class attribute Elements can also contain a class attribute: GNU: GNU’s Not Unix Any number of (different) elements may share the same class attribute value within the same HTML document …

SE-2840 Dr. Mark L. Hornick 17 Using the class attribute for style p.definitions { color: Maroon; } Used like this, the element/class attribute combination forms a specifier that applies to all elements possessing that class value.definitions { color: Maroon; } Used like this, the class attribute forms a specifier that applies to any element possessing that class value

SE-2840 Dr. Mark L. Hornick 18 Combining attributes Elements can contain both id and class attributes: GNU: GNU’s Not Unix ….definitions { font-family: Arial; } p#gnudef { color: Maroon; }

SE-2840 Dr. Mark L. Hornick 19 Elements can belong to more than a single class GNU: GNU’s Not Unix ….definitions { font-family: Arial; }.glossary { text-decoration: underline; } p#gnudef { color: Maroon; }

SE-2840 Dr. Mark L. Hornick 20 essentially allows you to create custom in-line elements HTML: This is Courier text. This is Courier text. CSS: #ex { font-family: “Arial”; color:blue; } #courier {font-family:”Courier”; color:black;} generally must have an id or class attribute to be useful Although you also can use a CSS selector like: p#ex span {font-family:”Courier”; color:black;}

SE-2840 Dr. Mark L. Hornick 21 Media selection in style sheets Replaces the “printer-friendly version” of a web page When using a When using in

SE-2840 Dr. Mark L. Hornick 22 Media selection in a single style sheet Use screen { /* use this rule for monitors*/ body {…} print { /* use this rule for printers */ body {…} img.image1 {display:none;} img.image2 {-webkit-filter: grayscale(1) ;} } Note: other media types are defined; see W3C specs

SE-2840 Dr. Mark L. Hornick 23 Validating Style Sheets “CSS Validator” link on course website

SE-2840 Dr. Mark L. Hornick 24 Pseudoselectors: Pseudoclasses Certain classes are implicit to a group of elements a:link { color: Blue; } a:visited { color: Green; } a:hover { color: Red; } a:active { color: Maroon; }

SE-2840 Dr. Mark L. Hornick 25 Pseudoselectors: Pseudoelements p:first-line { color:red; font-weight:bold;}

SE-2840 Dr. Mark L. Hornick 26 Pseudoelements in tables Another example is the CSS that can be used to specify alternating table row color: tr:nth-child(even) { color: white; } tr:nth-child(odd) { color: green; }

SE-2840 Dr. Mark L. Hornick 27 Cascading Style Sheets: The Cascade …how the browser determines which style to apply to a specific element Style specifications arrive from various sources…

SE-2840 Dr. Mark L. Hornick 28 Style specification sources In order of priority (lowest to highest): User-agent (browser) style sheet Built-in or set via Preferences - browser dependent Reader style sheets IE: part of Internet Options Firefox/Chrome: as plugin/extension Author style sheets Linked external style sheet(s) Imported external style sheet(s) Embedded in element Embedded in elements via style attribute Author/Reader !important style specifications

SE-2840 Dr. Mark L. Hornick 29 Style specification specificity In order of priority: Individual element or pseudo-element selectors p :first-line Dependency selectors p em Class selectors p.warning.warning ID selectors p#scarytext

SE-2840 Dr. Mark L. Hornick 30 Resolving conflicts when multiple rules within the same group target the same element 000 A 3-digit specificity number Does the selector include an id? One point for each id. Does the selector include a class or pseudo- class? One point each Does the selector include any element names? One point each

SE-2840 Dr. Mark L. Hornick 31 The highest number wins 000 h1=001 h1.bluetext=011 body h1=002 h1#topmost=101 Does the selector include an id? One point for each id. Does the selector include a class or pseudo- class? One point each Does the selector include any element names? One point each