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 HTML documents. They are slowly replacing tables
as the preferred medium to layout your pages. They free your content (the HTML
document) from the layout (the CSS file), so you may change your website look
and feel easily.
CSS basics.
With HTML, you would define the attributes as you write the HTML. With CSS,
you first define the style. Then as you are writing the HTML, you apply the
required style. So the first step to write CSS document is defining your styles.
There are two ways to apply your CSS to your file. You may either include it
in your HTML file by placing your stylesheet in head of your HTML as,
…
<head>
<style type="text/css">
Your stylesheet here.
</style>
</head>
The Selectors.
After you write your style, the computer needs to know where to apply that style.
This can be done using the selectors. The selectors are of three types.
1. HTML tag selector: If you want to change the look of any of your html tags,
you will use this type of selector. You may decide that all of your h2 elements
must have red text. It is trivially easy with CSS.
2. Class selector: you would like particular parts of your webpage to have a
style, but that part is not always in same html tag. Not to worry, you can enclose
that part with a div tag and apply your style.
3. ID selectors: If some element occurs only once it is styled using id selectors.
With your first stylesheet, you will modify the page to look yellow with a blue foreground.
<html>
<head>
<title>Page title</title>
<style type="text/css">
body{
background-color:yellow;
color:blue;
}
</style>
</head>
<body>
some text
</body>
</html>
The HTML part is 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 be applied to whole body of html
document. Then we used the background-color property to set the background and
the color property to set the foreground. What if you wanted to set all the
text to bold? Oh that’s simple too, you just add this line inside the
body selector. font-weight: bold;
Getting something useful.
The last css though simple was not very useful. Let us design a useful CSS which
might be used on a site. Before that you must learn positioning elements using
CSS.
We would like to have a three column layout. So I will use three selectors(Id
selectors) named sidebar, content and rightsidebar.
Theses lines of codes declare our selectors.
#sidebar
#content
#rightsidebar.
Then we will tell how these should look like.
I want my sidebar and rightsidebar to have aqua colored background. This is
done using background: Aqua;
Next we add borders to all our selectors and add a top margin of 20 pixels.
We would like the contents to be bolder, so we add font-weight: bold; to content.
After that we decide to spice up our links by making them of a different color
and removing the underlines, by getting a
color:#c60;
text-decoration:none;
To give the user a visual indication of the link when she moves her mouse, we
swap the link colors.
This is done by changing the style in a:hover.
So this is what our finished page looks like.
<html><head><title>Preview</title>
<style type="text/css">
#sidebar{
background: Aqua;
width:100px;
border-width: 1px;
margin: 20px 0px;
border-style: dotted;
float:left;
}
#content{
font-weight: bold;
width:400px;
border-width: 1px;
margin: 20px 0;
border-style: dotted;
float:left;
}
#rightsidebar{
background: Aqua;
width:100px;
border-width: 1px;
margin: 20px 0px;
border-style: dotted;
float:left;
}
a:link {
color:#c60;
text-decoration:none;
}
a:hover{
font-weight: bold;
background: #c60;
color:White;
text-decoration:none;
}
</style>
</head>
<body>
<div id="sidebar">sidebar</div>
<div id="content">content
<a href="http://www.google.com/">a link</a><br>
</div>
<div id="rightsidebar">rightsidebar<br /></div>
</body></html>
What! Do I have to learn all these tags and attributes?
No. But you must remember the more important ones. Also the attributes have
very common sense names. What should you do to change the background color of
your webpage. Yeah this.
body{
background:Aqua;
}
That’s all. SO if you are going to use CSS for any length of time, you
will get to remember the tags. A css editor like TopStyle lite can be really
useful when you are learning css.
Thats all for today. Hope you learnt something useful from this tutorial.
posted by shabda @ 9:56 PM
3 Comments:
Thanks..., This tutorial is for very begineer.
Regards,
Sanjay Sah
To learn PHP with advanced concepts, you can visit Advanced PHP tutorial
Hi there, awesome site. I thought the topics you posted on were very interesting. I tried to add your RSS to my feed reader and it a few. take a look at it, hopefully I can add you and follow...
Web Designing
Post a Comment
<< Home