1 / 26

4.1 CSS - Cascading Style Sheets

4.1 CSS - Cascading Style Sheets. Main ideas and essential features as a preliminary for XSL What is it? Use and status Processing model Rules, selectors, generated content Usability in practise. CSS - Cascading Style Sheets. Main usage:

patrick-leach
Download Presentation

4.1 CSS - Cascading Style Sheets

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. 4.1 CSS - Cascading Style Sheets • Main ideas and essential features • as a preliminary for XSL • What is it? • Use and status • Processing model • Rules, selectors, generated content • Usability in practise Notes 4.1: CSS

  2. CSS - Cascading Style Sheets • Main usage: • to specify the representation of web pages by attaching style (fonts, colours, margins, …) to HTML/XML documents • also used to specify a "WYSIWYG" presentation in some commercial XML editors, e.g., • SofQuad XMetal (of Corel; Windows) • Morphon (of Morphon Technologies; Java) Notes 4.1: CSS

  3. W3C CSS Recommendations • Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999) • basic features, from the point of view of HTML • Level 2 (CSS2), May 1998 • different media types • paged media (for printing), • aural style sheets (for speech synthesis) • extended selection mechanism • generated content, automatic numbering • formatting of tables, … • Level 3 (CSS3) • ongoing work; split in May 2001 into 26 modules Notes 4.1: CSS

  4. CSS Style Sheets • Style sheet is a set of style rules • Style rule syntax:selector { declarations } • selector locates elements affected by the rule • declarations syntax:prop1:val1; … ; propn:valn • sets values for style properties • CSS1 defines about 50 properties, CSS2 about 120 Notes 4.1: CSS

  5. CSS Style Rules • Example rulesH1 {color: blue}/* blue text for first-level HTML headers */H1,H2,H3 {font-style:bold;}/* Alternative selectors grouped together: *//* bold font for all HTML headers */ CODE {font-family: monospace; color: red } Notes 4.1: CSS

  6. normal/italic/oblique helvetica/serif/… normal/bold/bolder/ ... sub/super/... left/right/center/justify CSS1 Properties (1/2) • Font properties: font, (-family/-style/-variant/-weight/-size) • Color and background properties: color; background (-color/-image/-repeat/-attachement/-position) • Text properties: word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent, line-height Notes 4.1: CSS

  7. decimal/lower-alpha/disk/... inside/outside CSS1 Properties (2/2) • Box properties: • for controlling size, margins, borders etc. of “boxes” (see later) • Classification properties: display (values:block | inline | list-item | none), white-space (values:normal | pre | nowrap), list-style, (-type/-image/-position) Notes 4.1: CSS

  8. Attaching CSS Style to HTML • Four ways:1. with aLINK element; 2. with aSTYLEelement in document HEAD; 3. by animportmechanism; 4. in aSTYLEattribute <HTML><HEAD><TITLE>A sample page</TITLE><LINK REL="STYLESHEET" TYPE="text/css" HREF="my_style.css" ><STYLE TYPE="text/css">@importurl(http://style.com/basic); H1 { color: blue } </STYLE></HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green">but this is green. </BODY></HTML> Notes 4.1: CSS

  9. Attaching CSS Style ... • W3C Rec for linking styles to XML:<?xml-stylesheet href="example.css" type="text/css" ?> • Rules from different sources merged together • including browser defaults and user preferences • Problems of ”cascading” • author: blue background + user: blue text -> ? • Should author have control of style? What if visually disabled user needs large font size? • Should user have control of style? What if readability depends on detailed size and placement of text? Notes 4.1: CSS

  10. CSS Processing Model (simplified) 0. Parse the document into a tree 1. Match style rules to elements of the tree • annotate each element with a value assigned for each relevant property • inheritance and, in case of competing rules, elaborate "cascade" rules applied to select which value is assigned 2. Generate a formatting structure of the annotated document tree • consists of nested rectangular boxes 3. Render the formatting structure • display, print, speak, ... Notes 4.1: CSS

  11. Inheritance (1/2) • Most properties are inherited by subelements • can be overridden • can be modified (e.g. increase indent, set font size to 150% of current) • Some non-inherited properties: • background properties • by default shine through the boxes of decendants • padding, marginand border properties • but they effect the placement of sub-elements(See CSS Box Model a bit later) Notes 4.1: CSS

  12. Inheritance (2/2) • Consider document fragment<chap><title>… </title> <section> … </section></chap> • and ruleschap { font-size: 12pt; font-family: serif } title { font-size: 150% } • Now both title and section will be formatted using a serif font, but title with a 50% larger font size Notes 4.1: CSS

  13. CSS Box Model • Transcription maps document elements into nested rectangular boxes, which have • a core content area • optional surrounding margin, border and padding areas • controlled by corresponding propertiesmargin, borderand padding,and widthandheight(last two most useful for scaling images) Notes 4.1: CSS

  14. Dimensional properties of boxes ____________________________________| margin (transparent) || _______________________________ || | border | || | __________________________ | || | | padding | | || | | _____________________ | | || | | | content | | | || | | |_____________________| | | || | |__________________________| | || |_______________________________| ||____________________________________|| content width || box width | Notes 4.1: CSS

  15. CSS1 Properties (2/2) • Box properties:width, height, float, clear;margin, (-top/-right/-bottom/-left);padding, (-top/-right/-bottom/-left);border-width, (-top-/-right-/-bottom-/-left-);border-color, border-style;border, (-top/-right/-bottom/-left); Notes 4.1: CSS

  16. maximum of vertically overlapping margins Boxes: Example Notes 4.1: CSS

  17. Main types of elements • Inline elements (display:inline) • default; can occur on the same line with other elements; e.g., EM in HTML • Block-level • formatted as boxes separated by line breaks • default formatting of, e.g., P,H1,H2in HTML • specified by display:block • display:list-item ->block preceded by list-item marker • Element suppression: display:none Notes 4.1: CSS

  18. CSS Selectors: Simple • Application of style rules determined by matching selectors to elements of the document tree • Element type name, e.g. P or H1 • matches any instance of the element type • CSS2 adds • a universal selector * matching any element • tests for attributes:fig[file="fig1.jpg"]: figure with given value for attribute file*[file="fig1.jpg"]: any element with that value for attribute filefig[file]: element fig with attribute file Notes 4.1: CSS

  19. CSS Selectors: Contextual • Element inclusion by listing simple selectors for ancestors • e.g: items in ordered lists in paragraphs:P OL LI { … } • CSS2 adds • direct inclusion: Parent > Child • conditions on siblings:E + A: element A preceded by an element satisfying selector EB:first-child: B as the first element child Notes 4.1: CSS

  20. Examples of CSS2 Selectors • Don’t indent a P immediately following MATH: MATH + P { text-indent: 0 } • Reduce vertical space btw an H1 and an H2 immediately following it: H1 + H2 { margin-top: -5mm } • Don’t indent the first P of a DIV: DIV > P:first-child { text-indent: 0 } Notes 4.1: CSS

  21. Example: • Number theorems within each chapter • Precede each theorem by "Theorem" and its number • Follow the theorem by a little box Counters and generated content • CSS1 restricted to adorning elements with assigned style properties + automatic numbering of list items on a single level • CSS2 adds insertion of generated content before and after selected elements Notes 4.1: CSS

  22. Generated content: Example • Style rules for the task:chapter { counter-reset: theorCntr }theorem:before { content: "Theorem " counter(theorCntr) ". "; counter-increment: theorCntr; font-weight: bold; }theorem:after { content: url("box.gif"); float: right} Notes 4.1: CSS

  23. Inserting attribute values • Also possible to include attribute values of the selected element in generated content using attr(Name) • ExampleInsert value of attribute ALT before images: IMG:before { content: attr(ALT) } Notes 4.1: CSS

  24. Limitations of CSS • Limited transcription capabilities • limited transposition of elements (float:left/right) • calls of parameterised formatting tasks the major transcription type supported • In CSS1 context specification limited: • no sibling or parent/child relationships • limited use of attributes (CSS1: only class) • CSS2 more powerful, but • no access to element’s children or content • unable to access targets of cross references Notes 4.1: CSS

  25. Limitations of CSS • Non-programmable • no decision structures • unable to store calculated quantities • non-extensible • > relatively simple • Western-language orientation (left-to-right) • XSL allows unrestricted transformations of the document to precede a CSS-like formatting Notes 4.1: CSS

  26. Browser Implementations • CSS support in major browsers is rather discouraging(See, e.g., http://www.ddj.com/webreview/style/) • > full CSS not usable on the Internet • (Almost) complete implementations of CSS1 • Netscape Navigator 6 • implements also most of CSS2 selectors • MS Internet Explorer 5 on Macintosh(!) • MS policy of developing own extensions, instead of completing conformance with recommendations strongly criticised Notes 4.1: CSS

More Related