COIN78 - XML Lesson 5: Using CSS with XML
Cascading Style Sheets
- HTML and CSS
CSS (Cascading Style Sheets) are nothing new. We have used CSS to enhance
the presentation of HTML. In this example we have extended the <p> tag
to display all text inside of it in red (#FF0000). Please note the use of
<style> tag to contain the CSS rules.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>XML Week 5 - CSS making text red</title>
<style type="text/css">
p { color: #FF0000; }
</style>
</head>
<body>
<p>This text is displayed with <p> tag only!</p>
</body>
</html>
- MORE CSS
CSS, can extend almost all of the HTML elements. Here the <h1> tag has
been extended.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>XML Week 5 - More CSS</title>
<style type="text/css">
p { color: #FF0000; }
h1 { padding: 5px;
border: 2px solid #FF0000;
color: #FFFFFF;
background-color: #000000;
width: 155px; } </style>
</head>
<body>
<h1>HEADING</h1>
<p>This text is displayed with <p> tag only.</p> </body>
</html>
XML + CSS
- STYLE elements
We have seen how HTML elements are able to be extended by using the CSS, but
what about XML elements? Unfortunately, there is no <style> tag for
a xml document, so how would we be able to define style? The solution is to
use the Processing Instruction (PI) to tell the IE5 parser to use CSS to display
the XML document. In this example we have illustrated the use of the color,
and background-color to display the XML data. Please note if we had not placed
this information on the XML document, IE5 would have displayed the elements
and the data. Please note, to view the CSS click
here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file, in this case greeting.css.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="greeting.css"?>
<greeting>Hello</greeting>The following are the contents of greeting.css.
greeting
{ display:inline; color:#C00; background-color:#000; font-size:xx-large; padding-top: 100px; }When rendered this is what you see:
- display
There was a property in the above CSS that we did not talk about. "display"
is a property that can be assigned the following values: "inline", "block",
and "none". In this example we have used two inline definitions to illustrate
what inline means. Please note, to view the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css2.css"?>
<student>
<first_name>James</first_name>
<last_name>Smith</last_name>
</student>The following are the contents of the CSS file.
first_name { display:inline; color:#999; } last_name { display:inline; }When rendered this is what you see:
- block Now,
we have repeated the same example as above, but instead we have defined "first_name",
and "last_name" as "block" level elements. Please note, to view the CSS click
here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css3.css"?>
<student>
<first_name>James</first_name>
<last_name>Smith</last_name>
</student>The following are the contents of the CSS file.
first_name { display:block; color:#999; } last_name { display:block; }When rendered this is what you see:
- none Just
to be complete we have now set the display value for "first_name", and "last_name"
to "none". If you can not see anything, it means it works! Please note, to
view the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css4.css"?>
<student>
<first_name>James</first_name>
<last_name>Smith</last_name>
</student>The following are the contents of the CSS file.
first_name { display:none; color:#999; } last_name { display:none; }When rendered this is what you see. Notice, that since display was set to none there is nothing shown:
Here are the files used in this example:
Creating Tabular Display
- Cells We
like to display our data in a tabular format. The first thing we like to do
is to create cells of data. This is nothing more than setting the display
to inline and giving it a grey background (#CCCCCC). Please note, to view
the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css5.css"?>
<student>
<first_name>James</first_name>
<last_name>Smith</last_name>
</student>The following are the contents of the CSS file.
first_name { display:inline; background-color: #CCCCCC; } last_name { display:inline; background-color: #CCCCCC; }When rendered this is what you see. Notice, that the background color of both the first and last name are grey (#CCCCCC) and since the display is set to inline they are next to each other.
- More Cells
Adding another column only involves adding another tag and defining the style
rules for it. Please note, to view the CSS click
here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css6.css"?>
<student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id>
</student>The following are the contents of the CSS file.
first_name { display:inline; background-color: #CCCCCC; } last_name { display:inline; background-color: #CCCCCC; } id { display:inline; background-color: #CCCCCC; }When rendered this is what you see. Notice, that there is a new column where the ID is displayed.
- Creating Rows
We did not have to do anything to define a row this far. However, as you can
see adding more "student" does not create a new row.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css6.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id>
</student> <student>
<first_name>Mathew</first_name>
<last_name>Chow</last_name> <id>13725</id>
</student> </students>The following are the contents of the CSS file.
first_name { display:inline; background-color: #CCCCCC; } last_name { display:inline; background-color: #CCCCCC; } id { display:inline; background-color: #CCCCCC; }When rendered this is what you see. Notice, that the second student is placed next to the first one and is not in a new row.
- block + inline
To create a pseudo row we have made "student" and inline tag and as a result
every student will be on a new line and effectively creating a new row. Please
note, to view the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css8.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id>
</student> <student>
<first_name>Mathew</first_name>
<last_name>Chow</last_name> <id>13725</id>
</student> </students>The following are the contents of the CSS file.
first_name { display:inline; background-color: #CCCCCC; } last_name { display:inline; background-color: #CCCCCC; } id { display:inline; background-color: #CCCCCC; } student { display:block; background-color: #000000; }When rendered this is what you see. Notice, that the second student is now in a new row because display is set to block.
- Adding Margins
As, you may have noticed we can create more separation in the rows by setting
the margin property of "student" to "5px". Please note, to view the CSS
click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css9.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id>
</student> <student>
<first_name>Mathew</first_name>
<last_name>Chow</last_name> <id>13725</id>
</student> </students>The following are the contents of the CSS file.
first_name { display:inline; background-color: #CCCCCC; } last_name { display:inline; background-color: #CCCCCC; } id { display:inline; background-color: #CCCCCC; } student { display:block; margin:5px; background-color: #000000; }When rendered this is what you see. Notice, that since the margin is set to 5 pixels the 'rows' no longer abut and the background color is visible, white in this case.
- Setting the
Width I am sure you have not been too happy about the fact that the width
of the row, is wider than is needed. To solve that we have assigned a desired
width in pixels to the "width" property of the student tag. Please note, to
view the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css10.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id>
</student> <student>
<first_name>Mathew</first_name>
<last_name>Chow</last_name> <id>13725</id>
</student> </students>The following are the contents of the CSS file.
first_name { display:inline; background-color: #CCCCCC; } last_name { display:inline; background-color: #CCCCCC; } id { display:inline; background-color: #CCCCCC; } student { display:block; margin: 5px; width: 300px; background-color: #000000; }When rendered this is what you see. Notice, that since the width of the black rows is 300 pixels wide.
- Setting the
Column Width I am sure by now you are asking if we can do the same thing
as we did above to the column width. To do that simply set the width property
of "first_name", "last_name" and "id" to the desired width. By the way, try
reducing the width of the row. If you are used to HTML, where attribute setting
were nothing more than just a suggestion, you are then in for a pleasant surprise.
Please note, to view the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css11.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id>
</student> <student>
<first_name>Bob</first_name>
<last_name>Clark</last_name> <id>34567</id>
</student> <student>
<first_name>Tony</first_name>
<last_name>Cole</last_name> <id>73456</id>
</student> </students>The following are the contents of the CSS file. In this case the first_name, last_name, and id all have the same style so they are combined into one. To set the width and not force a carriage return the display must be set to inline-block. Padding is added to add some space around the text and text is aligned to be centered. The background of student is set to black. Where first_name, last_name, and id do not abut each other black shows through. By setting the padding of student the black lines representing the 'rows' and 'columns' are created. Display must be set to block for student because this is what creates the new row.
first_name, last_name, id { display:inline-block; width: 100px; padding: 2px; text-align: center; background-color: #CCCCCC; } student { display:block; width: 322px; padding: 2px; background-color: #000000; }When rendered this is what you see.
Here are the files used in this example:
- css5.xml, css5.css
- css6.xml, css6.css
- css7.xml
- css8.xml, css8.css
- css9.xml, css9.css
- css10.xml, css10.css
- css11.xml, css11.css
More with Table Emulation
- Nesting
Going back to our last weeks example, we have added the homework information
for the students. As you can see we have placed all the "homework"s inside
the "homeworks" tag. In our style sheet we have defined "homeworks as yet
another block-level tag in order to create a new row. The
result of this setting is the raw display of all the data within all the elements
inside "homeworks". Please note, to view the CSS click
here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css13.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id> <homeworks> <homework> <number>1</number> <score>10</score> </homework> <homework> <number>2</number> <score>8</score> </homework> <homework> <number>3</number> <score>9</score> </homework> </homeworks>
</student> </students>The following are the contents of the CSS file. In this case the first_name, last_name, and id all have the same style so they are combined into one. To set the width and not force a carriage return the display must be set to inline-block. Padding is added to add some space around the text and text is aligned to be centered. Homeworks display is set to block so that they may be shown on a new line.
first_name, last_name, id { display:inline-block; margin-right: -4px; text-align: center; width: 100px; padding: 3px; background-color: #EFEFEF; vertical-align:top; } homeworks { display:block; background-color: #CCCCFF; } student { display:inline-block; margin-left: 5px; width: 318px; padding: 2px; background-color: #0000CC; } students { display:block; width: 300px; background-color: #3B3C3F; }When rendered this is what you see.
- Nesting More
To increase the resolution by which we try to separate data, we have defined
the rules for the "homework" tag. After looking at the style definition in
detail you might be asking yourselves "how come 'homework' are in separate
line, when they are only a inline-level tag" It's because by definition the
width of "homeworks" only allows for one "homework", other homeworks are automatically
wrapped to the next line. Please note, to view the CSS
click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css14.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id> <homeworks> <homework> <number>1</number> <score>10</score> </homework> <homework> <number>2</number> <score>8</score> </homework> <homework> <number>3</number> <score>9</score> </homework> </homeworks>
</student> </students>The following are the contents of the CSS file. We added homework and set it's display to block so that each number and score are placed on a new line.
first_name, last_name, id { display:inline-block; margin-right: -4px; text-align: center; width: 100px; padding: 3px; background-color: #EFEFEF; vertical-align:top; } homework { display:block; background-color: #4D67CF; } homeworks { display:block; background-color: #CCCCFF; } student { display:inline-block; margin-left: 5px; width: 318px; padding: 2px; background-color: #0000CC; } students { display:block; width: 300px; background-color: #3B3C3F; }When rendered this is what you see.
- Creating Cells
Finally, we have added "number", and "score" as inline-level elements. The result
of this addition is the visual separation of these data within their rows.
Please note, to view the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="css16.css"?>
<students> <student>
<first_name>James</first_name>
<last_name>Smith</last_name> <id>12345</id> <homeworks> <homework> <number>1</number> <score>10</score> </homework> <homework> <number>2</number> <score>8</score> </homework> <homework> <number>3</number> <score>9</score> </homework> </homeworks>
</student> </students>The following are the contents of the CSS file. We added number and score and set their display to inline-block so that number and score are in the same row. The margin is set so that there is a 1 pixel distance between them which allows the blue color from the homework block to show through.
first_name, last_name, id { display:inline-block; margin-right: -4px; text-align: center; width: 100px; padding: 3px; background-color: #EFEFEF; vertical-align:top; } number, score { display:inline-block; width: 48px; margin-right: -3px; text-align: center; background-color: #CFCFCF; } homework { display:block; background-color: #4D67CF; } homeworks { display:block; background-color: #CCCCFF; } student { display:inline-block; margin-left: 5px; width: 318px; padding: 2px; background-color: #0000CC; } students { display:block; width: 300px; background-color: #3B3C3F; }When rendered this is what you see.
- Adding More
Students This is just to illustrate the effects of adding more students
to the XML document. Please note, this example uses the same CSS as above.
To view the CSS click here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file.
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="css16.css"?> <students> <student> <first_name>James</first_name> <last_name>Smith</last_name> <id>12345</id> <homeworks> <homework> <number>1</number> <score>10</score> </homework> <homework> <number>2</number> <score>8</score> </homework> <homework> <number>3</number> <score>9</score> </homework> </homeworks> </student> <student> <first_name>Bob</first_name> <last_name>Clark</last_name> <id>34567</id> <homeworks> <homework> <number>1</number> <score>6</score> </homework> <homework> <number>2</number> <score>9</score> </homework> <homework> <number>3</number> <score>7</score> </homework> <homework> <number>4</number> <score>5</score> </homework> </homeworks> </student> <student> <first_name>Tony</first_name> <last_name>Cole</last_name> <id>73456</id> <homeworks> <homework> <number>1</number> <score>8</score> </homework> <homework> <number>2</number> <score>4</score> </homework> <homework> <number>3</number> <score>10</score> </homework> <homework> <number>4</number> <score>10</score> </homework> <homework> <number>5</number> <score>6</score> </homework> <homework> <number>6</number> <score>8</score> </homework> </homeworks> </student> <student> <first_name>Mike</first_name> <last_name>Shen</last_name> <id>43433</id> <homeworks> <homework> <number>1</number> <score>3</score> </homework> <homework> <number>2</number> <score>5</score> </homework> <homework> <number>3</number> <score>9</score> </homework> </homeworks> </student> <student> <first_name>Jennifer</first_name> <last_name>Davidson</last_name> <id>56353</id> <homeworks> <homework> <number>1</number> <score>8</score> </homework> <homework> <number>2</number> <score>4</score> </homework> <homework> <number>3</number> <score>5</score> </homework> </homeworks> </student> <student> <first_name>Mathew</first_name> <last_name>Bone</last_name> <id>76544</id> <homeworks> <homework> <number>1</number> <score>7</score> </homework> <homework> <number>2</number> <score>4</score> </homework> <homework> <number>3</number> <score>6</score> </homework> </homeworks> </student> </students>When rendered this is what you see.
- To finish up our example we are going to add a title to the table which will contain information about the class. We can easily change the look of the table just by changing the style sheet which really demonstrates the power of separating the content from the view. Please note, to view the CSS click
here.
The XML file contains the Processing Instruction, xml-stylesheet, which points to the CSS file. This XML file contains the same information as the one in the previous example with the addition of class_info.
<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="css19.css"?> <students> <class_info> <class_name>COIN 1000</class_name> <quarter>Spring</quarter> <year>2009</year> </class_info> . . . </students>The following are the contents of the CSS file.
class_info { display:inline-block; font-size: 20pt; margin: 5px 0 0 5px; padding: 10px; width: 298px; background-color: #1739BF; } class_name { display:inline-block; color: #FFFFFF; width: 50%; } year, quarter { display:inline-block; color: #FFFFFF; width: 22%; } first_name, last_name, id { display:inline-block; margin-right: -4px; text-align: center; width: 100px; padding: 3px; background-color: #EFEFEF; vertical-align:top; } number, score { display:inline-block; width: 48px; margin-right: -3px; text-align: center; background-color: #CFCFCF; } homework { display:block; background-color: #4D67CF; } homeworks { display:block; background-color: #CCCCFF; } student { display:inline-block; margin-left: 5px; width: 318px; background-color: #0000CC; } students { display:block; width: 300px; background-color: #3B3C3F; }When rendered this is what you see.
Here are the files used in this example:
- css13.xml, css13.css
- css14.xml, css14.css
- css16.xml, css16.css
- css17.xml, css17.css
- css19.xml, css19.css
Image Display and Hyper Text Links
In order that XML be able to render HTML tags like <img>, <a>, <table>, etc. it is necessary to include the following statement in your XML file:
<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type ="text/css" href="filename.css"?>
<root_element xmlns:html="http://www.w3.org/1999/xhtml">
With this included, we can use the HTML commands using the following syntax:
<html:tag....>value</html:tag>
<link>
<html:a href="http://www.whatever.com/index.html" target="new">link_name</html:a>
</link>
The address book has been modified to include hypertext links. Look at address_book_css_link.xml and address_book_link.css.
<website>
<html:a href="http://www.whatever.com" target="new">www.whatever.com</html:a>
</website>
<email_address>
<html:a href="mailto:user@whatever.com">user@whatever.com</html:a>
</email_address>
An example of a file with a clickable image using the code below can be seen here with the corresponding CSS file. This example uses HTML tables for the layout and uses the construct:
<pic> <html:img src="images/filename.gif" width="200"height="200"></html:img> </pic>
Below is a snippet of the XML file that displays a list of books and information associated with them in an HTML table. By including the html namespace this allows the information to be shown in a browser. What is highlighed in blue are the HTML tags that are associated with the html namespace. After the first book only the HTML tags associated with the table are highlighted.
<?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/css" href="XMLBooks.css"?> <catalog xmlns:html="http://www.w3.org/1999/xhtml"> <html:h2>XML Books</html:h2> <html:table> <html:tr> <book> <html:td> <cover> <html:a href="http://www.amazon.com/exec/obidos/ISBN=007212220X/"> <html:img src="images/elements_style.jpg" /> </html:a> </cover> </html:td> <html:td> <author>Simon St.Laurent</author> <html:br /> <title> <html:a href="http://www.amazon.com/exec/obidos/ISBN=007212220X/"> XML Elements of Style</html:a> </title> <html:br /> <pubyear>2000</pubyear> <publisher>McGraw-Hill</publisher> <html:br /> <isbn>0-07-212220-X</isbn> <html:br /> <price>$29.99</price> </html:td> </book> </html:tr> <html:tr> <book> <html:td> <cover> <html:a href="http://www.amazon.com/exec/obidos/ISBN=0764532367/"> <html:img src="images/XML_Bible.jpg" /> </html:a> </cover> </html:td> <html:td> <author>Elliotte Rusty Harold</author> <html:br /> <title> <html:a href="http://www.amazon.com/exec/obidos/ISBN=0764532367/"> XML Bible</html:a> </title> <html:br /> <pubyear>1999</pubyear> <publisher>IDG Books</publisher> <html:br /> <isbn>0764532367</isbn> <html:br /> <price>$49.99</price> </html:td> </book> </html:tr> <html:tr> <book> <html:td> <cover> <html:a href="http://www.amazon.com/exec/obidos/isbn=0596000405/"> <html:img src="images/javaServlet.jpg" /> </html:a> </cover> </html:td> <html:td> <author>Jason Hunter, William Crawford</author> <html:br /> <title> <html:a href="http://www.amazon.com/exec/obidos/isbn=0596000405/"> Java Servlet Programming</html:a> </title> <html:br /> <pubyear>1999</pubyear> <publisher>O'Reilly and Associates</publisher> <html:br /> <isbn>0596000405</isbn> <html:br /> <price>$35.96</price> </html:td> </book> </html:tr> <html:tr> <book> <html:td> <cover> <html:a href="http://www.amazon.com/exec/obidos/isbn=0130125075/"> <html:img src="images/JDietel.jpg" /> </html:a> </cover> </html:td> <html:td> <author>Paul J. Deitel, Harvey M. Deitel</author> <html:br /> <title> <html:a href="http://www.amazon.com/exec/obidos/isbn=0130125075/"> Java How to Program</html:a> </title> <html:br /> <pubyear>1999</pubyear> <publisher>Prentice Hall</publisher> <html:br /> <isbn>0130125075</isbn> <html:br /> <price>$70.00</price> </html:td> </book> </html:tr> <html:tr> <book> <html:td> <cover> <html:a href="http://www.amazon.com/exec/obidos/isbn=0764533428/"> <html:img src="images/Jscript.jpg" /> </html:a> </cover> </html:td> <html:td> <author>Danny Goodman</author> <html:br /> <title> <html:a href="http://www.amazon.com/exec/obidos/isbn=0764533428/"> Javascript Bible</html:a> </title> <html:br /> <pubyear>2001</pubyear> <publisher>Hungry Minds, Inc</publisher> <html:br /> <isbn>0764533428</isbn> <html:br /> <price>$39.99</price> </html:td> </book> </html:tr> </html:table> </catalog>
This CSS file is used for styling the XML. Notice that the display property is not used. The table took care of the layout.
catalog { margin-left: 20px; font-size: 12pt; font-family: arial, serif; } h2 { font-size: 20pt; margin-left: 50px; } td { vertical-align: top; padding:10px; } author { font-weight: bold; } title { font-family: verdana, impact; color: green; font-size: 14pt; } isbn { font-size: 9pt; } price { color:red; }
When rendered this is a part of what you see.
Here are the files used in this example:
Separate Presentation from Data
In the previous example html was used to create a table in the xml file. This mixes the presentation, html, with the data, xml, which defeats the purpose of xml. A better way to do this is to move all of the presentation into the css file. Instead of using tables, the display property and floats can be used to create a comparable layout. The following example uses css to control the layout and html is used in the xml file to create hyper links and define images.
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="flowers.css"?> <flowers xmlns:html="http://www.w3.org/1999/xhtml"> <flower> <names> <family>Malvaceae</family> <genus>Fremontodendron</genus> <species>californicum</species> <common_name>Flannel Bush</common_name> </names> <photo> <html:img src="images/fremontodendron.jpg" width="200" height="150" />Flannel Bush</photo <description> <location>Southwestern United States</location> <type>shrub</type> <flower_color>Yellow</flower_color> <leaves>Leathery and fuzzy texture</leaves> <notes>Hairs and young shoots can cause skin irritation</notes> <drought_tolerant>Yes</drought_tolerant> </description> <reference> <html:a href="http://en.wikipedia.org/wiki/Fremontodendron" title="Fremontodendron">References</html:a> </reference </flower> . . . </flowers>
The following is the css that is used as the stylesheet. The names and photo elements use the display property set to block, float, and a width which is set in order for the float to work. Note that you can use the content property combined with the pseudo class before or after to define labels which means that you do not have to use elements in your xml for labels. This is another example of separating the presentation from the data.
flowers {
background-color: #f6f6f6;
margin: 2em 10em 0 10em;
border-left: 3px solid #d8dace;
padding: .8em;
font-family: "Century Gothic", Geneva, sans-serif;
font-size: 1.0em;
min-width: 400px;
max-width: 625px;
padding-top: 20px;
text-align:center;
}
flowers:before { content: "Flowers"; font-size:1.2em; }
flower {
display: block;
margin-top: 1.2em;
padding-bottom: .5em;
border-bottom: 1px solid #900;
font-size: .80em;
}
names {
display:block;
width: 400px;
float:left;
text-align:left;
margin-bottom: 20px;
}
family, genus, species, common_name {
display:block;
margin:0;
font-weight: normal;
margin-bottom:.5em;
}
family:before { content:"Family: "; font-weight: bold; }
genus:before { content:"Genus: "; font-weight: bold; }
species:before { content:"Species: "; font-weight: bold; }
common_name:before { content:"Common Name: "; font-weight: bold; }
photo {
display:block;
width: 200px;
float:right;
}
img {
border:black thin solid;
}
description {
display:block;
text-align: left;
margin-top: 1.2em;
width:400px;
}
location, type, flower_color, leaves, notes, drought_tolerant {
display:block;
margin-bottom:.5em;
}
location:before { content:"Habitat: "; font-weight: bold; }
type:before { content:"Type: "; font-weight: bold; }
flower_color:before { content:"Flower: "; font-weight: bold; }
leaves:before { content:"Leaves: "; font-weight: bold; }
notes:before { content:"Notes: "; font-weight: bold; }
drought_tolerant:before { content:"Drought Tolerant: "; font-weight: bold; }
reference {
display: block;
width: 150px;
padding-bottom:3px;
background-color: #99f;
}
Here is a snapshot of what it looks like rendered in the browser:
Here are the files used in this example:
More Examples
I have created some *very* simple files; formatting_html.xml, formatting_css.xml and formatting.css (and metaman.jpg) They render images and links, and show how to add a background color to a rendered page, and the use of link rendering to preserve original link color. Use these files, and in particular, the link and image code, to add links and images to your XML project!
Here is another example of a CD collection created by fellow student, Thom Walker. CD_collection_nested.css and CD_Collection_nested_css.xml.
Using ID or Class to Render an Image
- You can also use id or class to render an image in CSS, but it is a bit clunky. In the CSS document, create declarations that will point to a given image file using id:
img {width: pixels; height:
pixels; border: 1 solid black}
#image_1 {background: url(image_1.jpg) no-repeat}
#image_2 {background: url(image_2.jpg) no-repeat}
#image_3 {background: url(image_3.jpg) no-repeat}
#image_4 {background: url(image_4.jpg) no-repeat}
#image_5 {background: url(image_5.jpg) no-repeat}
In the XML document, your code surrounding the image files would look like this:
<img id="image_1"/>
<img id="image_2"/>
<img id="image_3"/>
<img id="image_4"/>
<img id="image_5"/>
CSS Tutorials
If you are really interested in a broad overview of CSS, including fonts, text, and precision layout of images, please follow the links below.
- CSS Tutorial: Step by step from echoecho.com
- Zen Garden: For a lesson in beauty and CSS
- W3Schools Tutorial: Basic step by step tutorial
Homework
Display the address book or the file which you had created for week two. Use images and links if possible (see both example projects linked below as well as student projects. Email the file to me as a separate attachment. If you are using images in your rendering with css, please put them in an image folder and zip the entire archive. This assignment is due at the end of week four.
An example of the address_book_css.xml and address_book.css files may help you get a head start. The address book has been modified to include hypertext links. Look at address_book_css_link.xml and address_book_link.css. Also see addressbook_elegant.xml and addressbook_elegant.css
Acknowledgements
Special thanks to:
- Loi Tran produced the Black and White Photo Album project
- Franziska Walker created the Windsurf Spots project which contains both images and links
- Thom Walker created the CD Collection
- Giuliano Costantini for inspiring the flowers example
You may download each of these archives.
Links to XML Related Sites
Copyright © 2009 - 2010 Robert D. Cormia - July 28, 2010