HTML, CSS, JavaScript Tutorial

CSS Tutorial

3. Hints and further information

CSS Values

In CSS, if you are using values that have units, e.g. applying values that are to be interpreted as CSS lengths (e.g. setting the size of an element’s left margin using e.g. margin-left: 20px) then you should not include a space between the value (here 20) and the unit (here px) as otherwise the style may be ignored.

There are several ways of defining lengths in CSS. There are also specific conventions used when defining CSS times, CSS angles and CSS colours.

Hierarchy in CSS style rules

If you have two or more style rules that would otherwise apply to a specific attribute of a specific element then the hierarchy rules are that:

- More specific rules override more general ones. Specificity is defined based on how many IDs, classes and element names are involved as well as by whether there is an !important declaration.

- When even these do not differentiate between styles then whichever one appears last is the one that is applied.

For example, without the !important flag, <h3> elements using the following styles would appear green (as the green style rule is after the red one), but with the !important flag it is the red one that applies in this instance:

h3 {color: red !important}

h3 {color: green}

Setting the CSS style of the whole page

The style of the whole page can be set by a style rule such as:

body {background-color: lightblue;}

Multi-valued CSS properties

Some CSS properties take several values. For example, many HTML elements are deemed to have 4 sides (top, right, bottom and left) and there are conventions on how to define properties that encompass all four sides simultaneously, see here.

More generally, some CSS properties are shorthand properties that set several other more granular properties at the same time.

Animation and other more sophisticated features

CSS has developed over the years and it is now possible to create relatively sophisticated animation effects using the CSS @keyframes rule, without needing to implement these animations using JavaScript. It is also possible to apply different styles depending on the device being used to render the material, using the CSS @media rule. Material can be automatically added before or after HTML elements using CSS ‘pseudo-properties’, such as the content pseudo-property.

Styling of hyperlinks

Links can be styled differently depending on what state they are:

Link state	Description
a:link	Normal, unvisited link
a:visited	Link that user has visited
a:hover	Link when the user moves a mouse over it
a:active	Link at the moment it is clicked

Advanced table formatting

Zebra-striped tables can be implemented using the nth-child selector, e.g.:

tr:nth-child(even) {back-ground-color: #f2f2f2;}

To make a table responsive (i.e. to display a horizontal scroll bar if the screen is too small to display in full) you can add a container element with overflow-x:auto, e.g.:

NAVIGATION LINKS
Contents | Prev | Next | CSS

Desktop view | Switch to Mobile

CSS Tutorial 3. Hints and further information

CSS Tutorial

3. Hints and further information