Write your first CSS Script

by Saad Irfan

Css is style language tool which is used to add layout to the websites and give it awesome look with out working too much. Before designing any website we concentrate on company logo colors or clients or our own choice. What if after some times logo colors changes? Do we have to redesign all website? No way, because it can take hell of time in case we having large scale website. CSS is the power which actually helps us to overcome so many problems. Such as changing heading color, size, font any thing any time, all we have to do is to edit one file. And rest of them will be following it. This thing called CSS. Writing CSS on basic level is easy but it becomes so hard to write when you to make it for large scale website. Because during the process of writing CSS for any website, you have to concentrate that during writing codes it should maintain the rest of site’s structure in proper form.

The main problem which we have to face mostly is that. It doesn’t look so familiar on every browser. Some times you will have some different results in different browser. So that mean during preparing css for your site. You should keep checking your site test versions on some different browsers, such as MS Internet Explorer and Mozilla Firefox.

Writing CSS has become easy nowadays because with using of CSS software you can write any css file with no time for small website. But again the point comes, what kind of site structure you wanna create. Will you be able to make it like your wish? The answer is maybe not at start. But once you have good command in CSS. Then it becomes quite easy. All you need is time and some tutorial help. Don’t rush. Having complete command is not so that easy because its commands get increase to you by watching other sites. This is good thing. There are some commands which only run in IE7. Well those are very advance ones. But that doesn’t means that you cant make it your own way.
I will recommend you to start write a simple CSS file for single page. Then link it with some other pages. Try to use quite easy style first. Then step by step move to advance ones.
Using software like Dreamweaver made you work so easy that you can start editing readymade basic templates given in package. However you can find it here on this site as well.
First thing which you should know is to understand the difference of DIV and Class. Making it easy for you to understand, understand this. In div you decide the layout structure of box in which you are about to put your text. The main advantage of it will be that, after starting div tag you will keep writing thing and it will stay in that box. Means it will obey its all rules.

Starting Tag:

<div id=”content”>

Ending Tag:

</div>

These are codes which you will write in your webpage.

<div id=”content”> Welcome this my message</div>

And the css code will be that:

#content{

width: 500px;
height: 250px;
color: #6633FF;
text-decoration: underline;
font-size :12px;
font-family: Arial, Helvetica, sans-serif;
}

Just take a look on this coding. Don’t you find it easy to understand?  (#content) defines div Identity.

There are heaps of commands which makes your work looking awesome. Such as

border: 1px solid #666666;

it will make auto border on every side of your div. that’s not all to can put border on your choice side as well. Like

border-bottom: 1px solid #666666;
Decides for bottom boder
And so on

border-top: 1px solid #666666;

border-left: 1px solid #666666;

border-right: 1px solid #666666;

Now you should understand what you have just mentioned. 1px tells the size of it. means. Only 1pixel. And in same way you can put 2px. 4px. 12px. Any size.
(Solid) tells the style of boder. Means plain. You can use dashed as well.

border: 1px dashed #666666;

#666666 is the color code here. You can chose any color of your choice and paste its code here
Now we quickly jump to some other usual commands.

background-color: #006666 ( decides div or class background color )
color #CC6600; ( font color)
font-family:Arial, Helvetica, sans-serif; ( font family )

others are:

font-family:”Times New Roman”, Times, serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-family:”Courier New”, Courier, monospace;.

font-size:14px; ( decides font size ) means 14 pixels

text-decoration:underline; ( it will keep your text underline)
text-decoration:none; ( it will remove text decoration )

Some times when we use our div. and type text in boxes, the text mix with borders, to keep it with some distance from borders, we use this command

padding: 12px;

it will made padding command in every side. In same way we can specify it for our one side

padding-left: 10px;

Understanding the class after studying that div case is not difficult. Class is the power which allows you to change some thing within div. let suppose after writing div codes. When you get start you cant change the font style with in it. like giving different colors to it. Class make it easy .

How does it help to resolve the above mentioned problem…CSS is a style language or tool which is used to add the layout to the website. Now I’ll explain step by step how we can save the time if we have to edit the look of the text
on all the pages. There are basically three methods to do the same.

<div id=”content”> Welcome this my message</div>

When we mentioned our div tags, the whole text with in it will be the same, which was defined in its property back in css file.

<div id=”content”> Welcome this my<span> message</span></div>

The word (message) is in class. It will obey those properties which have mentioned for it. And will not irritate other things in div. focus:

<span> message</span>.

Now the point comes. How to write class properties?
Its same as we wrote div codes. Just have a look.

.myhighlight {
color:#CC6600;
text-decoration:underline;
}

You made difference just by writing ( .myhighlight ) rather then (  #myhighlight ).

Div actually helps you make basic structure of site. with specific lengths and backgroung colors.
You can put background images in div or class with so many properties. Such as

background: #FFFFF url(img/bg.gif) repeat-x;

Here it tells if picture length is small then repeat it in x-axis. It will not repeat it in y-axis
#FFFFF is color code here, which tells that of pictures ends then display this color as background so the picture looks complete.

background: #FFF url(img/bg.gif) repeat-y;

for y-axis

background: #FFF url(img/bg.gif) no-repeat;

it tells to show picture only once. Not to repeat in any axis

background: #FFFFF url(img/bg.gif) no-repeat  right;

it tells to start  the picture from right direction and don’t repeat it.

to begin first wou will make css file and will save it name.css
such as style.css

and to link your webpage with that css file you will mention link

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

Remember you have to put this link after Page title tage like

<title> My Page </title>
<link rel=”stylesheet” type=”text/css” href=”style/stylefont.css” />
</head>
Means after title and before head tag.

<head>
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”style/stylefont.css” />
</head>
<body>

<div id=”content”> Welcome this my<span> message</span></div>

</body>
</html>

These were some basics only. There is huge stuff to know about it. the best thing about css is you can understand is very easily. You can download template given site and edit and understand it rewrote whole script. It will make your command on CSS very good.
If you need any kind of assistance then please feel free to email me or write me on website. I will love to assist you.