Home  Privacy

Introducing CSS

HTML gives your document structure. CSS gives it style.

Up to now, the web pages you have created are plain looking, that’s because HTML is only about structuring the contents of your document.

CSS – Cascading Style Sheets – allows you to style the presentation of the various HTML elements in your document.

Separating the formatting from the content makes it possible to present the same document in different ways. For example, presentation on a mobile phone might be different from a desktop display; layout for an e-book might be different from the layout for a desktop display, which might be different from the layout for a printed document; text-to-speech might also have its own layout.

CSS allows you to control aspects such as layout, colors, and fonts.

Having the CSS in a separate file, you can apply the styles to multiple HTML documents. Change the contents of the style sheet and you automatically update the styling of all the HTML documents referring to that style sheet. In other words, you can update the look and feel of your website without having to update all the content documents – just the style sheet.

If you have only one HTML document, this might not make much sense, but if you have hundreds or thousands of documents, changing one (or a few) style sheets is much easier than changing all the documents.

I cannot stress enough the importance of keeping your content and presentation separate.

Contents

  1. A CSS Example
  2. CSS Syntax
  3. Some CSS Properties
    1. Hexadecimal
    2. RGB
  4. Conclusion
  5. Playing Around
  6. References

A CSS Example

Let’s update the Hello World! example to style “Hello World!” so it is rendered in yellow on a blue background:

The first things you should notice are:

  1. that there is a new HTML tag: style1

  2. it goes in the head section of the document. This is because it is meta-information for the document (how to render it) and not content.

    You can put it in the body section, but this can cause problems. The HTML document is processed as it is being read. Everything in the head is processed first. Content is rendered as it is being read from the body section. When you place styles in the body, they will be applied when they are encountered. If (as an extreme example), you put the styles at the bottom of the body, the content will be first rendered using the default styling and then the new styling will be applied to it. For large or complex documents, or on slow systems this may result in the user noticing the layout or appearance changing – which is annoying.

  3. the syntax for CSS (the stuff between the style) tags doesn’t look anything like HTML

The style tag has a number of attributes, one of which is type. For HTML5, there is only text/css.2 It is not necessary to include it (since the default is type/css), but you might sometimes encounter it written as:

CSS Syntax

All CSS elements have the following syntax (form):

Each style begins with a selector. For now, simply consider this to be the name of the HTML element without the angle brackets (< and >). In the example above, we styled the paragraph element:

The style is applied to all matching HTML elements. This means that all paragraphs will be rendered with yellow text on a blue background.

The selector is followed by an opening curly brace ({). The element properties to be styled go between the curly braces (there are hundreds of properties).

Each property name is followed by a colon (:), which is followed by a value, which is followed by a semicolon (;). The semicolon is important – it indicates the end of the property definition. If you omit it, your CSS style will (probably) not work.3, this is because, like HTML, unnecessary white space doesn’t matter. So the following are equivalent:

Finally, the entire style definition ends with a closing curly brace (}).

The value a property takes depends on the property.

Some CSS Properties

To begin with, we will only play with the two properties introduced so far:

  • color: this sets the colour4 of the text
  • background-color: this sets the background colour of the element

Each of them takes a colour as a value. The colour can be specified as a name (there are 147 different named colours) or as a number.

When represented as a number, colours can take a number of forms, but, for now, we will only consider the following two:

  • hexadecimal (this is the most common)
  • rgb (short for Red-Green-Blue)

Hexadecimal

Examples of colours in hexadecimal notation (using the same colours as in the previous example):

Hexadecimal notation is very common and it is worth learning.

We are most familiar with decimal which is a base 10 positional number system composed of the 10 digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.

The first group is called units, the second group is 10s of units, the third group is 10s of 10s (or hundreds):

  1 - 1 unit
 12 - 1 ten and 2 units
123 - 1 hundred, 2 tens and 3 units

Hexadecimal is a similar positional system, except that it is base 16 and composed of the 16 digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

The first group is units (0 to F = 0 to 15 in decimal), the second group is 16s of units (10 in hexadecimal is equal to 16 in decimal), the third group is 16s of 16s (or 256 in decimal):

  1 - 1 unit
 12 - 1 16 and 2 units (18 in decimal)
123 - 1 256 and 2 16s and 3 units (291 in decimal)

In general, you don’t need to be able to count more than FF (255 in decimal) in hexadecimal.

