Home
HTML and CSS
Tutorials
Introduction to CSS
Level: All levels Software:
Dreamweaver
Before we begin, I'd like to define that this tutorial is based on basic html knowledge.
Also, it's not intended that you end up with a finished product after doing this tutorial. I'd rather you see this as a little education.
Step 1(The beginning)
Open a new html document in Dreamweaver. I like to keep html and css separate to keep things organized. To do this we need a <link>
The tag should be in the <head></head>. It looks similar to JavaScript if you've ever used that. The difference is that we define it as css and not as JScript. Here it is:
| <link rel="stylesheet" href="yourcssfilehere.css" type="text/css"> |
- rel is what kind of document the browser should relate the link as.
- href is the same as in <a> tags and points to the source file. The name could be anything really.
- type is what kind of document we're using.
While we're at it, let's make a few divs in the <body> section:
| <div id="box1"> some content </div>
<div class="box2"> some other content </div> <div id="holder"> <div id="inside1"> This is made with </div> <div id="inside2"> CSS </div> <div id="inside3"> copyright yourname </div> </div> |
- div is a container box. There is a bit more to it, but let's keep it at that not to complicate things.
- id can be used by almost any html tag and identifies the object.
- class is almost the same as id, but there is a subtle difference as I will show later on.
Save the file, preferably as "index.htm"
Step 2 (Basic css code)
Make another new file (basic page), this time a css document.
Now we're going to start having fun and play a little with our recently defined divs.
The first box is named "box1" so the counterpart in css will be named "#box1".
Make a code like this:
| #box1{
} #box2{ } #holder{} #inside1{} #inside2{} -{} in the brackets is where the magic happens Now for a little more juice. Let's define box1's size and fill it with color so we can see what's happening. #box1{ width:300px; height:100px; background-color:#EEEECC; } |
- : separates the code and the value
- ; ends the code
- #EEEECC is the hex code for pale yellow.
NB! Remember to end size values with "px" or similar ("pt", "%", etc)
Just save this as "yourcssfilehere.css" or a name of your choosing, just make sure it is the same as in the <link> tag.
Now open index.htm in your favourite browser and behold your creation so far.
Step 3 (How to make things look nice)
Whatever you might think this looks I don't care. This is dull in my eyes.
"Some content" is hugging the border of "box1" and there isn't really a border there either.
| #box1{
/* add the following */ padding: 10px; border-style: solid; border-width: 1px; border-color:#000; /* the rest we've already got */ width:300px; height:100px; background-color:#EEEECC; } |
- /* is a comment */
- padding can either use four values, one for each side (separated by space/" "), or one universal for all four sides.
- border-style defines what kind of border we're using. There is a lot to choose from, but I think solid looks best.
- border-width and border-color is self-explanatory
- #000 is RGB values instead of the normal RRGGBB. Just a time-saver really.
Save and open the browser again, refresh if necessary.
Step 4 (The subtle difference)
Now then, can someone raise their hand and explain why the box just got larger?
The padding, exactly! Why does this happen? It's because the padding comes in addition to the defined width of course.
And the border looks smashing, doesn't it?
Now then let's do the same with #box2. Just copy and paste the code for box1 and rename it to box2:
| #box1{
padding: 10px; border-style: solid; border-width: 1px; border-color:#000; width:300px; height:100px; background-color:#EEEECC; } #box2{ padding: 10px; border-style: solid; border-width: 1px; border-color:#000; width:300px; height:100px; background-color:#EEEECC; } |
Experience tells me this won't work, if you don't believe me then go ahead and try.
Nothing will happen.
The problems lie in the divs we already defined. Where box1 is defined by id and box2 is defined by class.
What we need to do to make this work is to make the browser recognise the css as a property of name. This is done by changing the "#" to a ".". Simple, isn't it?
Since we're making such good progress let's change a bit so we can note the difference between the two boxes.
I want box2 to be pink (#ECC) and in addition to the padding I want to give it a little more meat by inserting a margin to the plot.
Since we have two boxes now, I'd like to reduce the height a little.
| #box1{
padding: 10px; border-style: solid; border-width: 1px; border-color:#000; width:300px; height:50px; background-color:#EEEECC; } .box2{ padding: 10px; margin: 20px; border-style: solid; border-width: 1px; border-color:#000; width:300px; height:50px; background-color:#ECC; } |
- margin can either use four values, one for each side (separated by space/" "), or one universal for all four sides.
Save and open the browser again, refresh if necessary.
Step 5 (Typography)
Now that you've mastered boxes, padding and margins, let's move on to the font.
The code should be added after box1 and 2, and it should look something like this:
| #inside1, #inside2{
font-family:Arial; font-size:14pt; } #inside1{color:#666; font-weight:bold;} #inside2{color:#36F; font-style:italic;} #inside3{ font: bold 16px "Courier New"; color:#CCC; } |
- color defines the color of the font
- font-family is the typeface
- font-size is self-explainatory
- font-wieght is used to make the font bold or thin (can also be a numerical value).
- font-style is used to make the font italic.
- font can be used as anything
Note the size difference in pt (as in word programs such as MS Word) and px!
Remember that px might be more useful for web design.
Save and open the browser again, refresh if necessary.
Step 6 (Floating things into order)
You might wonder why the text line up under each other and the answer is because we've enclosed the text in divs. We're going to fix this now.
Alter the code for inside1 and 2 to look like this:
| #inside1, #inside2{
float:left; font-family:Arial; font-size:14pt; } |
Save and open the browser again, refresh if necessary.
But what is this? The copyright moved as well even though we did nothing to inside3. This is because inside1 and 2 is floating in mid-air to the left of inside3. Another problem is that inside1 is hugging inside2. So how do we solve this?
Let's try to do something with "holder" and do an alternate to padding or margin with inside2:
| #inside2{
color:#36F; font-style:italic; position:relative; left:5px; } |
- positon tells the browser how to react to coordinates
- left is one of the x coordinates, "right" is the other. You can also use "top" and "bottom"
| #holder{
width:250px; } |
Save and open the browser again, refresh if necessary.
If you don't understand why this happens, make a border (and a padding to make it look good) around holder:
| #holder{
width:250px; border: 1px #000 solid; padding:5px; } |
- border can also be used as shorthand, same as with font.
Save and open the browser again, refresh if necessary.
As you see, the width limit the content to a small area, and inside3 get pushed down.
This is all I have to learn away at the moment. I've tried to explain all the basics in css, or at least enough to get you started. The best way to learn this language is to play around with it. I can recommend the "background-image" and the different repeat functions. Please give me feedback on parts lacking information or things you do not fully understand and I will correct /expand this tutorial as soon as possible. :)
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com