Home Karmen For You Tuts Games xoxo updates Res Listed Credits LinkMe Cbox


If you are really new to web-designing and wondering what CSS is.. and what does it do. How do you work with it and all. This is probably what you should read. The following tutorial will teach you the basics of CSS.


Requirements: Notepad.
¤ CSS is abbreviation for Cascading Style Sheets. CSS is a mechanism by which you can control some of the visual elements of your webpage easily. It defines the style of a webpage. The style includes the type, color,size of fonts. The color of scrollbar. The backgrounds, link effects, define table style, header style and much more.
¤ You can control the style of your webpage by the following 2 methods.
» Inline Style Sheets: Define the style with the html code of your webpage. This is done the same way as external style sheets except that here you put the same style code between the and tags of each page you have on your website (every page that needs the same style)

» External Style Sheets: Making a .css file and defining all the elements you ant to in it, linking that single file to every page on your site within the and tags of the pages.*NOTE remove the first tag (/).
This is quite obvious which one of these methods is better and easier. The external style sheets are most popular these days and is my favorite. Why? Because its easier to link to a single css file to all your pages than to put the whole style code on every page. You just change the css file/ elements when you change the layout. In this tutorial I will be teaching you CSS codings. You can put these together and make a css file or you can put these codes within the html code of the webpage.
Note: Css is not supported by al lthe browsers so make sure your page is viewabale even without the css coding.
The basics » A style element has two parts » A selector & a declaration. The declarations further has 2 parts, the property and the value. The selectors can be dvidied into classes, for now don't worry about that too much. To understand what are these have a look at the example css coding below:

In the above code, "BODY" is the selector, the code between { and } is all declaration. Read the above code and try to understand what the declaration is defining. Yes, it defines the font-size,family(face),color, the background color of webpage and the properties of scrollbar. Here "font-size" is an element property and "11px" is its value. The declarations are seperated using colons : and they end with semicolons ;
Classes let you create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such:
.selector {property 1: value 1; property 2: value 2}

In simple words, the class helps in defining a different style to specific parts of webpage. Like a paragraph or a table, you can specify their styles using the classes.
Example 1:
P {font-family: Trebuchet MS; font-size: 10pt;} H1 {font-family: Tahoma; font-size: 40pt;} H2 {font-family: Verdana; font-size: 20pt;} .one {color: red} .two {color: green} .three {color: blue}

You can use this style definition on your webpage :

Example 2:

In the above code "head" is the class. This can be used to define the style of paragrah heading with the Html coding.
For Example: The above css code used in html document:

This will generate a header with the style as defined in the css. That is » the color of font will be black (#000000), the size will be 13 px, letter spacing will be of 1 px, the border of header will be solid,white (#FFFFFF) and of 1px. the text will be aligned in the center and the font will be bold. The table padding will be 0px.
This was the introduction to CSS. To learn how to use the CSS on your webpage read the specific tutorials. They teach you how to create external style sheets and link them to your page also how to use Inline css.