www.RickBull.com > tutorials > Cascading Style Sheets > Basics of Style
Jump to: Contents | Part 1 | Part 2 | Part 3 | Answers | FAQ

The Basics

Basic Usage

CSS are actually very easy to use. You first address the element or tag that you want to apply the style to. This, for instance, could be all paragraph tags (<p>). You then add a pair of opening and closing braces ({ and } respectively), and within these you refer to the property you want to affect (for instance text-align would address the alignment of text). Finally you set the value of the property with a colon (:) followed by the value, and end with a semi-colon (:center;). So put all this together and it could look something like this:

p { text-align:center; }

Pretty simple I am sure you will agree. You may also add spaces, new-lines, tabs, etc. to make you code more readable. So for instance, the following code is the same as the code above:

p {
  text-align : center;

Formatting your code something like the above example can add greatly to the readability of your code, especially when you have several definitions. For example, I am sure you will agree the following code:

p {
  background: transparent;
  border: 1px solid black;
  color: red;
  text-align: center;

…is more readable than this code:

p { background: transparent; border: 1px solid black; color: red; text-align: center;}

You should find it easier to identify where one property ends, and another begins (by new-lines in this case). Although when you are using style inline you will probably use it like in the second example anyway, but we will come to that in a minute.


So that is how to write some basic CSS commands, but how do you implement it? Well, there are three main ways to do it:

…each of which is explained below:


Using style inline is probably the easiest to start off with as it is used in a similar manner to other HTML attributes. You simply add the attribute <style> to the tag you want to affect:

<p style="text-align: center;">Some paragraph text</p>

That will make the text Some paragraph text be aligned centre.


You can embed all of your commands in a special <style> tag (not attribute) in the <head> section of your HTML document:

  <style type="text/css"><!--
    p {
      text-align: center;

That would affect all paragraph tags on your page. You can affect only particular tags of your choosing, but I will show you how to do that later.

Now you may have noticed that there are comment tags (<!-- & -->) in between the <style> and </style> tags. The reason for that is that some (very) old browsers, or non-visual browsers do not understand CSS commands, and some of them will simply output all of the text within the <style> and </style> tags to the screen. And that is not exactly desirable, is it? So we add comments around the style definitions, and all browsers that understand CSS simply ignore the comment tags, and read the content within, and old browsers treat it as a comment and read nothing until they find the ending tag (-->).
Note: You should only use the comments when you are defining style in the <head> of your document, nowhere else.


This is, in most cases at least, the best way of using style. You define all of your commands in a separate text file (usually with the extension of css), then import it into your HTML document using the <link> element in the <head> of your document. So if, for example, you had all of your CSS commands in a file named style.css, you could import it into your document like so:

  <link href="style.css" rel="stylesheet" type="text/css" />

Then all of the commands in that CSS file would affect all of the HTML document in question. There are several advantages of this method, which are outlined below:


Comments are text in your CSS code that the browser will ignore. This is useful for documenting why you have done something, and can be a great use when you come back to edit your code months later. To include comments you simply encase the text within /* and */. They may span several lines, and you can also use them to hide parts of your code (rather than just comments to whoever is reading your code) from the browser (this may be useful, for example, if you are having trouble, and want to stop part of your CSS from functioning temporarily):

p {
  text-align: right; /*Make the text align to the right*/
  border:1px dashed black; /*A black dashed line 
                             around the paragraph*/
  /*float: left;*/

Important Notes

Before we finish this section I should mention a couple of important things:

  1. Valid Markup - It is important to use valid markup with both your CSS files and your HTML files, since conforming browsers (i.e. the ones doing it correctly) should ignore anything they do not understand (which means your mistakes too). Always check your CSS files with the W3C's CSS validator, and check your HTML files with their HTML validator.
  2. Always make sure you have a Document Type Definition (DTD) at the top of your HTML pages, as many browsers either ignore your CSS totally, or revert to a buggy mode when people were not using CSS and HTML properly. Some valid DTDs include:
    HTML 4.01:
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    XHTML 1.0:
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. Make sure that you include the following <meta> tag in your documents:
    <meta http-equiv="Content-Style-Type" content="text/css" />
    Although it is not mandatory you should include it to tell the browser that you are using CSS in your documents.


So now you have learnt the basics of how to use CSS, you will probably want to test out your new-found skill. So here are few exercises you can try your hand at:

  1. Experiment with the following CSS attributes/properties, using inline style:
    1. Attribute: text-align;
      Properties: left | right | center | justify
    2. Attribute: background-color;
      Properties: red | #ff00ff | transparent
    3. Attribute: color;
      Properties: blue | #00ff00 | rgb(0,0,0)
  2. Modify the following code (using the inline method) to make the first paragraph centre aligned, the second paragraph left aligned with blue fore colour, and red back colour, and the third paragraph right aligned with black fore colour and transparent back-colour:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <html xml:lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta name="language" content="en" />
        <title>CSS Exercise</title>
        <p>This is Paragraph number 1.
        It should be <strong>center aligned</strong>.</p>
        <p>This is Paragraph number 2.
        It should be <strong>left aligned with blue fore colour,
        and red back colour</strong>.</p>
        <p>This is Paragraph number 3.
        It should be <strong>right aligned with black fore colour
        and transparent back-colour</strong>.</p>
View Answers

All tutorials and content written by Rick Bull unless otherwise stated
Page's last update: Friday, 15th January 2010; 12:53:39 GMT +0000
Official CSS Level 1 documentation: http://www.w3.org/TR/REC-CSS1
Official CSS Level 2 documentation: http://www.w3.org/TR/REC-CSS2
Top of the page