separating structure from presentation: css
DESCRIPTION
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)? - PowerPoint PPT PresentationTRANSCRIPT
SE-2840Dr. 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 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
4
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
5
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
6
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.
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
7
SE-2840 Dr. Mark L. Hornick
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 documentbody { 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
h1
headbody
strong
p
title
p
em
p
em
em
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
<!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.However, this usage is deprecated!
SE-2840 Dr. Mark L. Hornick
12
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: <a href=“http://www.msoe.edu”> MSOE </a>
SE-2840 Dr. Mark L. Hornick
13
The id attribute
Elements may often contain an id attribute:
<p id=“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
14
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
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 <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
16
The class attribute
Elements can also contain a class attribute:
<p class=“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
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 <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
18
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
19
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
20
<span> essentially allows you to create custom in-line elements
HTML: <p id=“ex”>This is <span id=“courier”>Courier</span> text.</p>
This is Courier text.
CSS:#ex { font-family: “Arial”; color:blue; }#courier {font-family:”Courier”; color:black;}
<span> 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 <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
22
Media selection in a single style sheetUse 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
23
Validating Style Sheets
http://jigsaw.w3.org/css-validator/ “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 sourcesIn 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
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
000A 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=001h1.bluetext=011body h1=002h1#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