cssNotes-1 - XML and CSS The Missing Link l After...

Info iconThis preview shows pages 1–4. Sign up to view the full content.

View Full Document Right Arrow Icon
XML and CSS An Introduction The Missing Link l After completing your external style sheet , you must then LINK the style sheet to your XML document. l This is done by adding a reference to the style sheet using the XML stylesheet specification PI ( <?xml-stylesheet?> ) . <?xml -stylesheet type="mime-type" href="URI"?> Specification Order l The <?xml-stylesheet?> processing instruction (declaration) must be placed after your <?xml?> processing instruction and before the root element and any comments within <?xml version="1.0" encoding="UTF-8"?> <?xml -stylesheet type=" mime-type " href =" URI "?> <!-- Author: Marie Taylor-Harper --> < root -element > <!-- XML document --> </ root-element > An Example. . <?xml version="1.0" encoding="UTF-8"?> <?xml -stylesheet type="text/css" href="club_db.css"?> <club-database> <association id="SCVWA"> <club id="H23"> <!-- club related elements --> </club> </association> </club-database> This may be a relative or absolute URI! CSS Types of Selectors Style Sheet Rules l The syntax for a simple style sheet rule is as selector { property1 : value1; property2 : value2; } l Note that selectors can be much more complex as we will find out soon J HINT: This format is easy to READ!
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Types of Selectors l The selectors within CSS can be generally divided into two subcategories: § Attribute Selectors § Contextual Selectors Attribute Selectors l Attribute selectors allow us to customize our documents based upon the attributes and their associated values contained within our elements. element[attribute] l This attribute selector matches any element which contains the “ attribute ” attribute regardless of the value the “ attribute possesses. An Example. . planet[atmosphere] { /* properties and values go here */ } <planet atmosphere="value">…</planet> <planet/> element[attribute="value"] l This attribute selector matches any element which contains an “ ” attribute that has the value “ value ”. An Example. . planet[atmosphere="breathable"] { /* properties and values go here */ } <planet atmosphere="breathable">. ..</planet> <planet/>
Background image of page 2
element[attribute~="value"] l This attribute selector matches any element which contains an “ attribute ” attribute that possesses multiple values separated by whitespace but has one value “ value ”. An Example. . planet[atmosphere~="breathable"] { /* properties and values go here */ } <planet atmosphere="breathable sweet">. ..</planet> <planet atmosphere="stinky breathable">. ..</planet> <planet atmosphere="hot sweet muggy">. ..</planet> element[attribute|="value"] l This attribute selector matches any element ” attribute that possesses a list of values separated by hyphens but starts with “ ”. An Example. . planet[atmosphere|="breathable"] { /* properties and values go here */ } <planet atmosphere="hot -sweet-muggy">. ..</planet> element[attribute1="value1"][attribute2="value2"] l This attribute selector matches any element attribute1 ” attribute that has the value “ value1 ” AND contains an attribute2 ” attribute that has the value value2 ” .
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Image of page 4
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 09/01/2010 for the course IT itp taught by Professor Nitin during the Spring '10 term at Vlerick Leuven Gent Management School.

Page1 / 27

cssNotes-1 - XML and CSS The Missing Link l After...

This preview shows document pages 1 - 4. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online