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.
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 take this basic form, with a selector followed a statement in curly braces { } containing a property, and a value:
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:
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.
When we write a separate CSS file to style an HTML file, we need to
associate it with the HTML by placing a special <link> element
inside the <head> element. The code looks like this, and we recommend simply copying
and pasting this into your own <head> element and replacing the dummy.css filename
with the name of your own CSS file:
Here's what the various parts of this element indicate: @rel says what kind of link association this is: stylesheet is but one option. @type indicates the kind of stylesheet, text-based CSS (as, again, there are others in the known web universe). Finally, we have the @href, which you might remember as the same attribute used on the HTML element <a> to indicate a link address. This is the part where you specify the name of your file, which depends on its location and its name.
A note on mindful file management: We recommend you save your stylesheets in the same directory with your HTML, because then you simply indicate the filename. Sometimes people stash their stylesheets in a subdirectory (a folder within the web folder) and name it, for example, css: If you do that, you just need to create a path to the file in your link statement, indicating the directory name, a forward slash and the filename: e.g., href="css/style.css". The value of the @href attribute can also be a URL, that is, a web address, as in href="http://www.pitt.edu/~ebb8/index.css" .You can actually write CSS to style XML for web presentation! If you want to give it a try, the way you associate the files is a little different: To attach CSS to XML in <oXygen/>, select Document → XML Document → Associate XSLT/CSS Stylesheet and navigate to the CSS file. <oXygen/> then inserts a line near the top of your document to make the file association.
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):