Class 5 Notes for XML

Learning Objectives:

You will be able to create a CSS file for XML document

Homework:

Read the CSS Tutorials for the basics of CSS from W3schools.

Read: Displaying XML for how CSS works with XML

Note: You will need to use the display: block for most of your XML Elements to display properly

Create a CSS for your  XML Resume & XML Address book

To add a style sheet, CSS or XSL, you need to declare which style sheet you are going to use at the beginning of the document. The syntax is as follows

<?xml-stylesheet type="text/css" href="cssfile.css" ?>

CSS give you the ability to customize your tags (or Elements). The syntax is

selector {property: value} or element-name {property: value}

Examples:

H2 {color:red}
or Channel {font-size:2em}

 

Note: Unlike HTML, XML has no block tags so you will need to use
the display:block; or display:inline-block; frequently!

Add a CSS to your Address and Resume XML files so they look like a web page and post on your webspace so you can link it to your homework page..

Topics Covered:

You will need to use the display: block for most of your XML Elements

Cascading Style Sheets (CSS) for XML documents:

CSS helps make XML readable for humans. Straight XML can be very hard to read.

Examples of CSS used with HTML (A Very Good Reference is located at W3Schools )

CSS Mozilla Developers Tutorials and CSS3 Demo are great examples of CSS in action.

 

Practice: We will go over your work next week in class

Create a CSS file for this XML document:

Create a CSS file for this more Complex XML Document

Create a CSS for use with this NBA File and XML File.

 

Terms:

CSS, CSS3, Display, Block tags