Laying Out a CSS

As in any document layout won't really affect its content. It does, however, have a big impact on the accessibility of the information a document contains.

While a computer doesn't care about such things careful layout will make it much easier for you to work with your css.

There is no "right way" to layout your pages but it is generally accepted that individual commands will begin on a new line and that they will be arranged so that similar elements will be grouped together.

Achieving a well ordered page can be assisted with the use of comments within your document. A comment will have no affect the way your page is displayed.

A comment looks like this:

/* Make any comment here */

Some people also find it helpful to use the comment line as a ruler to separate sections e.g..

/*General Commands ------------------------------------*/
body { background-color: #000; }
p {color: #fff; }
table { padding: 0 3px 4px 0; }
/*General Commands End---------------------------------*/
 
/*Navigation Commands ------------------------------------*/
a hover { color: ......

Valid XHTML 1.0 Transitional

CSS Syntax

The syntax of computer languages is almost always completely inflexible. The formatting and punctuation of cascading style sheets is no different. Unlike most computer languages though, the number of rules is very small which makes it comparatively easy to learn and implement.

  1. Open your .css file, which should still be just a blank document, and at the top of the document insert the following line exactly as it appears below.

    body { background-color: #000000 }

    This step uses the first piece of syntax you will need to replicate when styling your pages using a css.

    All css commands follow the form:

    tag { property: value }

  2. Save your file then open a browser and use it to view your html file by clicking file→ open→ browse and then locating your file).

    Did your page go black? If so; congratulations you successfully called your .css file and it made your page's background black. Unfortunately as the text is also black you now can't read it (click edit→ select all to convince yourself the text is still there).

    If it didn't, and assuming you've correctly copied the css command, then check one or more of the following:

    1. that you spelt colour without the "u" i.e. color
    2. that your .css file name matches the calling line in your html document.
    3. that your .css file and html are in the same folder, or, if you've used a your own file structure for saving your documents, that the path matches the actual location you've specified.
    4. The css file has been saved with the .css extension.
  3. Go back to your .css file and insert a line beneath the one specifying background colour. Insert the following line so that your .css file looks like this:

    body { background-color: #000;
    color: #fff;
    }

    This step introduces the second important piece of syntax. By placing a semi-colon after a property: value set, it possible to style multiple aspects of a single tag e.g. size, font and colo(u)r.

    At this point you might want to invest some time in considering the layout for your commands. There is value in developing a system that allows you to easily pinpoint a given command.

  4. Use a browser to open your html document. It should now be a black page with white writing. If it isn't, and you were able to produce a black screen in the previous step, check you css for a typo. Remember your syntax must match exactly.

If you have successfully completed those two examples you have learned almost all of the syntax you need to be aware of to get started with css.

Next section: Block Level Elements →