There is two kinds of inline elements. First those kinds of inline level elements, which affect some way to the text. For example B and I belong to them and they are called as inline presentational elements. Most of these kinds of elements have certain semantic meaning. Previous elements can be expressed also with semantic elements EM (emphasized) and STRONG - this kind of elements are called as inline phrasal elements. These inline elements can be nested with each others without any limitations.

These kinds of inline level elements don't create round them rectangular boxes like block-level elements. They look like a phrase in a line. The text can wrap from line to line and it might broke from different places. Inline elements, which affect to the text are commonly used to highlight some parts of the contents.

When I was in the university, some students used a thick yellow felt-tip pen in order to mark their books. I use at the same way the element CODE, which I mark as blue only those markup codes, which can be seen only from the source code - note, that the highlighted texts in this sentence have been marked with inline-level elements (CODE and STRONG).

Also the special linking element A (from the word Anchor) belongs to inline elements. It behaves like elements, which affect to the text, but is has the limitation, that links should not be nested.

The main part of the document is inside of the element BODY. Elements in the document body, which have both start- and end-tags can create complex nested structures. They are like "branches" of the document tree (now you must think about the body as the stem of the tree). At this way the tree symbolizes the essence of documents.

I give next an example of a document tree, which document body has some basic block elements. I have presented the tree also with indented codes, which you can see how elements are nested with each others:

Individual attributes have values. In a HTML 3.2 document the element P can have for example the attribute align="center", which means center this paragraph ():

<P align="center">Here is an example of a paragraph, which have the attribute align="center".</P>

In order to better separate elements and attributes I write elements in upper case (like BLOCKQUOTE) and attributes (like style=" ... ") in lower case characters.

There is however two exception. The document type declaration is in upper case letters because of the common style. That doesn't belong actually to the structure of documents. It is not necessary to the browser. If the declaration has file name, it gives however to the browser the possibility to download the file into the memory of the computer. This information is however necessary for validator services and applications.

The declaration have the exclamation mark in the open delimiter (<!DOCTYPE ... >). W3C has created to standard document types DTD-files (Document Type Definition), where are declared all used attributes and elements, and where are also defined allowed element structures (as I have earlier explained, the definition language in HTML-documents is SGML).

It is like the ear-tag of a cow. The cow doesn't need an eartag, but the owner (and the authorities) needs it. Browsers know them without the declaration, but in principle just the document type declares the language, which the documents has been written.

XML documents might need document type declarations, because the author might made his own declarations. In XML-document is used another declaration (<?xml version="1.0"?>), which correspond the eartags of cows. When I refer to XML-elements I use always lower case characters.

Comments use following syntax, which I have also used in my examples (look at the conceptual scheme):

/* this is a CSS-comment, which should be green with browsers, which can understand CSS-definitions */

Gradually people wanted more and more features, similar to what was available in word processors like Word and WordPerfect. This required additional elements and attributes, which can be seen in HTML 3.2.

In HTML 3.2 all attributes were inside elements and inside of the document BODY, as in previous versions of HTML. Content, structure, and presentations were combined in the same document except for linked images and embedded elements (for example, so-called Java-applets). It was quite easy to build these sorts of documents. The problems lay with static structure and presentation - once such a site has been built, changes made to the site's formatting are difficult to make, especially if there are much elements and attributes, which describe the presentation of documents.

CSS combines style declarations and rules from different sources. That's why the term is constructed as a plural (sheets). Styles have different weights compared to each others.

CSS is not however an independent language, because it can only be used to assist other languages (primarily HTML, XML and XSL). The term "formatting" refers primarily to visual formatting, but CSS can be used to format documents in other ways as well. CSS exists solely for the formatting of documents.

All possible definitions that affect document presentation are commonly linked into separate files using format <LINK rel="stylesheet" type="text/css" href="stylesheet.css"> as in this example document ():

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="stylesheet.css">
<TITLE>Title text</TITLE>
</HEAD>
<BODY>
<H2>The header</H2>
<P>The first paragraph</P>
<P>Second paragraph. <A href="html_document.html">Link</A >. The only necessary attributes are href and possible linked objects like images.</P>
</BODY>
</HTML>


In the style sheet stylesheet.css is a description of how the element H2 should display. This document (the one you are reading) also uses a style sheet.

CSS is a powerful way to replace HTML 3.2 presentational attributes while offering a richer presentation than HTML 3.2 could ever create. This is achieved simply, with a little code included in the document. CSS documents load quickly, but can be made very attractive when displayed on CSS-compliant browsers. The display is poor, however, on browsers which don't understand CSS. Old browsers, for example Netscape 3.x see pages almost like the first Internet browsers. That means HTML 4.0 strict!

Even if structure is described primarily in the document, it can be affected with CSS. Because declarations of element presentation are kept primarily in external files, the presentation of the whole site is easy to change!

It is however possible to make loose, HTML 4.0 transitional documents. They can have HTML 3.2 level elements and attributes, which are not used in HTML 4.0 strict. In fact some HTML 3.2 attributes are easier to use as to define corresponding CSS. Normal documents, which I write are always transitional documents.

