Our page thus far is really very simple. As you may already
know, all the content (text, images, Flash etc) that the
user sees when viewing a web page is marked-up with HTML
in-between the <body> and </body> tags*.
In this case we have this:
<body>
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>
Go to the Web Designers Killer Handbook home page and
grab the practice HTML page that we will used as the
starting template for this tutorial. You can find it
under the heading: 'To create the practice HTML page do
the following:'.
Follow the instructions there and create your basic
HTML page ... and do it now!
</p>
</div>
</body>
In the above code we see that we have 2 main sections
demarked by using <div> tags. As you learned in part one of
this tutorial, <div> tags are designed to be used to create
a 'division' in the document or in other words create a
container.
We have created two such containers and given them each
of them a unique ID:
<div id="navigation">
...
<div id="centerDoc">
You will notice that the entire contents of the page are
contained in one of these two major page divisions. So the
first questions are what are the rules of ID's in HTML pages
and why do we use them and assign them to page elements like
DIVs?
1. First of all you can assign ID's to any HTML tag. So I
could have assigned an ID to a <p> tag as well.
2. An ID in a page should only be used once. That is to
say that no two elements should have the same ID. ID's are
meant to uniquely identify a page element. So in the above
example we know that there is only one page element with an
ID of 'navigation' and only page element with an ID of
'centerDoc'. I like to use ID names that talk to you, it is
pretty clear what is going on in each division we created
above.
3. ID's on HTML page elements (tags) are used in CSS. We
can target ID's in our CSS code to change the appearance,
position and even behavior of that element by referencing
the ID of the element.
Inside the <div> tags we use header tags (<h1> and <h2>)
to set the headers. I speak to what header tags mean in part
1 of this tutorial.
And finally I have some <p> tags, and of course I insert
the text that makes up this simple page in-between them.
Now I am going to jump to our CSS file that is attached
to the HTML page. We attach the CSS document with this line
of code in between the <head> </head> tags:
<head>
<link href="myCSS.css" rel="stylesheet"
type="text/css">
</head>
Like a normal page link, we have the 'href' attribute
(this time) pointing to a CSS document that has all our CSS
code that will affect this page - because it is linked to
it. This is not the only way to associate CSS code to pages
(there are a few other ways) but we will leave that to
another article.
So in the above link indentify the CSS file name with
this: 'href="myCSS.css"' and we tell the browser that the
link is to a CSS page with this attribute:
'type="text/css"'.
The important part here is that the link points to a CSS
file with the name:
'myCSS.css'
So now that we got the style sheet linked to the
document, lets look at some CSS code. This first snippet of
code 'styles' the unique ID's we were talking about before:
#navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 235px; /*top right bottom left*/
margin-top: 50px;
}
There is a lot going on here so we will focus on just a
few elements for now. In the above elements we have 2
selectors, one for each ID and each selectors are
grouped/contained by using the curly brackets: { }. So here
is the CSS selectors code with all their guts removed:
#navigation {
/*Look ma no CSS rules!*/
}
#centerDoc {
/*Look ma no CSS rules!*/
}
I just inserted the text: '/*Look ma no CSS rules!*/' to
show you where the CSS code would normally be. So now you
can see that anything in between the curly brackets is part
of one group or package that in CSS can generically be
called a selector.
In our above examples you can see that there is some text
that appears before a curly bracket. That text gives a name
to the selector. So in this case we have two selector names
and thus to selectors: #centerDoc and #navigation. So why do
we have the # symbol in front of the text? Why can't we call
it simply 'centerDoc' and 'navigation'?
Like HTML and programming certain text in certain places
have special meaning that tells the system to do something
particular. In this case whenever you have a # symbol in
front of a name of a CSS selector we are saying that this
selector is a special type of selector called an 'ID'
selector. What is so special about an ID selector? That type
of selector can only be applied to one element in the HTML
page. Sounds familiar?
So those of you not asleep at the computer, now see that
we have a CSS ID selector for each of our HTML divs that
have an ID, and they have the same corresponding names. So
the CSS selector #centerDoc applies to the div: '<div
id="centerDoc">' , you got it? Whatever CSS rules/styles we
choose to code into our ID selector will change what appears
inside the corresponding div. So for the div with the id of:
'navigation' we have these CSS rules:
#navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 0px;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
Notice at the bottom we say all text will have a
font-weight of 'normal':
font-weight: normal;
We could just as easily have said that we want all the
text to appear in the div (the div with the ID 'navigation')
bold instead:
font-weight: bold;
But I digress, I already go into detail
about CSS in a my previous article on CSS. This tutorial
was about creating an easy to use page template so I will
point out the 2 main elements that make this thing work.
In our page the navigation div is sitting on the left and
it has a border ... why? It has a nice light green 1 pixel
border because I set this in my CSS:
border-right: 1px solid #C6EC8C;
Pretty self explanatory, no? I would suggest changing the
color of the border and changing the pixel thickness of the
border and see how it looks.
Why is the navigation sitting on the left of the page
while the centerDoc is to the right of it? Well first thing
to look at is this line in the navigation selector:
position: absolute;
This tells the browser to just place this div on the page
as is. This is oversimplifying the subject, but for our
purposes this works for now.
The real magic in this is the CSS code for centerDoc:
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 235px; /*top right bottom left*/
margin-top: 50px;
}
The line :
padding: 0 0 20px 235px; /*top right bottom left*/
Tells the browser to insert 235px (pixels) of padding to
the left of the div with the ID 'centerDoc' . That pushes
that div over giving room for the div 'navigation' to take
that place. Or in this case, just creates a nice left hand
column.
Let's back up here a second. We just used something
called 'padding' and it is what it sounds like: Space that
is wrapped around our element (tag).
CSS has this feature and concept of a box model
that essentially is a box that wraps around HTML elements.
This box model consists of: padding, margins, borders and
the actual content. This allows us to place a border around
elements and space elements in relation to other elements.
From the inside out it is ordered like so:
content -> padding -> border -> margin
So in our case anything in between our <div> tags is the
'content'. Right after that comes the padding. Then there is
a border and finally a margin. Margin and padding may seem
like the same thing but if you think about it, you can see
how being able to control the space before the
border (padding) and after the border
(margins) can really effect your layouts.
In this example you notice that the navigation div sits
higher up on the page than the centerDoc div. This is not
because of the order that which they appear in the HTML, as
they normally would without CSS, rather it is because of the
margin settings I set for each selector; for centerDoc I set
the top margin to 50px:
margin-top: 50px;
And for the navigation div I set it to:
margin-top: 0px;
This sets it's top margin to 0 pixels so it will
therefore be 50 pixels higher than the centerDoc div. I
would suggest that you move the position of the navigation
div under the center doc div in the HTML just to see if it
changes anything, you will see that where the div appears in
the actual HTML code has nothing to do with how it will
appear to the user now that CSS positioning has been used.
Another thing to try is to play with the CSS values and see
what happens, change the padding, change the margins etc .
We will conclude this discussion of CSS in
Part 3.
1. There is more HTML that appears on top of the first
<body> tag that is very important to the page but does not
actually directly have anything to do with what appears in
the page (from the users perspective) so I won't discus it
in this article.
CONTINUE: PART 3
