How Does CSS Work?

by eturo

In this tutorial you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document.

Many of the properties used in CSS are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example.

The basic CSS syntax

 

Let's say we want a nice red color as the background of a webpage:

Using HTML we could have done it like this:

body bgcolor="#FF0000"

With CSS the same result can be achieved like this:

body {background-color: #FF0000;}

As you will note, the codes are more or less identical for HTML and CSS. 

The above example also shows you the fundamental CSS model:

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are seperated with a colon and contained within curly brackets. Multiple properties are seperated by a semicolon. Multiple values within a property are seperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

body

{

background: #eeeeee;

font-family: "Trebuchet MS", Verdana, Arial, serif;

}

Inheritance

When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.

For example, a font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

body {font-family: Verdana, serif;}

Now all text within the (X)HTML file will be set to Verdana.

If you wanted to style certain text with another font, like an h1 or a paragraph then you could do the following.

h1 {font-family: Georgia, sans-serif;}

p {font-family: Tahoma, serif;}

Now all tags within the file will be set to Georgia and all tags are set to Tahoma, leaving text within other elements unchanged from the body declaration of Verdana.

Combining Selectors

You can combine elements within one selector in the following fashion.

h1, h2, h3, h4, h5, h6

{

color: #009900;

font-family: Georgia, sans-serif;

}

Comment tags

Comments can be used to explain why you added certain selectors within your css file. So as to help others who may see your file, or to help you remember what you we're thinking at a later date. You can add comments that will be ignored by browsers in the following manner.

/* This is a comment in CSS*/

                                   

You will note that it begins with a / (forward slash) and than an * (asterisks) then the comment, then the closing tag which is just backward from the opening tag * (asterisks) then the / (forward slash).

In HTML, you can insert comments by using this syntax: