Introduction to CSS : a Beginners Guide to Web World

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 –
1) Inline Style
2) Internal Stylesheet
3) External Stylesheet

1) Inline Style
<table style=”border:1px solid black; float:left;”>
<tr><td>1</td></tr>
</table>
2) Internal Stylesheet

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

<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″ class=”tbox” 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 applying CSS
#tbox_1 { border:1px solid black; }

We can also use html tag itself (by using its attribute – optional) for applying CSS
input { border:1px solid black; }
– this style will be applied to all <input> elements regardless of its type
input [type=”text”] { border:1px solid black; }

– this style will be applied to all <input> elements having attribute type=”text”

Some other ways
input .tbox { border:1px solid black; }
– this style will be applied to all <input> elements having class=”tbox”
input #tbox_1 { border:1px solid black; }
– this style will be applied to <input>  element having id=”tbox_1″
———————————————-
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 */
———————————————-

Hope this tutorial will help you in learning CSS Basic.
In next post we will learn about the css tags in detail.

Thanks,
Nikhil U
https://designikx.wordpress.com

By | 2012-08-07T19:31:49+00:00 August 7th, 2012|Uncategorized|0 Comments

About the Author:

Leave A Comment