Lesson 5: CSS tutorial
Now that we have the first few lessons under our belts, we will be taking the next step towards
total nerd glory with this first of a three-part lesson on creating a pure CSS web page.
Not just CSS styling, but CSS positioning too, that means NO TABLES required!
Once completed, you will be creating pages in sophisticated ways that will allow your web sites
to be seen on all types of devices including normal computers, cell phones, Iphones, PSPs ...
any device really!!
... That also means you will be able to put out websites with much less work where your web
pages will load faster and will be easy to update and print!
CSS Template Layout - Part 1 of 3
In this easy to understand (I hope!) tutorial on creating web pages with CSS, I will concentrate
on the key components of css, where (by the end of the tutorials) you will be able to create nice
looking CSS based web pages.
After completing this tutorial, you should have enough information to explore CSS and web page
design even further ... into to areas I don't cover here.
Let's get started:
You can download the CSS and HTML files we build in this tutorial: CSS files
You can check out what the page should look like here: CSS Example Page
Tags used in this CSS based layout:
Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a
page big time, all the while still being able to lay out great-looking pages using only 6 types (for
lack of a better word) of HTML tags.
The tags we will use to layout the content:
1. <h.> The Heading tags which range from '<h1></h1>' to '<h6></h6>' , are going to be used to
mark/tag headings in our pages. So the most important heading will be wrapped in a <h1> tag
and the least important in a <h6> tag. An example of a heading for this article:
<h1> CSS Template Layout </h1>
This tells the browsers and the search engines, too, that this page is primarily about: 'CSS Template
Layout'
All browsers have a default size (for each <h.> tag) as to how it renders text placed between these
tags. Many of these defaults can be unusable (especially <h1>) because they come out too big.
But never fear, CSS is here, and we will use CSS to make the text sizes more to our liking.
2. <p> The Paragraph tag is used to mark parts of the pages as being 'paragraphs', simple enough.
Paragraph tags are what is called a 'block element'; that means that it acts like a block where a space
is automatically inserted before and after each <p> tag pair. You will see it work in the examples
coming up.
3. <ul> and <ol> List tags will be used to create our menus. The tag <ul> is the 'un-ordered list tag'
that creates a list with bullets or other images/icons that do not specify or denote an order; hence
the term 'un-ordered'. The other list tag mentioned (<ol>) is the 'ordered list tag' and it creates a list
that, instead of with bullets, marks the list items with numbers or letters. Code examples to follow.
4. <div> and </div>: Div tags allow you to demark a portion of your page so that you can do things to it.
Another way of saying 'demark a portion' can be 'to put into a container'. Once a part of your web page
is in this <div> container you can do all kinds of stuff like style it, animate it, make it visible or invisible,
and so on. Div's represent the next generation of formatting HTML pages that, in many ways, are
superior to tables.
We will use div's to create containers for parts of our page. One div will be used to 'hold' our navigational
menu and another div to 'hold' the main page.
5. <a href> The most important tag in HTML: the 'link tag' or the 'hyperlink tag'. This makes text 'hyper'
so that when we click on it we can load another page or activate/call some JavaScript (otherwise known
as ECMA script).
6. <img> This is the 'image tag', which allows you to link to images so that they show up in our pages.
In HTML, images are not embedded into the actual page, instead the image tag (<img>) only points to
where the image is and the browser will attempt to load that image when a surfer loads your HTML page.
That covers the HTML tags we will use in our layout! No need for table tags, <br> tags, and nasty
(and DEPRICIATED) <font> tags.
Creating the basic page template
To work through the examples, we are going to need a practice HTML page.
To create the practice HTML page do the following:
1. Go to your desktop and create a simple text document. On Windows all you need to do is right-click
and select: New -> text Document.
This will create a simple blank text document on your desktop. Name the file: practiceHTML.htm.
Windows will show you a warning asking you if you want to change the file extension. Just say 'yes'.
Now right click on the file and select: 'open with' and select 'Notepad'. Once inside Notepad, paste in the
template code found in the grey box below:
(A simple way to cut/paste text in Windows is to press and hold the Ctrl key and 'c' for copy and 'v' for paste.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Practice HTML Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>
This code forms the basic structure for all HTML pages. You can now cut and paste the code samples
in between these tags:
<body> <!--Insert code here! --> </body>
One last note: in between the <body> </body> you find what is called a comment. Comments are a
way to place notes that cannot be seen in the browser . Anything in between the following characters
becomes an HTML comment:
<!-- and -->
Anything inside comments will be invisible in the browser. So in the above example the word 'and'
would be invisible in the browser. It is a good way to leave messages about what your are doing in
the page. It can come in handy later on when someone else is working on the page or even when
you are, because you may (you WILL) forget why you did things a certain way.
Building the CSS
Once you have created the template page, create a folder and name it something like: 'myCSSwebsite'
and then drop the HTML page into it. In that same folder, create a new text document and call it:
'myCSS.css'. Once created open that file and paste in this template CSS code and then save it:
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:link {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: bold;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: bold;
}
/************************* ID's *************************/
#navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Don't let the CSS freak you out, I will explain the important details and you will soon see how easy
it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some
code to our HTML page.
In between the <body></body> tags you will need to insert this code:
<div id="navigation">
<h2>The Main navigation</h2>
</div>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>
Go to the Web Designer's Killer Handbook home page and grab
practice HTML page that we will used as the starting template
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>
And in between the <head> </head> tags you will need to insert this:
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
With this in place we will be able to start styling our page. If you take a look at the HTML page now you
may be surprised to see that we already started!
If you haven't set the page up yet, please do so to make sure you have everything working thus far.
Should you have any problems, go to the Killersites.com Forum and post your questions.
In Part 1 we created a classic two-column layout with left side navigation using CSS and only a few
types of HTML tags. Part 1 presented the code for the page and explained what HTML tags we were
going to use. This week I will look at the actual HTML code we used thus far and the CSS.
You can check out what the page should look like here: CSS example page
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>
</p>
</div>
</body>
Note:
You should create your own basic HTML page so that you can follow along and build the page
as I do.
In the above code we see that we have 2 main sections, each enclosed inside <div> tags. As you
learned in Part 1 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 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 on any one page
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 one 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 explain 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 an 'href' attribute - this time pointing to a CSS document that has
all our CSS code that will affect this page since 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 we name 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"'. All that is important here is that the link
points to a CSS file with the name: 'myCSS.css'
So now that we have 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 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
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 (the '#navigation' and the '#centerDoc'), one for each ID, and each selector is
followed by the curly brackets: { }. In-between the curly brackets we list the 'properties' which specify
what style to apply to the selector. So here is the CSS selectors' code with all its guts (its properties)
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 is generically called a property.
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 two 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 has special meaning that tells the system
to do something specific. 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' by giving it this property:
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 - then the property would look like this:
font-weight: bold;
But I digress, I already go into detail about CSS in a 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 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
The line:
margin-left: 235px;
tells the browser to insert 235px (pixels) of margin 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.
Before we determined the margins, we've set 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 affect 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 in 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 its 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.
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 user's perspective)
so I won't discuss it in this article.
In Part 2 of the tutorial we broke down the major sections of HTML on the page and established separation
using DIV tags with unique ID's attached to them:
<div id="navigation"> ... </div>
<div id="centerDoc"> ... </div>
Using DIV's (to position the major page sections) is the alternate method to what most people use: tables.
I would argue one method is not necessarily better than the other, but consider that CSS is the 'official'
method to position page elements and tables should only be used to hold tabular data. On the other hand,
there are simply times when using tables is much easier and CSS just doesn't cut it. With our
current layout (left or right side navigation) CSS is far easier to use and is an overall better solution.
Now that we have that covered, everything gets really easy from here. We've established our
main document and the major sections are in place, all we need to do is add our text and images.
Breaking down the page:
This page is simple, we have just a single heading:
<h1>The Main Heading</h1>
And a single paragraph:
<p>
Go to the Web Designer's 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>
We define how the paragraphs and the headings will look in our CSS code:
p {
width: 80%;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #000000;
}
This is pretty much self-explanatory. The only thing that should be mentioned is that we set the width
of the <p> tags to 80%. This allows us to control all of our text width in one easy to edit spot.
The only thing missing from the page is the actual navigation. The best and easiest way to do this is by
using list (<li>) tags. That makes sense, since navigational menus are essentially a list of pages.
We styled the list item tags with this CSS:
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
The above code uses an image as the bullets for the list and makes the space between the listed
items 1 and ½ times larger than normal (I like a little more 'breathing room'). You don't have to have
images for the bullets, you could leave it without images and without bullets by just removing the attribute:
list-style-image: url(../images/arrowSmall.gif);
Or you could use one of the built-in bullet options: 'disc', 'circle' and 'square'.
Next you should add an unordered list (<ul></ul>) in between the navigation DIV's just under the 'main
navigation' heading to the HTML page:
<h2>The Main Navigation</h2>
<ul>
<li><a href="cssTutorialPage1.php">Page One</a></li>
<li><a href="cssTutorialPage2.php">Page Two</a></li>
</ul>
To make things easier (for the purpose of the article), change the CSS affecting the list item tags (<li>)
so that we use a built-in bullet:
li {
list-style-type: disc;
line-height: 150%;
}
Now we have the navigation!
That pretty much covers our goals for this tutorial, but we have just scratched the surface of CSS.
As you can see, we created a nice looking page while using very few types of HTML tags. At this time
there isn't much text on the page, but we could add to the page easily, building it out to include lots of
information and images with practically no HTML work at all!
I hope the CSS tutorial was useful to you, it may have been a little hard to get your head wrapped
around this subject at first, but in time you will see that your efforts will pay off.
