In the last post you learned some basic html tags and some basic attributes. Instead of going over every single attribute and tag in existence, we will move on and learn the other things in from examples that will help you understand them… and I’ll explain them as well as possible there. So don’t worry about any attributes or tags that I missed.

In the last post I ended with introducing the div tag but I didn’t really go into it. Now that we will be trying to understand CSS, you will be a little easier to explain it. For now just think of the div tag as an invisible box.

Let’s begin by making a css document and connecting it to our html page.

CONNECT A STYLE SHEET

Make a new document and make sure that the extension is .css. If you have a special program like Dreamweaver, you can just go to file=>new=>CSS document. Name it style.css and place it in the same directory as your html file.
 
Now open your html document and write the following inside the head tags:

The link tag connects the css page to the html page. It also has three attributes that you must have to complete the connection.
 
<link/> : the link attribute is used to connect a number of documents but is most usually used to connect style sheets.
 
The rel attribute describes the relationship of the linked document to the current document. In this case we say that it’s a stylesheet
 
The media attribute defines the intended media.
 
The href is the hyperlink reference. It is used to direct an object to the location of a document.
 
 

Now that we have it connected, let’s move on.
 

CONNECTING TO ELEMENTS

Let’s get back to the div tag. As I said, the div tag is like an empty box. We put things inside the div tag to separate elements in a page and modify the div box with CSS. To do this, we need a way to connect to the div tags. We do this in two ways:

Now that we have them named, we can call on them from our css page. To connect to the two I wrote above, you would write the CSS like this:

So what’s the difference between the two? Simple: You can only have one id with a single name but you can have as many classes as you want with the same name. So if I wanted to have a bunch of objects affected by the same properties, I would give them all the same class name and just set up one definition in css. With an id, as I said, you can only have one.

Back to what we just wrote… Note that when I connect to the id, I used a hash tag. When I connected to the class, I used a period. But there is a third way to connect to tags. Let’s say I want to make all the img tags in my document have some CSS property. The way I would affect every single one without giving them all some class name is by using the name of the tag.
 
The following would connect to all the img tags in a document:

Basically what happens is it affects all the img tags.  Now you know how to connect to objects! Now let’s say you want to connect to an img tag that is inside a div tag with a class name “foobar”… how would you connect to it?

The following code is how

Ok so we know how to connect to objects but we haven’t really done anything to those objects. There are a crazy amount of css properties that you can use. I will go over a few of them that I think you will need the most but if you want to see more of them you can go to w3schools.com or wait because I’ll probably end up using one of them in the later tutorials. Even if I went over each one of them, you wouldn’t remember them. It takes practice and then more practice to really remember most of them.

 
So let’s go over the basic ones.
 

CSS COLOR

First of all we have the “color” property. You write it this way:

Notice that I just said “white” for the color but that’s only one out of many ways to describe the color. You can also use hex codes, rgb, rgba and a few others that we won’t go into.

HEX code:
Hex code is what I use most because I design my websites in photoshop and it’s easy to see the hex code there. It’s a six character code. White is #ffffff and black is #000000 (note the hash tag). Visit this w3schools page for more information

 
RGB code:
Rgb stands for red, green, blue. You write it as rgb(0, 0, 0) where each number ranges anywhere from 0 to 255.

 
RGBA code:
The same as RGB but you now add the A which stands for alpha. Alphas is the opacity or, in other words, the visibility. It ranges from 0 to 1 where 0 is see-through (100% opaque) and 1 is completely visible.

 
What the color changes the color of the text inside the object that is affected.
 
Next let’s take a look at the classic box model.
 

THE BOX MODEL

Remember I said that a div box is like an empty box?
 
Write the following in your HTML inside the body tag:

And this is CSS:

What we just did is add a border to the div tag and made it 100 by 100 pixels. Take a look at the rendered out page in your browser. You can actually see the div box!
 
Notice that I used three different values for the border property. First I said that I want the border to be solid (instead of dashed or some other ugly border) then said that I want it to be 1px thick and a black color.
 
The complete box model is comprised of three parts. Change the CSS to look like this:

margin : margin adds space outside of the box.

Padding : padding adds space inside the box. (you won’t see it unless you write some txt inside the div tag) Adding padding will make the width greater.

/* */ : The comment format for CSS. Everything inside the asterisks will be commented out.

Notice that I wrote the margin and padding differently.

In the case of the padding, I added 5px to all sides.

In the case of the margin, I used a short hand method and wrote the equivalent long hand in the comment. The order of the short hand is top, right, bottom, left… clockwise.

There you go! The basic box model =)

MORE CSS PROPERTIES

Next I will just list all of the properties I think you will need because going through them any more in depth will take way too long and I bet your guys are getting tired already.

In the next tutorial, we will look into CSS a bit more and learn about mouse events and some new CSS3 properties. See ya tomorrow!