Quick Introduction to HTML
Style and Presentation

What are styles?

Styles are used to specify the presentation of HTML. For instance, a style can specify the font size, face, and color of the text. Among many other things, it can also specify page layout (centering, justification etc), element background (solid color or image) and border.

Presentation and content

Experience has shown that it is best to keep the text (the content) of the document, separate from the style information (the presentation) of the document. That is, rather than putting directives in the text that say “make this text to be bold font and color red”, you just mark the text that you want to be formatted, and say elsewhere what its formatting should be.

This is so important that it has become a general principle:

Separation of presentation and content

There are several advantages to following this principle:

to change how one kind of item appears, you only have to change the style specification in one place, rather than for every instance of that kind of item in the document.
the whole web site can be kept more uniform in look and feel
the web pages are smaller, and load faster

Cascading style sheets (CSS)

The best way to add style to HTML is by means of Cascading Style Sheets or CSS. This is a language that relates style to specified parts of a document.

A style sheet is a group of CSS style specifications.

Styles in CSS style sheets cascade in the sense that the styling specification of one element builds on previous specifications, and CSS can import specifications from files in other places.

The typical use of this cascading is to make a basic style sheet for a whole site, and have the style sheets for sub-directories on the site import the basic style sheet. The sub-directory style sheets define specific styles for HTML in their directories, but the overall look of the site is defined in the basic style sheet. The basic styles cascade through the other style sheets.

If the site administrator wants to change the look of the site, say, a corporate logo or a background color, they could change it for the whole site by changing a single line in the basic style sheet.

CSS in a web page

There are three ways CSS may be added to a web page:

a link in the HTML head block referring to a separate CSS file
a style tag in the document’s head block containing style specifications
style attributes of individual HTML elements

(The third option breaks the principle of separation of presentation and content and is therefore to be avoided, but sometimes it is useful for experimentation.)

Furthermore, one CSS file may import another CSS file. This is what allows styles in a web site to cascade, as we will describe later.

Linked style sheets

In this method, style statements are put in a separate file (whose name by convention ends with “.css“) and the file is included in the HTML file by means of a link tag in the file’s head block.

<link rel="stylesheet" type="text/css" href="style.css" />

Here the rel="stylesheet" type="text/css" attributes tell the browser that it is to include a CSS style sheet, and the value of the href attribute is the name of your style sheet file.

The style sheet file should contain only CSS style directives, comments, and CSS “@rules” (see below).

This is the best method for styles that are shared among several pages on a web site. A change to a rule in the stylesheet will cause a corresponding style change in all the pages that link to it.

Style block in HTML

Style rules for a single web page may be put in the head block of the HTML file, within a style block, like so:

<style>
	em { font-weight: bold; color: red }
</style>

This method is appropriate for styles that appear only in the present file, or for practicing with a style.

In-line styles

Style settings for a single HTML element may be applied by making them the value of the tag’s style attribute, like so:

<p style="font-weight: bold; color: red;"> some text </p>

This method is to be avoided, but it may be used for experimenting with styles.

Selectors and properties

A CSS style sheet is a sequence of rules.

Each style sheet rule consists of two parts:

a selector that specifies what HTML elements are to be affected by the rule, and
a list of property settings, that specify the presentation of the selected elements

Consider this simple example of a CSS rule:

em { font-weight: bold; color: red }

The selector is the part before the curly braces; in this case it says the style settings refer to all HTML em tags.

The property settings are the part in curly braces “{...}”. In this example the properties font-weight and color are set to the values bold and red, respectively. Notice that each property is separated from its value by a colon “:” and each property setting is separated from the next by a semicolon “;”.

To use this rule to style a web page, you could put it in an HTML style block within the HTML head block, like so:

<head>
<style>
	em { font-weight: bold; color: red }
</style>
</head>

Now, if in the body of the document’s HTML code, the following should appear:

Here is <em>emphasized text</em>

it will be rendered like so:

Here is emphasized text

Comments

You can put a comment into CSS code. The comment will be ignored by CSS, but can be used as a reminder of what you were doing when you wrote the code, or to temporarily disable some CSS code.

CSS comments are introduced with a slash followed by an asterisk “/*” and ended with an asterisk followed by a slash “*/”. For example

/* This is a CSS comment */

More selectors

In the above example, the style was applied to all em tags in the document. But maybe you want only some em tags to be bold and red, but others not.

CSS offers a rich way of selecting which items to style, besides just the HTML tag selector.

Class Selectors

Class selectors are the most important of all. HTML tags have a special attribute, class, specially to allow them to be tagged for a special style.

You tag an element with using the class attribute whose value is some arbitrary name, then you refer to that name in the CSS selector by putting a period “.” in front of it. For example: the CSS

	.extra { font-weight: bold; color: red }

will affect tagged elements like this

Here is <em class="extra">emphasized text</em>

but not other em elements.

Once again, the name of the class is arbitrary: it is up to you. A good name for the class might indicate how the element is special, as opposed to the particular styling to be applied.

You can use a class selector in conjunction with a tag selector. For example, the selector em.extra will refer only to em elements with the class attribute whose value is extra.

HTML div and span tags are meant to be used with CSS class selectors. Unlike other HTML elements, they have no inherent styles of their own, so any style they have must be specified by CSS. The div element is a generic vertical division in the text, while the span element is a generic in-line text element.

For example, the above class selector “.extra” would also style the text in a tagged span element as in:

Here is <span class="extra">some extra text</span>

ID Selectors

Child Selectors

Lists of Selectors

More Properties...

The many CSS properties can be grouped into a few categories:

for font

font-size: any length or percentage, or relative sizes: xx-small, x-small, small, medium, large, x-large, xx-large, or inherit
font-family: generic names: serif, sans-serif, monospace, fantasy, cursive
Other fonts are specified by a text string, (in quotes if it contains a space), preferably in lower-case: "arial".
font-style: normal, italic, oblique, inherit
font-weight: normal, bold, bolder, lighter, 100, 200,... 900, inherit
font-variant: normal, small-caps, inherit

for text layout

for background

Making CSS cascade

One CSS Style Sheet can import styles from another. In this way the styles from the imported file cascade into the current one. This only applies to styles in CSS style sheet files, not to style sheets within HTML files.

For example, the following CSS @rule includes all the styles in the file style.css in the parent directory.

@import "../style.css";

This line must appear in the CSS file before any style rules.

The effect is as though the contents of the imported file had appeared at the top of the current file, in place of the import statement.

Old HTML styling

The old way of setting style information was to directly set it using a font tag in the text.

The font tag is limited and messy. It is to be avoided, and expunged from old HTML documents where it is practical to do so.

Quick Introduction to HTML Style and Presentation

Quick Introduction to HTML
Style and Presentation