To distinguish hexadecimal numbers from decimal numbers, they are prefixed with the pound (#) sign:

#33 = 51 decimal
#0A = 10 decimal
#FE = 254 decimal

Colours in hexadecimal are written in the form #RRGGBB, the R stands for the red colour, G for the green colour, B for the blue colour. The colours take a value between #00 (minimum colour value) and #FF (maximum colour value). Consider the following:

#000000 - black
#FFFFFF - white
#FF0000 - maximum red value
#00FF00 - maximum green value
#0000FF - maximum blue value
#FFFF00 - maximum red and green values (yellow)
#FF00FF - maximum red and blue values (purple)
#00FFFF - maximum green and blue values (cyan)
#F0F8FF - a pale blue (aliceblue)

Most of the time, colours are given in hexadecimal.

There is a shorthand version of this notation: you can write the colour in the form #RGB if the two digits of each colour are the same, so #FFF is the same as #FFFFFF, #707 is the same as #770077

RGB

Another way to represent colours is to use RGB values (Red-Green-Blue). These are represented in decimal notation instead of hexadecimal (using the same example as above):

In hexadecimal, individual colour values go from #00 to #FF. In RGB, individual colour values go from 0 to 255.

You need to use the RGB function to convert RGB values into a value the property can use.

The same colour examples from above written using RGB:

RGB(0, 0, 0) - black
RGB(255, 255, 255) - white
RGB(255, 0, 0) - maximum red value
RGB(0, 255, 0) - maximum green value
RGB(0, 0, 255) - maximum blue value
RGB(255, 255, 0) - maximum red and green values (yellow)
RGB(255, 0, 255) - maximum red and blue values (purple)
RGB(0, 255, 255) - maximum green and blue values (cyan)
RGB(240, 248, 255) - a pale blue (aliceblue)

The hexadecimal notation is much more compact.

Conclusion

  1. HTML provides the structure for your document. CSS provides the styling: layout, colours, typography, etc.
  2. Styling can be placed in the head section of your document.
  3. Because document processing is linear, placing styling in the body section of your document will cause the web browser (user-agent) to start with the default styling and then update with the new styling – that may cause an annoying page refresh.
  4. Styling appears between style tags.
  5. CSS syntax is different from HTML syntax.
  6. CSS styling begins with a selector – in this section, we have only used HTML tag names as selectors.
  7. The style applies to all elements matching the selector. If we style the p tag, all p elements in the document will be styled.

  8. All CSS styling consists of a list of properties followed by a value for that property:

  9. Each element in the list must be terminated with a semicolon (;).
  10. The color property sets the colour of the text contained by the HTML tags. It takes a colour value, which can be:
    1. A named colour (e.g. aliceblue)
    2. A hexadecimal colour value (e.g. #F0F8FF)
    3. An RGB colour value (e.g. RGB(240, 248, 255))
  11. The background-color property sets the colour of the background of the HTML element. It takes a colour value, which can be:
    1. A named colour (e.g. yellow)
    2. A hexadecimal colour value (e.g. #FFFF00)
    3. An RGB colour value (e.g. RGB(255, 255, 0))
  12. All selectors, property names, hexadecimal colours are case-insensitive.
  13. The RGB function is case-insensitive. You can use rgb instead.
  14. Hexadecimal colours are more common and more compact than RGB colours.

  15. Hexadecimal colours can be written using the shorter form #RGB if each of the colour components consists of doubled values. e.g. #11FF44 can be written as #1F4.

These are 16 basic, named CSS colours:

  1.   black
  2.   silver
  3.   gray
  4.   white
  5.   maroon
  6.   red
  7.   purple
  8.   fuchsia
  9.   green
  10.   lime
  11.   olive
  12.   yellow
  13.   navy
  14.   blue
  15.   teal
  16.   aqua

Playing Around

The best way to learn is to play around with what you have learned.

This tutorial is a very basic introduction to CSS. Two very important concepts we will cover in the next few tutorials are HTML flow and the CSS Box Model.

I recommend you create a webpage using the tags you have learned so far. I strongly recommend styling different background colours for each element (it will make them stand out better) and see what is happening as you intermingle and nest various elements.

You can use the following sample code as a starting point:

  • Style one element at a time and see what happens.
  • Then style multiple elements and see what happens.
  • Try using named colours, hexadecimal, and RGB colours.
  • Style only the color.
  • Style only the background-color.
  • Style the color of an enclosing element (parent) and style the background-color of an enclosed element (child)

References

  1. List of all 147 named CSS colours
  2. Color property
  3. Background-color property

  1. For simplicity, we include the CSS in our HTML files. A future tutorial will show you how to place the CSS in its own separate file.↩

  2. For xml, there is text/xsl. However, we are not covering xml in this tutorial series.↩

  3. The semicolon is optional for the last property in a style definition because the closing curly brace marks the end of the style. Even so, it is always better to include it.↩

  4. Notice that property names use American spelling, not Canadian or British spelling.↩

Published

Do not republish this article, in whole or in part. You may publish a short excerpt and provide a link back to the original article.