CSS Tutorial


CSS Structure


The CSS structure or syntax is made up of three parts: a selector, a property and a value:


selector {property: value}


The selector is the HTML element / tag for which you want to define the style, the property is the attribute you want to change, and each property is passed with the value. The property and value are separated by a colon, and surrounded by curly braces:


For example

p {font-family: sans serif;}


Furthur the selector can have different classes, this way we can define different looks for the same element.


For example

p.blue {
font-family: sans serif;
color : blue;
}

p.red {
font-family: sans serif;
color : red;
}

The respective HTML code will be

<P class=blue>The text here will be in blue color</P>

<P class=red>The text here will be in red color</P>



We can also define our own class which can be declared without the associated classes, the classes declared this way can be used with any element


For example

.blue {
font-family: sans serif;
color : blue;
}

The respective HTML code will be

<P class=blue>The text here will be in blue color</P>




Class and Id
Class : Classes allow you to define a style which can be applied to multiple elements on your page using the element attribute class. Classes are defined using . operator and are declared using the class attribute of the element


For example

.redtext {
color: red;
}

.blacktext {
color: black;
}

The respective HTML code will be

<P class=redtext>The text here will be in red color</P>

<P class=blacktext>The text here will be in black color</P>


Id : Ids are similar to classes except they work on a per element basis and is used to define a certain style for a single specific element. They can not be used by multiple tags on the same page like we do for classes. Ids are defined using # operator and are declared using the id attribute of the element.


For example

#redtext {
color: #800000;
}

<P id=redtext>The text here will be in red color</P>


Span and Div

The SPAN tag is an inline element, which means it works with text or items that are on the same line, similar to the B, bold tag.


For example

.blue {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}

The respective HTML code will be

<SPAN class="blue">This text uses span tag and is inline with the other text</SPAN>. This text is after the span tag is closed.

On the browser it will look like

This text uses span tag and is inline with the other text.This text is after the span tag is closed.



The DIV tag is a block element, which means it works with blocks of text or items, similar to the P, paragraph tag.


For example

.blue {
font-family: arial, verdana, sans-serif;
font-weight: bold;
}

The respective HTML code will be

<DIV class=blue>This text uses div tag and is not inline with the other text</DIV>. This text is after the div tag is closed.

On the browser it will look like

This text uses div tag and is not inline with the other text.
This text is after the div tag is closed.



Note : Older browsers, that is to say before Netscape 4.0 and Internet Explorer 4.0, either don't support CSS at all or do so inconsistently



Back - CSS Tutorial : Introduction to CSS Next - CSS Tutorial : Working with Color Property