MYOML: Building Blocks

: Building Blocks

One of the main ideas behind creating a custom XML format is to allow you to cleanly separate content from presentation. This article will demonstrate why separating the two is a good thing, and also show how to create containers to hold your content.

There are two main building blocks that we'll be using to create our custom markup language. The first is the CSS "class" concept. The section is the use of the HTML tags <div> and <span>.

CSS Classes

In the previous article, we saw that, given a stylesheet like this:

body {
    background: #black;
}
table {
    background: #blue;
}

The user's browser (if it supports CSS) will display all <body> sections with a black background, and all <table> sections with a blue background.

If you were to use this stylesheet, then all of the tables in your HTML document would have the same formatting. Usually that's not what you want. Using CSS classes allows different classes of elements (like tables) to have different styles. Here is an example stylesheet that defines two different <td> classes:

test1.css - Defining two TD classes

body {
    background: black;
}

table {
    background: white;
}

/* the class name is "one" */
td.one {
    background: yellow;
    color: black;
}

td.two {
    background: green;
    color: white;
}

To make use of these, all you have to do is add the class=".." attribute to the <td> tags. Here is an HTML document that uses these to make a checkerboard pattern:

test1.html - Making a checkerboard pattern

<html>
<head>
    <!-- set stylesheet -->
    <link href="test1.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <table>
        <tr>
        
            <td class="one">One</td>
            <td class="Two">Two</td>
            <td class="one">One</td>
            <td class="Two">Two</td>
        
        </tr>
    
        <tr>
        
            <td class="Two">Two</td>
            <td class="one">One</td>
            <td class="Two">Two</td>
            <td class="one">One</td>
        
        </tr>
    
    </table>

</body>
</html>

You can view the result here.

The HTML <div> and <span> tags provide generic containers you can use to organize your document into any sort of hierarchy you like. Here is a brief example:

Document structured with <div> and <span>

<html>
<body>

    <div class="Outer">
        Hello. Here is my outer DIV container.
        <p/>
        This is so exciting I can't stand it.
        
        <div class="Inner">
            Here is an inner DIV container.
            <p/>

            And <span class="Inner"> here is a span</span> inside the DIV.        
        </div>
        
        <div class="Inner">
            Here is a second inner DIV.            
            <p/>            
            Without CSS, there is no visual difference between these containers.            
        </div>
        
    </div>
    
</body>
</html>

Without CSS, this results in a completely boring page, as you can see here.

Boring, huh? But wait! Lets make a stylesheet for this document and see what happens.

Stylesheet to make boring page better

body {
    background: #005500;
}

div.Outer {
    background: #ffffff;
    margin: 20px;
    padding: 20px;
    border: 3px solid black;
}

div.Inner {
    background: #221166;
    margin: 20px;
    padding: 10px;
    border: 3px solid red;
    color: white;
}

/* It's legal to use the same class name ("Inner") for two different
   types of tags (i.e. div.Inner and span.Inner) -- there is no 
   confusion since they are different tags. */
span.Inner {
    background: #00ff00;
    color: black;
    padding: 5px;
}

The only change we have to make to our HTML document is to add this at the top:

<head>
    <!-- set stylesheet -->
    <link href="test3.css" rel="stylesheet" type="text/css" />
</head>

Now view the result.

It looks like a completely different document, yet all we did was to apply a style to the content. The point here is that it is better to separate the content (structure) of your document from the presentation (CSS), because you then have the flexibility to redefine the presentation without changing the content.

WARNING

It is possible to use the id= attribute instead of the class= attribute to define different styles. Most browsers support this, but I recommend using class= instead. The id= attribute is really meant for scripts to use. If you stick with class= you'll be glad you did if you ever need to do some DHTML things with your page.

A subtle point: I used the <p/> tag to separate paragraphs instead of the <p> form commonly found in HTML. The reason for this is that XSLT is XML based and so all tags have to be proper XML. Because of this, I've gotten into the habit of using the correct XML-style tags even when writing HTML. It's a good habit to get into since our markup language will be XML based, and using tags like <p> will cause an error.