Monday, October 25, 2010

CSS Beginning

CSS Beginning 

In this post i going to say about how to write CSS in html page and Basic in CSS?

First CSS(Cascade Style Sheet), In the name implies its give style for HTML page. In my experience i face lot of alignment problems and cant do different tasks. By using CSS only i did that. Now most of the websites are creating using CSS only. we can do lot of thinks with images using CSS.

how to start CSS in HTML?
After the open the HTML tag and head tag. Then type like this



In style tag we have to mention the type then only browser can identify this is CSS.
In between these tag we are going to write CSS.

Mainly there two concepts in CSS ID and Class.

ID and CLASS both is same as function and class in JAVA. its very easy concept to understand. ID is unique for each HTML tag. Below example is a paragraph tag you can set any name to ID.

eg : <p id="paragraph">


By using this ID you can give properties to that paragraph tag.
Before writing in CSS you have note one for ID you have mention "#" before ID name and for class ".(dot)".

Now we can set alignment for paragraph, text decoration, etc.
<style type="text/css">
#paragraph
{
   margin:20px 20px 20px 20px;
}
</style>

Above i set margin for paragraph.

margin:top right bottom left;
margin:20px 20px 20px 20px;

you can give alignment separately also.

margin-left:20px;
margin-right:20px; as goes.

as like this you can set alignment for any HTML tag. Then Class is like the same as ID. but one difference is ID unique for each HTML. In class you can set same property to more no.of tags.

Same Example : <p class="paragraph"> </p>
<input type="text" class="paragraph">

About i created one paragraph and textbox both has same alignment.
<style type="text/css">
.paragraph
{
   margin:20px 20px 20px 20px;

}

</style>

In next post i will share my experience more keep watch thanks.

If you want materials for CSS and HTML Download Link :

http://rapidshare.com/files/424241242OReilly.Head.First.HTMLwithCSSXHTML_Asim_Biju.pdf

http://hotfile.com/dl/75849213/c61356a/Wrox_-_Beginning_CSS_-_Cascading_Style_Sheets_for_Web_Design.pdf.html

No comments:

Post a Comment