Cascading Style Sheets: CSS Jay Urbain, Ph.D. Credits and references: see last page. 1
HTML 5 is structural markup • Describing only the content & structure 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 2
CSS – Cascading Style Sheets • CSS is a language that describes the style of an HTML document. • CSS describes how HTML elements should be displayed. • Example: body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; }
CSS – Cascading Style Sheets The selector points to the HTML element body { you want to style. background-color: lightblue; } The declaration block contains one or more declarations separated by semicolons. h1 { color: white; Each declaration includes a CSS property text-align: center; name and a value, separated by a colon. } p { A CSS declaration always ends with a font-family: verdana; semicolon, and declaration blocks are font-size: 20px; surrounded by curly braces. }
CSS style rules can be embedded directly within an HTML document with <style>…</style> tags <!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> 5
CSS rules can be placed in an external *.css file and linked to the HTML document: link – element to “link” external information. rel=”stylesheet” – relationship between the HTML file <!doctype html> and what we are linking to <html> href – URL specifying the stylesheet location type=”text/css” – the type of this information. <head> As of HTML5, you do not need this anymore. <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> 6
Multiple embedded and external style sheets can be used simultaneously <!doctype html > <html> All styles will be applied, but if <head> any style definitions are repeated, <meta … /> <title>SE2840</title> the last one wins. <style> /* Embedded CSS style rules go here…. */ </style> <style> /* More embedded CSS style rules go here…. */ </style> <!-- Import the CSS rules from external .css files: --> <link rel=“stylesheet” href=“stylesheet1.css” /> <link rel=“stylesheet” href=“stylesheet2.css” /> </head> <body> <!-- HTML structural content goes here --> </body> </html> 7
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 may look somewhat different. file:///Users/jayurbain/Dropbox/workspaceRDF/ctakes/ctakes-smoking-status- res/src/main/resources/org/apache/ctakes/smokingstatus/analysis_engine/ArtificialSentenceAnnotator.xml file:///Users/jayurbain/Dropbox/MSOE/www/se2840/SE-2840%20Daily%20Detailed%20Outcomes.html Show different browsers 8
CSS has its own syntax/vocabulary • CSS style rules: selector { property1: value1; property2: value2; /* a CSS-style comment */ propertyN: valueN; } • selector specifies the target element(s) to which the style rule will be applied. • property specifies the style parameters that are to be applied. Example: body { background-color: #d2b48c; } 9
Selectors can be specified by considering the nested structure of an HTML document body { color: Black; } html /* applies to all <body> elements and descendants*/ body head p { color: Red; } /* applies to all <p> elements and descendants*/ h1 p p p title h1 strong { color: Navy; } /* applies to all <strong> elements within <h1> elements strong (and descendants)*/ em em em p em { color: Teal; } /* applies to all <em> elements strong within <p> elements (and descendants)*/ These are called “descendant selectors” 10
Style can be embedded within an individual element using the style attribute <!doctype html> <html> <head> <meta … /> <title>SE2840</title> Almost like the old “font” attribute </head> which mixed presentation into structure. <body> <p style=“color:red; font-family: Arial”>…</p> </body> </html> 11
The id attribute #gnudefn { color: Red; } Elements can also be assigned an id attribute: <p id=“gnudef”> GNU: GNU’s Not Unix </p> • No elements may share the same id attribute value within an HTML document (must be unique). 12
The id attribute can be 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 the position of the element with the specific attribute. 13
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. Incidentally, there are 17 predefined colors • Since the id is unique, the “p” may be omitted: #gnudef { color: Maroon; } 14
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> 15
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 16
Combining attributes Elements can contain both id and class attributes: .definitions { font-family: Arial; } #gnudef { color: Maroon; } … <p id=“gnudef” class=“definitions”> GNU: GNU’s Not Unix </p> 17
Elements can belong to more than a single class .definitions { font-family: Arial; } .glossary { text-decoration: underline; } #gnudef { color: Maroon; } … <p id=“gnudefn” class=“definitions glossary”> GNU: GNU’s Not Unix </p> 18
Media selection in style sheets Replaces the “printer-friendly version” of a web page. • When using a <link> <link rel="stylesheet" href=“screenstyle.css” media=“screen"/> <link rel="stylesheet" href=“printstyle.css” media=“print"/> • When using <style> in <head> <style media=“screen” > <style media=“print” > 19
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.imageclass {display:none;} } Note: other media types are defined; see W3C specs 20
Validating Style Sheets “CSS Validator” link on course website • http://jigsaw.w3.org/css-validator/ 21
Pseudoselectors : Pseudoclasses Certain classes imply a group of elements a:link { color: Blue; } a:visited { color: Green; } a:hover { color: Red; } a:active { color: Maroon; } Show Menu 22
Cascading Style Sheets: The Cascade • …how the browser determines which style to apply to a specific element • Style specifications arrive from various sources… 23
Style specification sources • The order in which styles are read by the browser matters. • In CSS, specificity counts towards the "Cascade" too. In order of ascending priority: • User-agent (browser) style sheet – Built-in or set via Preferences - browser dependent • Reader style sheets – IE: part of Internet Options – Firefox plugin extension: https://addons.mozilla.org/en- US/firefox/addon/2108/ • Author style sheets #example p { color: blue !important; } – Linked external style sheet(s) ... #example p { color: red; } – Inline <style> element <head> 24
Style specification specificity In order of ascending priority: • Individual element or pseudo-element selectors – p • Dependency selectors – p em • Class selectors – p.warning – .warning • ID selectors – p#scarytext 25
Resolving conflicts when multiple rules within the same group target the same element A 3-digit specificity number 000 Does the selector Does the Does the include an id? selector selector One point for include any include a class each id. element or pseudo- names? One class? One point each point each 26
Recommend
More recommend
