NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {upg dh|ds}
Creative Commons License Last modified: Wednesday, 27-Mar-2019 00:42:44 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at Powered by firebellies.

Here we offer a very basic orientation to styling HTML elements with Cascading Stylesheets (CSS), with emphasis on learning how to write the code and associate it with an XHTML (or HTML) file. This is designed to follow our Introduction to XHTML (and HTML). After the basic orientation, we provide links to resources with comprehensive information on CSS code, resources that we rely on as we style our own projects.

As HTML developed in the 1990s, more and more tags were added to control display and layout: Presentation features like color coding, font size, font weight, etc, were built into an increasingly bloated language (as in, HTML 3.2 was ailing from “code bloat”). To resolve the problem the W3C (World Wide Web Consortium) developed CSS as a form of code designed to be held in a separate file, and to control presentation elements across multiple pages or whole sites. The idea was to streamline HTML, to keep it simple and readable, and also to make it easy to change the style of pages quickly and efficiently.

CSS is not the only means to style HTML. We’ll also be learning to write XSLT (eXtensible Stylesheet Language Transformation) which is a powerful XML-based stylesheet system for generating HTML and XML. XSLT has powers that CSS lacks, specifically to remix, extract, and even rename elements from one file to generate entirely new files. By contrast, CSS is fairly simple: You write it to identify HTML elements and indicate something to be done with them: to give them a specific color, or a width, or a margin, etc. In our projects we use both XSLT and CSS together to build and design our sites.

How to Write CSS

To begin a new CSS document in <oXygen/>, go to File → New → New Document, and choose CSS. You'll open a blank file into which you can start writing CSS rules as we describe below. Sometimes it helps to start with someone else’s CSS code to get a sense of how it works. Try taking a look at our CSS for this page, and if you like, save the CSS file locally ihe same file directory with this very XHTML page you are reading. You can then play around with altering our CSS rules, and viewing the effects locally in your web browser. (Can you change the background color for a portion of the page?)

First of all, think about your approach, working from the top level elements down: Work from the root “down” through the tree (like how we write schema rules). The difference from writing schemas is that we don’t have to write rules for every element and our rules can be written in any order (though it helps make the code human-readable to keep it organized in something like the order of the HTML elements). One thing to realize is that if you place a style on a top-level element, like, say, to establish a text color on the whole <body> element, that will control ALL the text in all the “children” and “grandchildren” and “great-grandchildren” (etc.) elements nested inside <body>. This is a handy property of CSS called inheritance.

You can always borrow someone else’s stylesheet rules if you admire a color or something of the layout. CSS is often easy to adapt and retool from sites you discover on the web, just by right-clicking to view the page source (or selecting view page source from your browser menu options), because the link to the associated stylesheet makes it available to read and download from the page source view. Even more conveniently, CSS resources make default styles available for download, like CSS Zen Garden. But as you learn to write CSS, we expect you will find it as addictive as we do, in the fun obsession of designing a lovely site all your own.

CSS Statements

CSS statements take this basic form, with a selector followed a statement in curly braces { } containing a property, and a value:

body {
background-color: #CC9966;
color: #70003D;
font-family: arial, helvetica, sans-serif;

Notice how each property and value expression is separated by a mandatory semicolon ( ; )! You don't have to stack the curly braces as we did, but it's conventional to do that because it makes it easy to add new properties and values line by line, making it easy to read. We've specified the following properties for the body element (and by the inheritance rule) all the descendent elements within body:

You can fine-tune your selection of elements and attributes together using pseudo-selectors. We demonstrate this in the following example, courtesy of Obdurodon. If you wanted a particular rule to style only the <title type="poem"> elements when there are other kinds of title elements present, you would need to specify the @type="poem" in your CSS rule, using a pseudo-selector inside square brackets [ ]. In this handy rule, we specify that the contents of this element be surrounded by typographic (curly) quotation marks so we do not have to find the special characters for those in writing the HTML:

title[type = "poem"]: before {
content : "“";
title[type = "poem"]: after {
content : "”";

This is an unusual statement for another reason: We can specify what we want to appear before and after an element, using the syntax we’ve modelled here.

You can make up your own element and attribute names and decide on acceptable values in your XML schema, but you can’t make up XHTML element names or CSS properties or acceptable values. E.g., if you try to set the color of an element to “OutrageousNeonYellow!”, that setting will be ignored. You can look up the legal properties and values from our Resources section below.

Resources, Tutorials, and References

We're not being lazy here; it's just that there are wonderful resources on the World Wide Web that cover every rule for CSS writing! Our goal with this page was to orient you to the basics of the syntax, so you can then find your way just as we do, consulting the following (and finding your own great CSS resources):

CSS Tutorials and Samples:

Color Tutorials and References: