Introduction to CSS –
Cascading Style Sheets

CSS — Cascading Style Sheets — is, after HTML (HyperText Markup Language) the most important language used in designing pages for distribution via the World wide Web.

HTML is the basic underlying language used for every web page; it allows an author to include all the information required to communicate with the visitor. It also allows the information to be presented in appropriate ways on a variety of different media.

While HTML does allow some control of visual presentation it is limited in its scope but the gap is filled by using CSS which allows the visual presentation to be fully controlled.

CSS may be employed on any web page. Version 2.1 of CSS ^{[Ref 2]} is well established is almost completely supported by all modern browsers while the latest versions are starting to provide support for version 3 even while it is still in development.

Fundamentals

Exercise

Here is an exercise that you can try, it shows just how easy and powerful CSS can be. If you want to try it, copy the following text into a text editor and save it as a file with extension .html Then run it in a browser.

"http://www.w3.org/TR/html4/strict.dtd">

Demonstration

This paragraph will, when the designed style has been applied,
demonstrate how using only a few lines of code the appearance of
a part of a page can be transformed. In this case we are supposing
that the author wants to draw particular attention to a paragraph.
The style will do four things. 1 - Change the font from the default
to a specific font; 2 - Justify the text; 3 - Add a wide, coloured
border to left and right sides and a narrow one top and bottom;
4 - Add a margin to each side to move it away from the edge of
the page. It also ensures that the text doesn't touch the border
by adding some 'padding'

The result will probably strike you as pretty boring. It doesn't use CSS. Now go back to the text in the editor and add the following just before the end of the head area. That is just before the tag. Save and run in the browser again.

What you have done is defined style rule and added it to the file. If you save and run the file you will see exactly the same as before — Why? Because though you have defined a rule you haven't used it.

Go back and change the

tag to

Run it again. Now you should see what can be done. The rule you defined has been applied to the paragraph and the result can be seen in the browser. The result should be something like this.

Fig 1

Paragraph of justified text centred horizontally on page with narrow top and bottom borders and wide left and right borders.

By modifying the

tag for the paragraph and adding class="styled_with_border" you have applied to the paragraph the 'class' which you defined in the head. The paragraph is then formatted using the style definitions found in the head.

Object of this guide

That sounds like a bit of cook book design. It is there just to demonstrate how quick and simple using styles can be and the files are almost self explanatory even to the uninitiated.

This guide is not here to teach cook book stuff; on the contrary I hope the reader will gain a firm basic understanding of the methods and principles involved in using stylesheets. It is an introduction to CSS not a complete guide, so there will be aspects that will simply not be touched on at all. I hope that will prove a strength rather than a shortcoming. By limiting the scope, which is pretty wide anyhow, readers should be able to concentrate on the essentials. Once opened up you should be able to grow your skills in this fascinating area.

Assumptions

Basic HTML

Text editor

Patience

Let's make it clear. To use this guide you need to be familiar with using your computer including its file system and to have some understanding of HTML. You are not expected to have an in depth knowledge but, since CSS is applied through HTML, you do need a basic knowledge.

CSS is a simple language and its code can be created using a text editor. I will be showing examples of how the code will look so you may find it helpful to have a text editor available for use.

Even if you are using a wysiwyg authoring tool you will gain a better understanding of how it works and how to use it if you have some knowledge of what it is doing. A good one which is 'open source', costs you nothing and includes a CSS editor is .

