|
CSS or Tables?
|
By Shabda Raaj
[Hits: 11888]
|
|
The 30 minute CSS tutorial.
What is CSS?
CSS is the technology used to make the layout for webpages.They are Cascading Style Sheets, used to style your HTMLdocuments. They are slowly replacing tables as the preferredmedium to layout your pages. They free your content (the HTMLdocument) from the layout (the CSS file), so you may change yourwebsite look and feel easily.
CSS basics.
With HTML, you would define the attributes as you write theHTML. With CSS, you first define the style. Then as you arewriting the HTML, you apply the required style. So the firststep to write CSS document is defining your styles. There aretwo ways to apply your CSS to your file. You may either includeit in your HTML file by placing your stylesheet in head of yourHTML as,
... , The Selectors.
After you write your style, the computer needs to know where toapply that style. This can be done using the selectors. Theselectors are of three types. 1. HTML tag selector: If you wantto change the look of any of your html tags, you will use thistype of selector. You may decide that all of your h2 elementsmust have red text. It is trivially easy with CSS. 2. Classselector: you would like particular parts of your webpage tohave a style, but that part is not always in same html tag. Notto worry, you can enclose that part with a div tag and applyyour style. 3. ID selectors: If some element occurs only once itis styled using id selectors.
Your First Stylesheet.
With your first stylesheet, you will modify the page to lookyellow with a blue foreground.
Page title some text The HTML partis simple, so let's look at the CSS part. body{background-color:yellow; color:blue; }
We wanted to modify the body so we used the body tag selector.This basically said to the computer that this style needs to beapplied to whole body of html document. Then we used thebackground-color property to set the background and the colorproperty to set the foreground. What if you wanted to set allthe text to bold? Oh that's simple too, you just add this lineinside the body selector. font-weight: bold;
Getting something useful.
The last css though simple was not very useful. Let us design auseful CSS which might be used on a site. Before that you mustlearn positioning elements using CSS. We would like to have athree column layout. So I will use three selectors(Id selectors)named sidebar, content and rightsidebar. Theses lines of codesdeclare our selectors. #sidebar #content #rightsidebar. Then wewill tell how these should look like. I want my sidebar andrightsidebar to have aqua colored background. This is done usingbackground: Aqua;
Next we add borders to all our selectors and add a top margin of20 pixels. We would like the contents to be bolder, so we addfont-weight: bold; to content. After that we decide to spice upour links by making them of a different color and removing theunderlines, by getting a color:#c60; text-decoration:none; Togive the user a visual indication of the link when she moves hermouse, we swap the link colors. This is done by changing thestyle in a:hover.
So this is what our finished page looks like.
Preview contenta link
, What! Do I have to learn all these tags andattributes?
No. But you must remember the more important ones. Also theattributes have very common sense names. What should you do tochange the background color of your webpage. Yeah this.
body{ background:Aqua; } , That's all. SO if you are going touse CSS for any length of time, you will get to remember thetags. A css editor like TopStyle lite can be really useful whenyou are learning css. , Thats all for today. Hope you learntsomething useful from this tutorial.
|
|
|
|
|
|
