CSS syntax

Home - Tutorials - CSS tutorials

In this tutorial I will show you how to use CSS in your projects to make it more flexible.

Tutorial info:

Bookmark CSS syntax

Step 1 - The CSS syntax

CSS syntax

CSS syntax is quite simple, you only need to comply some basic rules. First in this article we will focus on the basic CSS class definition rules and then I will show you how you can integrate your new CSS rules into your website code.

The general CSS syntax is the following:

        selector { property : value }

and if you define more properties then you can use a format like this:

        selector { property1 : value1; property2 : value2; }

So if you want to change your links color and want to remove underline you can do the following. For better readability you can put every property in a new line:

Code: 
a {
    color: #aabbcc;
    text-decoration: none;
}
 
CSS F1

You can also change more selectors property at once separating them with commas.

Code: 
h1, h2, h3 {
    color: #aabbcc;
}
 
CSS F1

It can happen that you want to change a property only inside an other container. For example you only want to change your links inside a table. You can do this by define first your container and then the selector as here:

Code: 
table a {
    color: #00aa00;	
}
CSS F1

And of course you can define more style for an element by using class selectors. With this technique you can define for example different link style for your navigation area, table data and footer links.

Code: 
a.navi {
    color: #0000ff;
}
 
a.footer {
    color: #ffff00;
}
 
CSS F1

Tags: css syntax, css basics, css syntax basics

©2007 CSS F1 - Help in CSS, get CSS code, scripts, tutorials!