The Syntax of CSS

It is important that before learning CSS you understand the syntax. This is the general make up of CSS. It consists of the selector, property and the value.

What does CSS look like ?

CSS can be represented simply like this:

p <----- The selector
{ 
font-weight: bold; <----- The property and value
}

First you start with the selector which sets the element you wish to apply a particular style or set of styles to. It can be a paragraph, a heading or any other tag.

Next, you open the left squiggly bracket ( { ) and specify the property.

The property is that specific thing you wish to style. You may want to style the background color ( background-color ), or the weight of the text ( font-weight ) for the specific selector. There are a number of other properties which will be discussed in the lessons to follow.

Next is a colon ( : ) followed by a value which should relate to the type of property you specfied.

After you have finished this you end with a semi-olon ( ; ). The final step after all the properties and values have been specified is to close with a right squiggly bracket ( } ) and that's it.

In the example above you can see that the selector chosen for illustration was the paragraph. The property and value specified corresponded to bold text. So the text between any paragraph encountered should be bold.

One final note is that multiple properties can be specified for a given selector. Such an example is shown below:

h4
{ 
text-decoration: underline; <----- underlines the level 4 heading
font-variant: small-caps;  <-----  small caps formatting to the level 4 heading
}

That's pretty much it for the syntax. In the next lesson we will discuss the different types of style sheets that can be used.

Previous Lesson - Introduction Next Lesson - Stylesheet Types