HTML / CSS / JavaScript Tutorial

CSS Tutorial

3. Hints and further information

[this page | pdf | back links]

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



Normal, unvisited link


Link that user has visited


Link when the user moves a mouse over it


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.:


<div style=”overflow-x:auto;”><table> … </table></div>


Contents | Prev | Next | CSS

Desktop view | Switch to Mobile