Learn CSS Easily (CSS Tutorial)

What is CSS?

CSS stands for Cascading Style Sheets

————————————

Why we need CSS?

CSS provides reusability,
Giving style capabilities in HTML are quite limited.
Also, with the use of an external style sheet, you are able to change you entire site style,
by only editing one single file!

————————————

Ways to use the CSS in Your Document –

Inline Style

<table style=”border:1px solid black; float:left;”>
    <tr><td>1</td></tr>
</table>

Internal Stylesheet

<head>
<style type=”text/css”>
li {color:black;}
p {padding:20px;}
body {background:black;}
</style>
</head>

External Style Sheet

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

————————————

Which CSS has highest Priority?

1) Inline style (inside an HTML element)
2) Internal style sheet (in the head section)
3) External style sheet
4) Browser default

————————————

The format for writting the CSS

SELECTOR { PROPERTY: VALUE; PROPERTY: VALUE; }

Selector : HTML element you want to style.
Property : CSS attribute you want to change
Value : represents the value of the specified property.

————————————
How to write?

For ex. :
you want to write CSS for a Textbox :

<input id=”tbox_1″ type=”textbox” name=”myname” value=”myname” />

What is “class” stands here ?
class tells the HTML which style it has to take from CSS.

.tbox
{
border:1px solid black;
}

We can also use ID of the element for giving applying CSS

#tbox_1
{
border:1px solid black;
}

————————————

We can define CSS in more specific way as

Ex.
1) If we want change the border of the DIV Elements having class “center_div” only

We can Write as

div.center_div
{
border:1px solid red;
}

2) If we want to style a “li” insude a “ul” havin class “menu”

We can write as

ul.menu li
{
float:left;
margin:2px 4px 2px 4px;
}

————————————

Cooment in CSS

/* this way you can comment any text */

————————————

In next post we will learn about the CSS tags.

Thanks,
Nikhil, Sr. Web Designer, Pune (MH, INDIA)

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: