Home / Computers / Internet

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.