This document almost strict, because I have used in the actual content of this page primary those elements and attributes, which are mentioned in HTML 4.0 strict.dtd (instead in individual links and links sets I have used such elements and attributes, which don't belong to the strict document types including the attribute target to the link element A; you read about the last mentioned attribute from the Footnote 2). How old browsers can display this document depends on the default settings of the browser and exchanges, which the user has made to them. Test the difference! Compare a file with style sheets () and without it (). The latter is like a HTML 2.0 document.

Note. HTML 4.01 (the fixed version of HTML 4.0) and CSS2 specifications are designed as implementable. Browsers should work as far as possible so, that specification, which they support can be implemented. We must however remember that specifications are under development and between them must be some kind of priority order.

If there are some conflicts between specifications, browsers should work according the newest specification, which they support. Older specification are supported as far as they can be implemented without causing conflicts with newer ones.

Because the basic idea of CSS is the possibility to define presentation elsewhere (for example from separate files), CSS must have priority to the relation with HTML, if both HTML and corresponding CSS has been given or if some HTML-element or HTML-attribute overall handle with some way the same presentational features as CSS.

In this site, I try to explain the following matters:

1. What style sheets are (this page).

2. Where style sheets can be defined (page 2). I give some practical examples how to create simple style sheets.

3. Possible units and color values (page 3).

4. When user agents (commonly Web browsers) handle style sheets in the rendering process (pages 4-5).

5. Page layout details (fonts, anchors, links, backgrounds, borders and lists; pages 6-9).

6. How to control document structures (pages 10-11).

7. A glimpse to the future (page 12).

The last section handles after HTML 4.01 published XHTML-specifications and and XML. If you don't write XHTML or XML-documents you can skip the page and go directly to the page 2.

John Allsop: The key ideas of CSS.

Previous page

Sections of page:

Next page

Footnote 1. These definitions in CSS1 and CSS2 specifications are inaccurate:

A single style sheet doesn't need to have many rules (a collection of rules (the same as a rule set) or a set of statements). It can have only one rule or not at all an actual rule like style="color:blue". But also those kind definitions create logical rules. The definition in CSS2-specification is true, when we interpret words a set of statements at the following way:
A set of statements = one or more actual or logical rules.

Especially the purpose of Microsoft is to create large world-wide databases, which have the possibility to use elements and element patterns as searching criterion. Also mathematical science, chemistry could use own elements. Because there is no limits of possible elements, XML is extensible (eXtensible M arkup Language).

HTML documents have predefined presentations to elements. XML elements don't have any default presentation. Undefined XML element is just nothing! A way to give presentation to XML elements is CSS. If XML-documents use same elements as HTML-documents, the same CSS-file can be used in HTML and XML-documents (I made extra page about this matter).

Another way is XSL (eXtensible Stylesheet Language), which have more possibilities to affect to the structure of XML-document. Microsoft favors it. It gives the possibility to set elements in another order with more powerful way than CSS. It is however remarkable, that favoring XSL is partially derived from the truth that the CSS implementation in Microsoft Internet Explorer is not ready. CSS can't give proper presentation to XML document using MS IE browsers.

If the implementation would be better, the case would be different. Shortly - the CSS-implementation of MS IE doesn't fulfil XML-requirements. It is possible to create good presentation to XML documents for example for Netscape 6.x+ and Opera 4.x+ browsers. I handle MS IE 5.5+ in extra page).

The compatibility of XML-documents towards HTML 3.2 capable browsers is depending of the author of the XML document. In the worst case XML-document is to old browsers stick text with some special encoding (read the footnote 1, if you want to know, what I mean with special encoding) - in practice impossible or extremely difficult to read. In fact the author can create his own HTML resemblance language - XML is ideal language to "do-it-yourself " people! XML-document can however be quite readable to old browsers, when all or most elements are same as in the HTML-documents (they don't need however to behave at the same way in XML-capable browsers).

XHTML

An XHTML (eXtensible Hyper Text M arkup Language) document is a special XML-document, which use primary the same elements as HTML-documents. It can be declared either as a HTML or XML document. But XHTML-document must always made according to XML rules, which are in some matters more strict than in HTML documents. First of all documents must be well-formed - it is not allowed to make as much encoding errors as before! Between ordinary HTML-documents and XHTML-documents are for example following differences:

Below is an example of very simple XHTML-document ():

<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en"
http://www.w3.org/TR/xhtml1/"/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/">
   <head> 
      <meta name="keywords"
      content="Opera,Mozilla,Netscape,Internet Explorer,CSS" />
      <title>An example XHTML document</title>
   </head>

   <body>
      <h1>The main header</h1>
      <br />
      <p>Text.</p>
      <p>Text.</p>
      <blockquote>Text inside a block quote</blockquote>
      <ol>
         <li>Text in a list.</li>
         <li>Text in a list.</li>
      </ol>
</body>
</html>

Pages of this CSS-guide are today XHTML 1.0 documents except model pages. It is easy to convert HTML-files into XHTML-files using the HTML Tidy utility, which is HTML-Kit (freeware). If you want to use same CSS-files in HTML, XHTML and XML-document, it is sensible to write names of elements always with lower case characters. I have tried to create my examples so, that they could be used also in XHTML-documents. To use scripts is however problematic, but I have used them like in normal HTML-pages.

W3C: XHTML 1.0 (4.8 Script and Style elements and C.4 Embedded Style Sheets and Scripts), Namespaces in XML.
Other sites: HTML-Kit Home Page.

The next page handle basic methods, how to use style sheets.