Basic Knowledge About CSS To Make A Beautiful Web Design.

Posted: 19 May 2010 04:53 AM PDT

CSS has been found mostly used in proper web designing. It has been so long that CSS has been used in every web designing field. It has been a better replacement for the tables in HTML.
CSS can be coded along with HTML Programs. However, it is commonly used as a separate file, and called upon by the HTML files.

In this tutorial you’ll learn the basic method of coding in CSS.

To start, let’s create a basic HTML document:

My Test Page 1

Save this as test1.html. Open it to check how it looks. Since it is just a basic HTML coding you’ll see it some what un-formatted raw document with “My Test Page 1” written in it along with the title “My Test Page”.

Now let me show you how it looks when you do some CSS coding there.

The above CSS code makes the body of this page to have a margin of 0, that means no spacing along the sites of your webpage. The padding is set to 0, that means no padding. Color of the text is set to #FF0000(red) while background color is set to #000(black). While the default font family is Arial with 100% size.

Now the question is, where does the above CSS script must lie to take in action?

And the answer is inside tag.

See the code example below.

Test Page 1

From all of the available CSS codes, we applied margin, padding, color, background-color, font-family, font-size to the body tag.

Here is the magic done after adding CSS code:

Basic principles of CSS coding:

When you are codding in CSS you’ll have to determine it first that for which thing the above CSS will work?

All the CSS coding will be useless when you don’t have title for it.

For example, we began with body { and finally ended with another braces }.

This means that any code lies between body {…………} will be applied to tag named .

Well it was for the specific tag like ,

etc. You can also title it with . (dot). .titleofcode{………….} will be used for class. It is brought to work by using class parameter in specific tag, especially division tag (

).

For example,

.header {
background-color: #000;
color: #FFF;
font-size: 24pt;
font-weight: bold;
padding: 5px;
border-bottom: 1px solid #000;
}


The above code can be brought to use by adding class parameter in

tag.

Test Page 1

The .header CSS code will be applied to the division or part of HTML content where class parameter, header, is defined.

Hope you got general ideas. Next time I’ll be here with the full tutorial to create a beautiful CSS based website.