Tutorial search

Tutorials
Stuff
Affiliates

Photoshop Templates

Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

CSS Syntax and CSS Properties - CSS tutorial

In this tutorial you will learn more about the CSS syntax, it's properties and how to apply CSS to a HTML document
Category: CSS tutorials - Difficulty:


CSS Syntax

If you are already familiar with the HTML properties, you won’t have a hard time learning CSS as they generally share many similar codes.

Here is an example:

HTML command: <body bgcolor=”#FF0000”>

CSS command: body {background-color: #FF0000;}

They look pretty similar, right? And there’s only little obvious difference. In the example, for the HTML command, everything is put inside the angle brackets while for the CSS command, the property and value are surrounded by curly brackets but the selector is left outside the brackets. Notice that the value in the CSS command does not require quotation marks. An exception is when the value has multiple words. Another obvious difference is that with the CSS command, “background color” is spelled out while in HTML command, “background” is abbreviated.

Cascading Style Sheets syntax, basically, is made up of three basic parts:

  • Selector – this is normally what defines an HTML element or tag.
  • Property – this is the attribute you adjust, control or modify.
  • Value – this is what defines a property.

You type the syntax this way: Selector {property: value}

Notice that the property and value are within curly braces and they are separated by a colon.

p {color: red}

You have to take note that if the value has multiple words; you need to put quotation marks around it.

p {font-family: “times new roman”}

And if you are going to specify more than one property, a semicolon should be placed in between the properties to separate them.

p {text-align: left; color: blue}

Many web developers type it in a more readable way like this:

p
{
text-align: right;
color: red;
font-family: “bookman old style”
}

Notice how you can easily read each property when arranged this way.