CSS and HTML

You can use CSS to style your (X)HTML document as well. In fact, style sheets have been around in one form or another since the beginnings of SGML in the 1970s, much before of the advent of XML. For instance, the tutorial that you are reading has been made with XHTML and has been styled with CSS. There are few differences between using CSS with XML and using CSS with HTML:

HTML has a fixed set of tags. Web browsers display these elements using a default style. For instance, the h1 element is typically styled as follows:
```
h1 {
  font-size: 2em;
  font-weight: bolder;
  margin: 0.67em 0;
}
```
Of course, you are free to integrate or change the default style by adding your favorite style rules.

The stylesheet can be associated to an HTML document in two ways: with the link element and with the style element both to be placed in the document header. It is also possible to style a single element with the style attribute. For instance, the default and alternative stylesheets for this page have been declared as follows:

<link rel="stylesheet" type="text/css"
      title = "Fixed, Top-Left"  href="../style/tutorial.css" />
<link rel="alternate stylesheet" type="text/css" 
      title = "Float, Top-Left" href="../style/tutorial2.css" />
<link rel="alternate stylesheet" type="text/css" 
      title = "Float, Top-Right" href="../style/tutorial3.css" />

In CSS for HTML the attribute selector tag.class-name is a shorthand for tag[class ~= "class-name"], where tag is any element name. Moreover, .class-name is a shorthand for *[class ~= "class-name"]. The block-level element div and the inline-level element span, along with their class attribute, are typically used in HTML to identify portions of code to be styled in a certain way. See the source of this page and the corresponding stylesheets for some examples.
In HTML attributes of type ID are always called id. Hence the attribute selector tag#key always matches the tag elements having an attribute of name id with value key.