1 / 19

Technologies for an Information Age: . opennet Cascading Style Sheets

Technologies for an Information Age: . opennet Cascading Style Sheets. Computer Science, Informatics, Physics Indiana University Bloomington IN 47404 gcf@indiana.edu. Fall Semester 2001 MW 5:00 pm - 6:20 pm CENTRAL (not Indiana) Time Bryan Carpenter and Geoffrey Fox

jessezinn
Download Presentation

Technologies for an Information Age: . opennet 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. Technologies for an Information Age:.opennetCascading Style Sheets Computer Science, Informatics, Physics Indiana University Bloomington IN 47404 gcf@indiana.edu Fall Semester 2001 MW 5:00 pm - 6:20 pm CENTRAL (not Indiana) Time Bryan Carpenter and Geoffrey Fox PTLIU Laboratory for Community Grids

  2. Cascading Style Sheets • In a following lecture we will be discussing the Extensible Style Language, XSL. • XSL incorporates a general framework for converting an XML file to another format, in particular one suitable for displaying in a Web browser. • Cascading Style Sheets (CSS) is an older specification that provides an alternative, simpler, approach to displaying XML in a browser. • CSS is less general than XSL. • It was designed as a way to control the display of HTML documents, but it can also be used with other SGML-based languages, including XML.

  3. Basic Concepts • The structure of a CSS style sheet is very much simpler than an XSLT style sheet—it is just a plain list of rules. • A rule consists of a selector—typically a tag name, perhaps with some qualifiers—and a list of declarations that apply to elements matching the selector. • A declaration is just a property-value pair. • For example the declaration color: blue sets the text color to blue in the selected elements. • Style sheets cascade in the sense that if more than one style sheet is in effect for a document (this is regarded as the normal situation), declarations from some sheets may cascade through declarations in other sheets, conditional on some conflict resolution rules. • This can be thought of as a kind of inheritance.

  4. Example • Here is an XML source file that uses a CSS style sheet: <?xml-stylesheet type="text/css" href="emptable.css" version="1.0"?> <EMPLOYEE> <PERSON> <EMPNO>100</EMPNO> <ENAME>JAMES </ENAME> <JOB>PRESIDENT</JOB> </PERSON> <PERSON> <EMPNO>201</EMPNO> <ENAME>KELLY </ENAME> <JOB>CLERK</JOB> </PERSON> . . . </EMPLOYEE>

  5. Style Sheet emptable.csswith Display PERSON {display : block} EMPNO {color : red} ENAME {color : blue ; font-weight : bold} JOB {color : green ; font-style : italic}

  6. Remarks • The example style sheet has four rules. • The selectors are just element names. • The declaration display : blockcauses the PERSON element to be treated as a block—it starts and ends with a new line. • By default the other elements are inline. • The declarations for these elements specify color, font-weight, and font-style properties for the enclosed text, in an obvious way.

  7. CSS1 vs CSS2 • W3C distinguishes two separate specifications: CSS level 1 and CSS level 2. • Level 1 is a subset of Level 2. • Level 2 adds media-specific style sheets that can support different kinds of display technology: • Visual browsers, Aural devices, Handheld devices, etc. • Level 2 also adds interesting features like content positioning, table layout, and so on. • CSS1 specification is about 70 pages long. CSS2 is 300+ pages long. • Neither specification is fully supported by any browser, but Netscape 6 probably comes closest.

  8. Basics • An example rule taken from the CSS1 specification: H1 { color : blue } • This rule contains a selector “H1” and a single declaration: “color : blue”. • The declaration sets the property “color” to the value “blue”. • CSS1 defines about 50 properties. • The selector links the style sheet rules to elements in the source file. Any element name is a valid selector. • In this example we are specifying properties for level 1 headers. • Any user agent (i.e. Web browser) is considered to have a default style sheet. • Properties need only be specified for elements where the author wishes to override the default values.

  9. Linking HTML to Style Sheet Rules • In XML, one uses the xml-stylesheetprocessing instruction to specify a style sheet for a document. • In plain HTML there are several approaches. Here is an example taken from the CSS1 specification: <HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=“text/css” HREF=“http://style.com/cool” TITLE=“Cool”> <STYLE TYPE=“text/css”> @import url(http://style.com/basic) ; H1 { color : blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=“color:green”>While the paragraph is green.</P> </BODY> </HTML>

  10. Remarks • link element with STLYSHEET relation to main document. • style element in HTML head element gives style declarations for whole document. In particular you may include a style file here. • Note however that style.com is the actually the online home of Vogue, and doesn’t have cool or basic CSS documents  • style attribute on individual element of document.

  11. Grouping • To give identical declarations for a group of selectors, a rule may start with a comma-separated group of selectors: H1, H2, H3 { font-family: helvetica } • This sets the same font for headers at all levels. • Several declarations applying to the same selector can be grouped, separated by semicolons: H1 {font-weight: bold font-size: 12pt ; font-height: 14pt ; font-family: helvetica} • Certain properties group together, e.g. there is a font property whose value is a fixed-order list of font-related properties: H1 {font: bold 12pt/14pt helvetica} • by definition, equivalent to the preceding example.

  12. Inheritance • Suppose the style rule: H1 { color : blue } is in effect. • In this example: <H1>The headline <EM>is</EM> important</H1> the EM element inherits the color attribute from its parent element, although no color declaration has been given for EM. • Many properties may be inherited in this way. • Thus one can set a default property for the whole document by giving a rule for the BODY element.

  13. Contextual Selectors • If we specifically want EM elements inside H1 elements to turn a different color, we can use a contextual selector: H1 EM {color: red} • The juxtaposed list of selectors “H1EM” means: this declaration applies only to EM elements immediately nested inside H1 elements. • Behaves something like an Xpath selection, as we will see in later lecture on XLST. • Although not immediately relevant to XML, here is a useful style sheet using contextual selectors: OL LI {list-style: upper-roman} OL LI LI {list-style: upper-alpha} OL LI LI LI {list-style: decimal}

  14. HTML lists with contextual selectors

  15. Pseudo-elements • In CSS1 there are two kinds of pseudo elements: first-line and first-letter. • These keywords can be attached to selectors as qualifiers, separated by a colon. • Example: P:first-line {font-variant: small-caps} P:first-letter {color: red}

  16. Classes • Selectors in CSS style sheets can also be based on the value of an attribute called CLASS. • For this to work, the elements in the source document must be annotated with this attribute. • In the CSS rule, the class is attached as a qualifier to the (otherwise possibly empty) selector, separated by period. H1.PASTORAL {color: green} .RED {color: red} • The rules might be exploited as follows <h1 CLASS="PASTORAL">6th Symphony</h1> <p> First movement. <p CLASS="RED"> Second movement. <p> Other movements.

  17. Miscellaneous Properties • The display property controls, in particular, whether an element is displayed as a standalone block, or as an inline element in the ordinary flow of text. • There are may properties that control text style and layout. These properties include: • float Describes how text should flow around an element. • font-family The font face • font-size • font-weight • line-height • text-align Can be left, right, center, justify • text-decoration Can be underline, etc. • vertical-align Supports subscripts, superscripts, etc.

  18. Miscellaneous Properties • Setting colors and backgrounds: • color • background-color • background-image A URL • background-attachment Does background scroll? • Margins and alignments • line-height Sets any value • margin-right, margin-left, . . . • text-indent Of first line of block elements. • Borders • border-style May be dotted, dashed, solid, etc.

  19. References • Inside XML, Chapter 9: “Cascading Style Sheets”. • “Cascading Style Sheets, level 1”, http://www.w3.org/TR/REC-CSS1 • “Cascading Style Sheets, level 2”, http://www.w3.org/TR/REC-CSS2

More Related