One other thing you will need is a little patience. You have already seen a demonstration of what styles can do, but to start putting styles to use yourself you need to go through some basics first. If you are using a good editor this phase will be quite short but if you are handcoding inevitably you need to go a bit deeper because you have nothing except yourself checking your code as you go. Make a mistake by substituting ( for { or ; for : or omitting any of them and it can take you hours to find a fault.

If you prefer to handcode the CSS file a very useful tool is Active State Komodo Edit ^[Ref20]. It is basically a text editor but it will autocomplete CSS properties and underline incorrect rules so it makes bug chasing very easy.

A short refresher on HTML Attributes

ELEMENT

HTML elements are the basic blocks used to build web pages. Examples are 'p' for paragraph 'img' for image. In a file they appear like

ATTRIBUTES

These may be used to modify or qualify elements in some way. Attributes can be assigned to all elements, often this is optional but sometimes it is essential. For example, to use an image you must specify the file to be used as the source of the image otherwise nothing will be seen. This is done using the 'src' attribute of 'img'. For example

Note:

The attribute appears in the opening tag for the element (as it happens the img element does not have a closing tag.
The attribute has two parts—the name (src) and the value (images/sheep.jpg)
The value is enclosed in double quotes. (In some very simple cases these may be omitted.)
The attribute name and value are connected using an equal sign.

Some attributes, such as the above, are quite specific to particular elements but there are three that may be applied to any element in the body or indeed to the body element itself. These are

style
class
id

We will see later how these may be applied but, just to give you an idea, here is one example of each.

Text in a paragraph

This heading is centred

Style Basics

Let's look at some basics first. It will be as well to become familiar with some terminology and to learn the syntax.

DECLARATIONS, PROPERTY, VALUE

Styles are applied using style declarations.

A declaration takes the form
property : value
in which a style property is associated with a value by listing them with a colon between.

Key to outlines and colours in use:

Property

Value

Declaration

Some examples are:

color

red

font-size

2em

text-align

center

The properties and values are taken from those specified in the CSS2.1 specification.

It is possible to use any number of declarations at the same time. When this is done they must be separated using semi colons e.g.

color:red

;

font-size: 2em

;

text-align :center

The lists may be written on a single line or, as is often done, on separate lines thus:

color : red ; font-size : 2em ; text-align : center

for this reason authors will normally add a semi colon at the end as well. This is optional but it tends to reduce the number of mistakes made when coding.

Note

While the punctuation marks are essential, spaces are optional and will not affect operation but the hyphens in property names are part of the name and must not have adjacent spaces.
Most properties can be applied to almost any element (generally those that will appear visibly on screen).

INLINE STYLES

The simplest way of applying styles uses the 'inline' method so we will look at it first. Please be aware that it is not a preferred method when others can be employed but it is permissible for occasional use.

Applying styles 'inline' is very simple using the html attribute 'style'. You just add a list of declarations as the value of the style attribute. For example:

Text in a paragraph

and the result will be

Text in a paragraph

There are several reasons why inline styles are not recommended. This will become clearer later but may be briefly stated

Styles which are embedded in the code for the page, as are inline styles, are difficult to maintain, it may be necessary to search through a page and modify several to achieve an objective.
The code involved can be quite significant and increase file sizes and download times.
The code involved clutters the page thus anyone viewing the source may find it difficult to locate what is of interest.

This does not mean that inline styles should be prohibited. Occasional use is unobjectionable and is, in fact, the usual way of dealing with images.

Key to outlines and colours in use:

Rule

Selector

Declarations

Property

Value

STYLE RULES and SELECTORS

Style rules collect one or more declarations together with a selector and provide a compact and powerful way to apply styles to a web page. Let's look at some examples:

.paraone

{

font-size

larger

;}

#footer

{

font-size

smaller

;

color

gray

}

Establishing rules and reusing them systematically helps to achieve consistency within and between the pages on a site.

CLASSES and IDs

The examples above show two different sorts of selector. The first, marked by starting with a full stop (period) is a class selector. The second, marked by starting with a hash (in US and Canada pound sign), is an id selector.

The list of declarations is surrounded by curly brackets (braces) thus separating the selector from the first property.

Classes and ids allow styles to be applied to particular elements in a similar manner to that used by inline styles, but the difference is that inline styles have to be repeated each time they are used. Classes and ids, having once been defined, may be re-used.

To apply a class or id to a html element use the corresponding attribute in the opening tag, for instance:

The first paragraph has bigger text

The footer appears less significant

Note that class name does not include the full stop and id name does not include the hash. These are used only for the selector.

Classes differ from ids. Classes may be re-used as often and wherever required. ids are unique identifiers which may be used once per page only. Typically they are used to define headers and footers, menus and main content areas of a page.

ELEMENTS

A very powerful feature of CSS is the ability to specify an element name as selector.

Example:

{

margin-left

5em

;}

This will inset all unordered lists (ul) using a left margin of 5em thus improving legibility of the page.

When an element name is used as the selector nothing else needs to be done. That style will be applied to all instances of the element (though other methods are available to override this is needed). The result is that the code on the page is minimised making for a very clean appearance.

Having shown the code for style rules you may still be wondering where they are recorded so that the page uses them. That is where stylesheets come in.

Stylesheets

A style sheet (commonly referred to as stylesheet) is just a list of rules. Let's take an example:

body { margin: 15px 10px ; 
       background: white ; 
       color: black; 
       font-size: small; }

body { font-family: Arial; }

p    { margin: 0.3em 0 0.3em 3em; padding: 0; }

ol, ul { margin: 0.3em 0 0.3em 6em; padding: 0; }

That's all there is to it. Usually, though not always, it consists of just ascii characters. Selectors and properties are case-insensitive as are most values but for some items such as font names and file names the case is significant.

The question is where does the sheet reside? There are two possibilities.

External (linked) stylesheet
Internal stylesheet.

External stylesheets

The preferred option is always an external stylesheet. This is because such a sheet can be used by several pages, or a complete site; should any error be found or a change required only one file has to be altered instead of having to trawl through all the pages to see what is needed.

An external stylesheet need contain nothing more than what is listed above. But comments are permitted and can be of assistance during maintenance. Here is an example:

/* rule added to sort IE6 bug */

Comments may be on a separate line or be inserted at the end of existing lines.

External stylesheets may be located anywhere which is accessible. It is usual to give them the extension .css It will probably confuse everybody if you don't.

Linking external stylesheets

External stylesheets must be linked to every page involved. The linking information is included within the HEAD area in the page source code. The usual and simplest way is using the link method.

Internal stylesheets

Sometimes it is required to include the stylesheet information within the code for the page involved. This may be easier, for instance, during development.

Again the code is contained in the HEAD area using the 'style' element with the 'type' attribute. For example to include the above stylesheet the code would be.

Multiple Stylesheets

You can have as many stylesheets as you wish for any page. The choice is yours but you will find it easier to keep control if you limit this to just a few.

Again it is simpler to keep the style sheets together in the head of the page but any internal sheet(s) may be mixed with external ones.

Later we will consider the priorities involved if we have several stylesheets applied to one page.

Relative references

Fig2
Folder structure

Block diagram showing html folder with three sub folders

When designing websites there are no constraints on the folder structure used but something like that shown in figure 2 is fairly common. To insert an image in a html file part of the code might be:

which recognises the fact that the images are stored in a sub folder of the html folder so the url of the page file is expressed relative to that of the html file.

CSS files do not often call on external files in this way but in CSS2 it occurs in the case of background images and in CSS3 in other ways as well. When this happens the reference must be expressed relative to the location of the CSS file rather than the HTML file as explained in the CSS specification ^{[Ref2 ]}. As an example:

div.cloudy { background-image: url(../images/clouds.jpg); }

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

Setting up styles

We'll start with one of the most fundamental issues - How do you set the size of text? But before this we need to ask do we need to set text size at all? The answer to this second is in many cases 'No'. If you do not bother to set any size for text the browser will set one for you, it will set a standard size for body text, paragraphs and list items. Larger sizes in bold face will be set for headings and, what is more, there will be a remarkable consistency between browsers in the choices made. Perhaps even more remarkable is the fact that this approach is that adopted by W3C for most of its documentation so you will be in good company if you do the same. This approach leads to the use of slightly larger text sizes than typically opted for by those who make their own decisions but the advantage is that those with even slightly impaired vision benefit and the accessibility of the site is improved.

What then is the 'standard size' referred to above? It is 16px. This raises a new question what does 16px mean?

Here is some text with font-size set to 16 px – The Standard size, referred to. If you measure carefully you will not be able to find any dimension on any character which equates to 16px so is this just a myth? No. The line-height has also been set to '1' so the line height is the same as the font size. The background is ruled in 20px squares so, by measuring carefully, you can check that the line height is 16px. How much of the height, or font-size, is used by any character in the font is up to the font designer. In some cases the top of an upper case character or the ascender in lower case b d f h k etc will align with the top of the line-height measure while the descenders for characters like g j p etc will align with the bottom of the line-height measure. In other cases, such as in this sentence which uses the Calibri font, there may be spare space above or below so the text appears smaller even though though the font-size specified is the same. In fact there is no prohibition to a font requiring more height than the line height so that characters from one line actually overlap those of adjacent lines. For this reason line height is normally set greater than '1'.

If you do decide to set the font sizes for various elements you will discover that this is one of the more complicated aspects of CSS – so beware.

Font size can be set using a variety of units which behave in a variety of different ways.

Leave set to defaults
Pixels
Absolute size keywords
Relative size keywords
em units
Percentage

Using defaults

Table 1
Default text sizes for elements
Element	Size
body	unspecified
p	unspecified
li	unspecified
td	unspecified
h1	2em
h2	1.5em
h3	1.17em
h4	unspecified
h5	0.83em
h6	0.75em
big	1.17em
small	0.83em
sub, sup	0.83em

The advantages of this approach have already been mentioned. If we do nothing the size resulting for various elements will be as defined in Appendix D of the CSS2.1 ^{[Ref 2]} specification with the sizes shown in table 1. All browsers appear to use these defaults.

Using pixels

Pixels have the advantage of being easy to understand but that's the end of the advantages. Whatever size the author may choose there is the risk, or rather the probability, that it will not suit some visitors. Because of this all browsers allow the visitor to change the text size, usually via the View menu. (This is quite different from the zoom effect that many browsers also offer because it changes the size of text only.)

Unfortunately Internet Explorer, even recent versions, does not allow the text to be resized if it is specified on pixels. This violates one of the important requirements of W3C's Web Accessibility Guidelines ^{[Ref 35]}

So – Never specify font-size using pixels

Value equivalents

Before going further it may be advisable to cover the relationship of sizes specified in different ways. On a new page without any other CSS structure the following all give text in the same size

Unspecified ≡ 16px ≡ medium ≡ 1em ≡ 100%

As we will see soon, once you apply structure to the page, such as creating divs or tables and apply font-sizes to them, the simple equation may break down.

Absolute size keywords

CSS has seven keywords that can be applied as values for font-size.

xx-small
x-small
small
medium
large
x-large
xx-large

The ratio of the size between adjacent keywords is approximately 1:1.2 Since medium equates to 16px the total range is about 9 to 28 px or 0.58em to 1.7em.

Absolute size keywords may be simply and reliably applied to define font-size. A disadvantage is that the range of sizes available is quite limited, the smaller being too small for practical use and poor from the point of view of accessibility while the largest is still too small for some applications.

Relative size keywords

These are two in number.

larger
smaller

They are intended for use in conjunction with absolute size keywords and change the size to the next larger or smaller as appropriate. In practice they may be used with other methods of specifying font-size and typically change the size by ±20%.

em units and percentage

This is probably the most usual way to express font sizes, it is very versatile but you need to be careful if you are to avoid problems.

The first thing to realise is that there is absolutely no difference between using ems and percentage if you simply recognise that 1 em = 100%, 0.5 em = 50% etc pro rata.

The big question is 'What is an em?' In hot metal printing an em is the width of the letter 'm' so an em in Arial narrow typeface is considerably smaller than one in Wide Latin even if the point size is identical. Thus an em is not a fixed size. In CSS an em is not a fixed size either though for quite a different reason. In CSS the em is the same size for all fonts so is not related to the width of that letter. A better starting point is the one suggested above, an em starts off being equal to 16px.

Table 2
Default text sizes for elements
Element	Size	Size
body	unspecified	16px
p	unspecified	16px
li	unspecified	16px
td	unspecified	16px
h1	2em	32px
h2	1.5em	24px
h3	1.17em	19px
h4	unspecified	16px
h5	0.83em	13px
h6	0.75em	12px

The root element, that is the oldest ancestor, on any page is the HTML element. In this element – an em is equal to 16px. We'll deal with inheritance later but for now it suffices to say that any element inherits its font-size from its parent. Since the body element is a child of the html element it inherits the same font-size.

We could rewrite the default sizes expressing them in pixels and obtain the result in Table 2.

Now let us suppose that you prefer an easy life and do not want to redefine the sizes that a browser manufacturer had so carefully crafted for us, but you would still prefer the sizes to be slightly smaller. Let's say 10% smaller.

Table 3
Text sizes with font-size for body 0.9em
Element	Size	Size	Revised size
body	unspecified	16px	14px
p	unspecified	16px	14px
li	unspecified	16px	14px
td	unspecified	16px	14px
h1	2em	32px	28px
h2	1.5em	24px	22px
h3	1.17em	19px	17px
h4	unspecified	16px	14px
h5	0.83em	13px	12px
h6	0.75em	12px	11px

This aim is easily achieved by setting the font-size for the body element to 0.9em (or 90% of course). The body inherits 1em at 16px from its parent but now converts 1em to mean 16 × 0.9px = 14px. All its children (p, li, hi, h2 …) take this as the size of an em and base their own sizes on this.

Font sizes specified in em or percentage scale in this way depending on the size of their parent. Sizes specified in absolute size keywords or px do not but remain constant throughout.

The effect is that an em is not a fixed size so, if you need any particular size, you must express it in relationship with that of its parent thus you need to keep track of what has gone before.

Font Family

Generic families

The font-family property specifies the typeface to be used. Traditionally authors have been limited to using fonts installed on the visitors computers and this is still the simplest and safest approach. This of course involves some element of guesswork and risk but is generally a reliable approach. CSS recognises five 'generic' types of font family

'serif'
'sans-serif
'cursive'
'fantasy'
'monospace'.

Specify one of these types and the browser will search the visitor's computer for a font meeting that description and use it. Use any of these, other than fantasy, and a reliable solution will be found (fantasy is very unreliable).

Font stacks

Rather than leaving all the decision making to the computer it is possible, and usual, to specify a font-stack, that is to say a list of fonts that you prefer to use. Here are a few common stacks as they would appear in a CSS declaration.

font-family: Arial, Helvetica, sans-serif ;
font-family: 'Times New Roman', Times, serif ;
font-family: 'Courier New', Courier, monospace ;

These provide alternatives of sans-serif, serif or monospaced fonts. In each case there are three values listed. The first is a font which may be relied on to be present on systems using MS Windows^®, the second on Apple computers, the last is a generic type to be used if neither of the specified fonts is found. Font names must be spelled using the correct cases and names which include spaces should be enclosed in quotes.

Any number of font names may be included in a stack. The first found will be used if available.

In choosing fonts one issue is the range of characters, or glyphs, included. If you need more than a plain ascii set a good resource to check is provided on the web site of Alan Wood ^{[Ref 26]}. To find out how likely any particular font is to be found on Windows, Mac or Linux machines an invaluable resource is provided by .

The correct procedure for choosing which font from a stack to use is that the browser should search on a character by character basis. If the first font listed is found it should be used if it contains the character demanded otherwise later fonts listed should be searched. Some browsers appear to be more successful in this task than others. Until version 8 IE appears to select a font family even if it does not include a glyph for the character required.

Colour

Colour may be set for text, borders and background. The properties involved are

color applies to text
border-color applies to borders
background-color applies to background

Irrespective of whichever is involved the value is specified in the same way.

Colour names and codes

Colours may be described either by using a keyword or in R, G, B units, that is the proportion of Red, Green or Blue involved in the mix. (Some authoring tools may allow colour to be input using other systems of units — e.g. HSL, CMYK — but these will be changed into one of the systems recognised by CSS.)

CSS2.1 recognises 17 keywords for colour names:

Black

Gray

Maroon

Red

Orange

Yellow

Lime

Green

Teal

Olive

Aqua

Blue

Navy

Fuchsia

Purple

Silver

White

but CSS3 has a much larger set of names which are already supported by browsers and have been tabulated by O'Reilly ^{[Ref 8]}.

Examples are:

color : fuchsia ;
color : rgb(255, 0, 255) ;
color : #ff00ff ; or color : #f0f ;

The proportions of Red, Green and Blue are expressed as numbers in the range 0 to 255 either in decimal or hexadecimal using the structures shown in the example. The numbers are in the order Red, Green, Blue. When expressed as decimals the three numbers are separated by commas, when expressed in hexadecimal there is neither punctuation nor space between them. In hexadecimal when each component consists of two of the same digits this may be abbreviated. Thus #336699 may be expressed as #369.

Transparent colour

CSS3 introduces a new method of specifying colours. This method is the same as the rgb method but adds a fourth component, the 'a' (alpha) component specifying the opacity of the colour. The range for 'a' is 0 to 1 where 0 implies full transparency and 1 full opacity. For example:

p { color: rgba(0,0,255,0.5) } /* semi-transparent solid blue */
p { color: rgba(100%, 50%, 0%, 0.1) } /* very transparent solid orange */

Rgba is supported by all modern browsers other than Internet Explorer below version 9. (You can provide a level of support for browsers that don't support rgba by including a rgb colour prior to the rgba colour.)

There is a useful article on the topic at 24ways ^{[Ref 9]}.

Background

A background colour or image may be set for any element. When the image is larger than the element it will be cropped to size. Where it is smaller it is possible to specify the position and whether it is to be tiled. For example.

h2 { background-image: url(images/bgfill.png); background-repeat: repeat-x; }

Tip
With XHTML pages background on the body element does not extend into the margin. To apply a background here set the style for the html element.

Images start at the top left of an element and by default repeat in both X and Y directions to fill the content area. The repeat action may be changed in the following ways:

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: none;
background-repeat: repeat;

When a background image is used it is recommended that a matching background colour should also be specified. If the image is not available, or while it is loading, the colour will show which improves the visitor experience.

The background covers the content, padding and border area of an element. See figure later. The body element is an exception in that, for html pages, the background covers the margin area as well.

Links

Links are used to connect two points on the web. The source of a link is always the anchor element. The link is formed by modifying the 'a' as selector using a pseudo class.

Pseudo classes

Pseudo classes may be applied to any element but are most commonly used with the 'a' element. They are identified by using a single colon as the start marker. This has several states which are styled using pseudo-classes e.g.

:link the initial state of a new link
:visited a link that has been visited
:hover a link over which the cursor is hovering

These classes are automatically applied to 'a' element without any author action and are acted on according to the state or history of the element.

The rules are set using the selectors:

a:link
a:visited
a:hover

Make it clear
what is a link
what is not

By default, text links are rendered coloured and underlined and after visiting the colour may change.

In styling links one principle is important

It should be clear to visitors what are links and what are not.

This is typically achieved by retaining the convention of underlining links and not underlining other text and also by introducing some change when a link is hovered over (to reassure visitors) e.g. removing the underlining, changing the colour or background. The browser will also normally change the cursor when you hover over a link.

An example of a set of rules might be

a:link    { color: blue; text-decoration: underline; }
a:visited { color: purple; }
a:hover   { text-decoration: none; }

If you do not want to differentiate links which have been visited you may need to override the browser default by setting the same declaration for the :link and :visited states. e.g.

a:link, a:visited { color: blue; text-decoration: underline; }

One thing that is important is to ensure that the a:hover rule is the last otherwise the others will override it.

You can find much more about styling links in my Lab note Maximise the value of your hyperlinks ^{[Ref 30]}

Layout

The next several sections cover different aspects CSS styles involved in page layout. They are not intended as a guide to layout itself which has been treated extensively in many articles by others.

CSS Box model

Fig 3
2-D Box model

The box model describes the way several css properties interrelate. Margin, border, padding and content can be considered as a set of nested boxes. The illustration in Figure 3 shows the boxes with equal wall thickness all around. While this is the easiest way to set them up it is by no means necessary to do so and the labels show individual top, right, bottom and left properties which allow different values.

For most elements border and padding default to zero but many elements default to having a margin on top and bottom, others to left or right.

Margins and Margin collapse

If a bottom margin on a block element is set to, say, 0.25em and a top margin on the following block element to 0.5em then the gap between them will be the greater of the two NOT the sum. This is known as margin collapse.

For instance if the following rules were set:

h3 { margin-top: 0.5em; margin-bottom: 0.25em; } p { margin-top: 0.25em; margin-bottom: 0.25em; }

then the space between two paragraphs would be the greater of 0.25em and 0.25em i.e. 0.25em
and the space between a paragraph and a following h3 would be the greater of 0.25em and 0.5em i.e. 0.5em.

Some unexpected results may be experienced especially where an element with a top margin is the first in a div. This is discussed in an excellent article by Eric Meyer ^{[Ref 10]}.

Shorthand conventions

The components of the box model share several similarities. All have four components top, right, bottom, left and border has three sets of values.

Table 4
Components of box model
Property	Values
Margin	Width
Border	Width	Colour	Style
Padding	Width

This leads to the possibility of having to set four declarations for margin:

margin-width-top
margin-width-right
margin-width-bottom
margin-width-left

similarly for padding while border may have twelve declarations. Several shorthand conventions assist here.

The property 'margin', border' or 'padding' used with a dimension as value will be interpreted as a width to be applied to all sides. e.g.

margin: 2em;: will provide the same margin on all sides

The clockwise convention allows different widths to be set for each side e.g.

margin: 0.25em 0 0.25em 3em;: will be interpreted such that the four values in turn apply to the width of the margin on top, right, bottom and left (running clockwise). Note there is no punctuation separating the values

If two values only are given the first will apply to top and bottom, the second to left and right.

If three values are given the first applies to top, second to left and right, last to the bottom.

The convention applies in the same way to border and padding.

For border the same applies to colour and style. If one, two, three or four valid colour or style values are listed the same interpretation will be applied. Note that each declaration can have one to four values not twelve. With one exception width, colour and style must be specified separately. The exception is when the border on all four sides is to be the same then one length one colour and one style — on any order — will define the border. e.g.

border: 4px solid #ffa500;

For possible border styles consult Sitepoint ^{[Ref 14]}.

Table 4 above uses a combination of different border width, style and colours. Here is a set of declarations to do that:

border-style: solid dotted dashed double; 
border-color: rgb(255, 204, 0) rgb(51, 204, 51); 
border-width: 4px 10px 8px;

Three dimensional model

Fig 4

Three dimensional box model shows margin at bottom with background colour, background image, padding, border and content layered over it in that order.

The box model as shown in Figure 3 is a two dimensional, flat model but it does have a third dimension which needs consideration.

The excellent descriptive diagram in Figure 4 showing the layering of background, image and content and also the transparency of margin and padding has been produced by Jon Hicks ^{[Ref 13]}

Advanced readers will know that if the size of the content area is constrained and more material than will fit is inserted the material will overflow the 'content'. The diagram shows that in that case it will appear in front of the border and (invisible) padding and margin.

Content size

The content area is where the text in a paragraph, heading or table cell or where the image in an element would go. Set a border on this of any required width and colour and space the border from the content by the padding. The whole structure is then spaced from adjacent material by the margin.

The size of the content area depends on the type of element involved and whether this uses the default setting or has been specifically set.

Default size

In the case of text items – headings, paragraphs and lists – the width expands to the full width of any containing block, which may be the body or some other element. This width will then often vary as the visitor re-sizes the viewport. The height of such elements will similarly vary so as to accommodate the given material.

Other elements may behave differently, tables for instance default to shrinking their width so as to be just wide enough to hold the content. If the space available is reduced the table height will alter. Similarly floated elements shrink to fit.

Set size

Fig 3 (repeat)
2-D Box model

The CSS properties width and height set the size of the content area. Once set this will override any default and any change with viewport width will no longer occur. Generally avoid setting these properties unless they are essential.

Authors should differentiate between the content area and the actual content. In the default condition both will be the same but when the height or width is set using a style it is possible that the data in the area may be either smaller or larger than the space provided. In such cases the content will simply overflow the area, usually in the vertical direction.

Overflow

Overflow can be controlled using the 'Overflow' property which can accept one of four different values:

Overflow: visible;: This is the usual default condition when overflow is not specified. The content will overflow the content area if required
Overflow: hidden;: The content will be clipped at the limits of the content area
Overflow: scroll;: Scroll bars appear on both axes allowing any overflowing content to be brought into view
Overflow: auto;: As for scroll but the scroll bar(s) appear only when required

Figures 5 to 9 demonstrate the various behaviours.

Fig 5

no style