1 / 30

Separating Structure from Presentation: CSS

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

rudyard-mathis
Download Presentation

Separating Structure from Presentation: CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Separating Structure from Presentation: CSS SE-2840Dr. 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. SE-2840 Dr. Mark L. Hornick

  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 will probably look different! 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 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

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

  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. This usage is deprecated in XHTML 1.1 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: <ahref=“http://www.msoe.edu”> MSOE </a> SE-2840 Dr. Mark L. Hornick

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

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

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

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

  22. Validating Style Sheets • http://jigsaw.w3.org/css-validator/ • “CSS Validator” link on course website SE-2840 Dr. Mark L. Hornick

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

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

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

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

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

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

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

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

More Related