cssNotes-1 (1)

cssNotes-1 (1) - XML and CSS An Introduction The Missing...

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

View Full Document Right Arrow Icon
XML and CSS An Introduction
Background image of page 1

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

View Full DocumentRight Arrow Icon
The Missing Link After After completing your completing your external style sheet external style sheet , , you must then LINK the style sheet to your you must then LINK the style sheet to your XML document. XML document. 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"?>
Background image of page 2
Specification Order The <?xml-stylesheet?> processing instruction (declaration) must be placed after your <?xml?> processing instruction and before the root element and any comments within your document: <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type=" mime-type " href=" URI "?> <!-- Author: Marie Taylor-Harper --> < root-element > <!-- XML document --> </ root-element >
Background image of page 3

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

View Full DocumentRight Arrow Icon
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!
Background image of page 4
CSS Types of Selectors
Background image of page 5

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

View Full DocumentRight Arrow Icon
Style Sheet Rules The syntax for a simple style sheet rule is as follows: selector { property1 : value1; property2 : value2; } Note that selectors can be much more complex as we will find out soon HINT: This format is easy to READ!
Background image of page 6
Types of Selectors The selectors within CSS can be generally The selectors within CSS can be generally divided into divided into two two subcategories: subcategories: Attribute Selectors Contextual Selectors
Background image of page 7

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

View Full DocumentRight Arrow Icon
Attribute Selectors Attribute Attribute selectors allow us to customize our selectors allow us to customize our documents based upon the attributes and their documents based upon the attributes and their associated values contained within our associated values contained within our elements. elements.
Background image of page 8
element[attribute] This attribute selector matches any element which contains the “ attribute ” attribute regardless of the value the “ attribute attribute possesses.
Background image of page 9

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

View Full DocumentRight Arrow Icon
An Example. . planet[atmosphere] { /* properties and values go here */ } <planet atmosphere="value">…</planet> <planet/>
Background image of page 10
element[attribute="value"] This attribute selector matches any element which contains an “ attribute ” attribute that has the value “ value ”.
Background image of page 11

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

View Full DocumentRight Arrow Icon
An Example. . planet[atmosphere="breathable"] { /* properties and values go here */ } <planet atmosphere="breathable">. ..</planet> <planet atmosphere="poisonous">. ..</planet> <planet/>
Background image of page 12
element[attribute~="value"] This attribute selector matches any element which contains an “ attribute ” attribute that possesses multiple values separated by whitespace but has one value “ value ”.
Background image of page 13

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

View Full DocumentRight Arrow Icon
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>
Background image of page 14
element[attribute|="value"] This attribute selector matches any element which contains an “ attribute ” attribute that possesses a list of values separated by hyphens but starts with “ value ”.
Background image of page 15

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

View Full DocumentRight Arrow Icon
An Example. .
Background image of page 16
Image of page 17
This is the end of the preview. Sign up to access the rest of the document.

Page1 / 159

cssNotes-1 (1) - XML and CSS An Introduction The Missing...

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

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