300 likes | 413 Views
Separating Structure from Presentation: CSS. 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)?
E N D
Separating Structure from Presentation: CSS SE-2840Dr. Mark L. Hornick
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
CSS is not HTML and is defined by it’s own standards: • First proposed in 1994 • 1996: CSS Level 1 • First supported in IE 3 • 1998: CSS Level 2 • 2011: 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
CSS style rules can be embedded directly within an HTML document, within a <style>…</style> tag <!doctype html> <html> <head> <meta … /> <title>SE2840</title> <style type="text/css"> /* Embedded CSS style rules go here…. */ /* Note you can’t use HTML comments in this section! */ </style> </head> <body> <!-- HTML structural content goes here --> </body> </html> SE-2840 Dr. Mark L. Hornick
CSS rules can be placed in an external .css file and linked to the HTML document: <!doctype html> <html> <head> <meta … /> <title>SE2840</title> <!-- Import the CSS rules from an external .css file: --> <link rel=“stylesheet” href=“stylesheet.css” type=“text/css”/> </head> <body> <!-- HTML structural content goes here --> </body> </html> SE-2840 Dr. Mark L. Hornick
Multiple embedded and external style sheets can be used simultaneously <!doctype html > <html> <head> <meta … /> <title>CS422</title> <style type=“text/css”> /* Embedded CSS style rules go here…. */ </style> <style type=“text/css”> /* More embedded CSS style rules go here…. */ </style> <!-- Import the CSS rules from external .css files: --> <link rel=“stylesheet” href=“stylesheet1.css” type=“text/css”/> <link rel=“stylesheet” href=“stylesheet2.css” type=“text/css”/> </head> <body> <!-- HTML structural content goes here --> </body> </html> All styles will be applied, but if any style definitions are repeated, the last one wins. SE-2840 Dr. Mark L. Hornick
What if an HTML document contains no embedded <style> rules or <link> 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
CSS has its own syntax/vocabulary • CSS expresses style rules selector{ property1: value1;property2: value2; /* a CSS-style comment */propertyN: valueN; } • The selectorspecifies 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
Selectors can be specified by considering the nested structure of an HTML document body { color: #d2b48c; }/* applies to all <body> elements and descendants*/ p { color: Red; }/* applies to all <p> elements and descendants*/ h1 strong { color: Navy; }/* applies to all <strong> elements within <h1> elements (and descendants)*/ p em { color: Teal; }] /* applies to all <em> elements within <p> elements (and descendants)*/ html body head h1 p p p title strong em em em strong These are called “descendant selectors” SE-2840 Dr. Mark L. Hornick
How do you express a style for an individual element? SE-2840 Dr. Mark L. Hornick
One approach: Style can be embedded within an individual element using the style attribute <!doctype html> <html> <head> <meta … /> <title>SE2840</title> </head> <body> <p style=“color:red; font-family: Arial”>…</p> </body> </html> Almost like the old “font” attribute which mixed presentation into structure. This usage is deprecated in XHTML 1.1 SE-2840 Dr. Mark L. Hornick
A second approach usesElement Attributes Elements may often contain attributes which provide additional information about the element’s structure: • Syntax: <tag attribute=“value”> content </tag> <tag attribute=“value” /> • An attribute‘s value must be enclosed in double quotes • Ex: <ahref=“http://www.msoe.edu”> MSOE </a> SE-2840 Dr. Mark L. Hornick
The id attribute Elements may often contain an id attribute: <pid=“gnudefn”> GNU: GNU’s Not Unix </p> • No elements may share the same id attribute value within an HTML document(must be unique) SE-2840 Dr. Mark L. Hornick
The id attribute is often used as a target in an <a> element <a href=“#gnudefn”>GNU</a> • 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
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 <p> 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
The class attribute Elements can also contain a class attribute: <pclass=“definitions”> GNU: GNU’s Not Unix </p> • Any number of (different) elements may share the same class attribute value within the same HTML document <h2 class=“definitions”>…</h2> SE-2840 Dr. Mark L. Hornick
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 <p> 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
Combining attributes Elements can contain both id and class attributes: <p id=“gnudefn” class=“definitions”> GNU: GNU’s Not Unix </p> … .definitions { font-family: Arial; } p#gnudef { color: Maroon; } SE-2840 Dr. Mark L. Hornick
Elements can belong to more than a single class <p id=“gnudefn” class=“definitions glossary”> GNU: GNU’s Not Unix </p> … .definitions { font-family: Arial; } .glossary { text-decoration: underline; } p#gnudef { color: Maroon; } SE-2840 Dr. Mark L. Hornick
Media selection in style sheets Replaces the “printer-friendly version” of a web page • When using a <link> <link rel="stylesheet" href=“screenstyle.css" type="text/css" media=“screen"/> <link rel="stylesheet" href=“printstyle.css" type="text/css" media=“print"/> • When using <style> in <head> <style type="text/css“ media=“screen” > <style type="text/css“ media=“print” > SE-2840 Dr. Mark L. Hornick
Media selection in a single style sheet Use the @media rule: @media screen { /* use this rule for monitors*/ body {…} } @media 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
Validating Style Sheets • http://jigsaw.w3.org/css-validator/ • “CSS Validator” link on course website SE-2840 Dr. Mark L. Hornick
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
Pseudoselectors:Pseudoelements p:first-line {color:red;font-weight:bold;} SE-2840 Dr. Mark L. Hornick
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
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
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 <style> element <head> • Embedded in elements via style attribute • Author/Reader !important style specifications SE-2840 Dr. Mark L. Hornick
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
Resolving conflicts when multiple rules within the same group target the same element A 3-digit specificity number 000 Does the selector include an id? One point for each id. Does the selector include any element names? One point each Does the selector include a class or pseudo-class? One point each SE-2840 Dr. Mark L. Hornick
The highest number wins Does the selector include a class or pseudo-class? One point each Does the selector include an id? One point for each id. Does the selector include any element names? One point each 000 h1=001h1.bluetext=011body h1=002h1#topmost=101 SE-2840 Dr. Mark L. Hornick