Rainbow Quill

CSS

Stylesheet Basics

One of the goals of XHTML is to improve on the structure of HTML documents. And one of these improvements was to separate the data from the layout & design. That is why XHTML has deprecated tags like font, b, i and u. This gave way to the XHTML attribute style where you can use special syntax to provide styles. The format used by the style attribute is actually the one used by Cascading Stylesheets (CSS). Another way of adding styles is by adding a style tag with CSS code inside within the head tag of the XHTML document. But the recommended way is by linking the XHTML document to an external CSS document.

This is the modified XHTML document from Starting an XHTML Page ⇒:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
   <link rel="stylesheet" href="../css/my_first_page.css" type="text/css" media="screen" />
   <title>Basic XHTML 1.1 Structure</title>
</head>

<body>
   <h1>Basic XHTML 1.1 Structure</h1>
   <p class="notice">This is just a sample XHTML 1.1 document.</p>
   <p>Another paragraph goes here.</p>
   <p id="footer">This is a sample footer.</p>
</body>

</html>

As you can see, I added a link tag inside the head tag. Which states that we are going to link/relate (rel) a stylesheet to the current XHTML page. The href attribute defines the absolute/relative (relative in this case) path to the CSS file. The type attribute defines the MIME type of the CSS document which is text/css. The media attribute is used for different rendering modes. screen means that this stylesheet will be used when the page is viewed on a screen. Other values for the media attribute are print or all. I’ve also added 2 more p tags and set some id and class attributes.

CSS is composed of selector blocks. And within a selector block, different properties can be set. This is an example of a CSS file:

body {
   background: #123e5d;
   color: #ffffff;
   font-family: "Tahoma", sans-serif;
}

h1 {
   font-family: "Garamond", "Times New Roman", serif;
   color: #d6ff74;
   border-bottom: 1px solid #1f79b8;
}

p {
   margin-bottom: 20px;
}

p.notice {
   background: #a1d0f1;
   color: #333333;
   margin: 0 30px 0 30px;
   border-left: 5px solid #1f79b8;
   padding: 5px 10px 5px 10px;
}

#footer {
   border-top: 1px solid #1f79b8;
   text-align: right;
}

body, h1, p, p.notice and #footer are called selectors. The body selector selects all XHTML tags named body. The h1 selector selects all XHTML tags named h1. p.notice selects all XHTML tags with the class attribute set to notice. #footer selects the XHTML tag with the id attribute set to footer.

XHTML id attributes must be unique. Meaning you cannot have 2 tags with the same id. Even if they are two different tags (e.g. h1 and p).

Let’s dig down on the body selector. This selector has 3 properties set. The background is set to a color    123e5d . CSS uses the hex format for colors. This means that the background color of the page is to be changed to    123e5d . The color property sets the default text color of the body tag and children tags to    ffffff . Another property set is the font-family. This states that the body tag and all children tags will use the font Tahoma. If Tahoma doesn’t exist on the system, it will use the system’s default sans-serif font.

Still ok? For the h1 selector, we have 3 properties. Since h1 is a child tag of body, it would inherit the color and font-family attributes. But we have overriden the values with this selector. We have set the font-family attribute so that all h1 tags will use the Garamond font. If Garamond doesn’t exist, it will try to use Times New Roman. If it still doesn’t exist, It will use the system’s default serif font. We have also overriden the color attribute so that all h1 tags will use the color    d6ff74 . We also added a solid-line (solid) border on the bottom with thickness of 1 pixel (1px) of color    1f79b8 .

Let’s move to the p.notice selector. This selects all p tags with it’s class attribute set to notice. I’m sure now you understand how the background and color properties affect the tags. The border-left tag acts like the border-bottom property. We have set the margin of the selected p tags to 0px (top), 30px (right), 0px (bottom) and 30px (left). The padding property defines how thick is the padding inside the tag so that the inner contents won’t touch the boundaries of the tag.

If you want to add a border on all sides, you can use the border property instead of specifying the border-top, border-right, border-bottom and border-left properties.

The margin property acts like border, and is a shortcut for setting margin-top, margin-right, margin-bottom and margin-left properties. If you give 4 values, it will set the margin in the following order: top, right, bottom and left. If you provide a single value, it will set it for all 4 sides.

The padding property acts like margin and also has the selective properties padding-top, padding-right, padding-bottom and padding-left.

For the #footer selector, this selects the last p tag because its id attribute is set to footer. We have added a border on top and set the text alignment (text-align) to be right aligned (right).

And by saving the XHTML file as styled_my_first_page.htm and the CSS as my_first_page.css, you can now view it in a browser. You may need to change the path of the CSS based on your folder structure. If you placed them in the same folder, you don’t need to put the ../css/. If you want to see how the page looks like, you can view it here.

Leave a reply