Section 3: XML Styles
What are Cascading Style Sheets?
Remember earlier when you referenced an XML processor, and sent the browser looking for a file called cats.css? The “css” part of the file that it was looking for indicated that it was what is known as a Cascading Style Sheet, which is a special type of file used in XML and some other markup languages to tell the browser how it should position and lay out the information that it has. In other words, it’s a sheet the browser uses to figure out the style of the layout. (What about the cascading part, you might ask? Well, the different parts of the layout can overlap.)
Cascading Style Sheets (henceforth known as CSS) can be used to define a number of important items on the page… they can tell the browser what color a portion of text should be, where the section should be located, and any special instructions that the browser should follow when displaying any particular piece of data. While it’s true that all of that information could be coded onto the page itself, the use of a style sheet means that multiple pages with the same elements or layout can all reference the same file. This means that you don’t have to have all the same information on each and every page… something that saves on both loading time and coding time.
One of the best things about CSS is the fact that they can be used by a multitude of languages, not just XML. You can create a CSS file that’s used to define how certain elements are formatted in an XML document, and then turn around and use it in a DHTML document (assuming that it doesn’t contain any information that DHTML isn’t able to use.)
Of course, CSS does have drawbacks… after all, it’s ability to be used in conjunction with less-advanced coding languages means that it’s not as advanced as XML and some of its other formats are. CSS uses data as it encounters it in the document, and isn’t as adaptable as some other languages when dealing with XML. It is fairly common and has support in multiple browsers, however… and as long as you code with care, many of the drawbacks of using CSS can be easily avoided.
How is CSS used in XML?
CSS has many uses in XML. It can be used to define tags, to position elements within the document, and even to format and align characters and objects within the document.
As an example, let�s refer back to the cats.xml file. As mentioned previously, there needs to be a file called cats.css to make the formatting work correctly, since it�s in that file that the various tags are actually defined. Within cats.css you could make the tag display everything in red, the tag display everything in blue, and both tags place their contents somewhere else in the page. On top of that, you can create additional formatting instructions for the root element.
Of course, CSS can be used for a lot more than simply coloring the contents of tags. You can use CSS to create layers, making some information visible and others hidden. You can also create objects that can be moved on the page, or that can be hidden so that others are revealed. CSS allows for a wide variety of formats and effects, and can be a very powerful tool once you learn how best to use it.
So how do I use CSS in XML?
The first thing that you need to do is to place the reference in your XML file so that it will know it�s looking for a CSS file. Open up cats.xml, and you�ll see the following line:
This tells your document that it�s looking for a stylesheet for instructions, that the stylesheet in question is written in CSS, and that it�s name is cats.css. Not wanting to disappoint the file, go ahead and open up a blank editor page and save it as cats.css. It�s time to finish up cats.xml once and for all.
Since your CSS file is being referenced from another file, you don�t have to make all of the declarations that you did at the beginning of your XML file. You can think of CSS as a way to write a lot of instructions for the pages without having to place them on every single page� just let them know where the information is, they�ll find what they need and leave the rest behind.
What you�ll need to do in cats.css is to define the elements that were used in cats.xml. As you might recall, there were a total of 3 elements used: , the root element, with and as elements within it. Since is your root, it needs to be defined first with the others inside of it.
On your first line, go ahead and type the name of your root element (just the name, without any additional marks), like so:
cats_info
Now, to let the browser know that it�s being defined, you should go to the very next line and place a single wavy bracket (the symbol above the bracket on the keyboard, that looks like { instead of [.) Nothing else is needed on this line, because the lines that follow are going to all be contained in the definition of <cats_info>.
To define <cats_info>, you�ll need to decide what effect you want it to have on the overall document. Let�s say that you want to use block script in blue letters for anything that�s not inside another element. You can define that by typing the following, on a line after the wavy bracket:
display: block;
color: blue;
Close the element with another wavy bracket, and make sure that you notice the semicolons at the end of each line. The majority of coding mistakes in CSS are a result of either forgetting wavy brackets or leaving off a semicolon (both of which can cause the code to not work.)
Alright, so your page should look a little something like this by now:
cats_info
{
display: block;
color: blue;
}
Note the use of white space and indention to make the page more easily readable. Just make sure that white space is used to separate elements and information, and isn�t used within the definition itself.
It�s time to and , using this same method. This time, though, instead of using both the �display� and �color� listings, we�re just going to change the color. After all, as long as the elements are contained within , they�ll already be in block!
For >, use red as the color, and use black as the color for . If formatted correctly, then your document should look something like this:
cats_info
{
display: block;
color: blue;
}
cats
{
color: red;
}
friends
{
color: black;
}
Now everything will appear in the colors that you want. Unfortunately, there�s still a lot of formatting that could be done� but it will involve changing cats.xml in addition to the CSS file, and these are only example documents designed to show you what the code itself looks like. If you wish, you can go in later and adjust the coding on both files� for now, however, go ahead and save the changes to cats.css and get ready to move on to something a little different.
