Learning xHTML and CSS – day 7 of 30
Well, if you’re reading this and you’ve been keeping up with the blog posts, it means that you’ve successfully suffered through the first horrendous week of learning some useful xHTML and CSS tags and selectors. If you’re feeling anything like what I’m currently feeling, you’re probably thinking that it’s time to give our website a new look. Today, finally, we’re about to change our xHTML in order to make our website get closer to what a real site looks like.
Just so we’re on the same page…
Below is the xHTML that you should have in your index.html file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My first website</title> <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>My first website!</h1> <p> Hello World! This is a paragraph! </p> <p> And this is another paragraph! </p> </body> </html>
And here’s the CSS that you should have in your styles.css file
body {
background-color: black;
color: white;
}
p {
background-color: gray;
font-weight: bold;
font-style: italic;
text-align: left;
}
h1 {
background-color: #c3c3c3;
color: black;
font-size: 20px;
text-decoration: underline;
border: solid 1px red;
padding: 10px;
margin-bottom: 10px;
}
The purpose of today’s lesson
Today’s lesson will concentrate primarily on xHTML with a small focus on CSS. We’ll introduce the concept of DIVs, what they are, and what they’re used for. So let’s get right to it!
First let’s wrap our entire content by a DIV which I like to call the “pagewrap” div. I use it as the container that wraps the entire content of the page. Therefore, I have complete control over the page’s height, width, margins, padding, etc. etc…
What are DIVs and How do we name them?
A DIV, in it’s simplest form, is just an imaginary box (or DIVision). If you don’t give a DIV any styles, your site will literally look as if there was no change at all. Now, how do we name a DIV. There are two ways of naming them. One way is by assigning it an ID (identification). Another way is by assigning it a CLASS (classification). Which way is better? Actually, that’s not a valid question. They’re both equally good. However, you can’t have two DIVs with the same ID, but you can have as many DIVs as you want with the same class. Therefore, since I only have one DIV that wraps the entire content, I usually give it an ID of ‘pagewrap’ rather than a class. Let’s do that now, let’s wrap our content with a DIV with ID of pagewrap.
So our xHTML should now look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My first website</title> <link href="reset.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="pagewrap"> <h1>My first website!</h1> <p> Hello World! This is a paragraph! </p> <p> And this is another paragraph! </p> </div> </body> </html>
Notice the general structure. Any markup code that’s inside (or a ‘child’) of another code is indented a little so it’s easier to see the general hierarchy of the page. Now, let’s take a look at what our page looks like. Hopefully, it won’t look anything different than the picture at the top (since the ‘pagewrap’ DIV has no styles assigned to it!).
Great! Nothing’s changed. This is a good sign.
Now, let’s wrap the h1 with a DIV and name that DIV ‘header’. And let’s also wrap both paragraph tags with a DIV and let’s name it ‘content’. Here’s what your xHTML should look like now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My first website</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pagewrap">
<div id="header">
<h1>My first website!</h1>
</div>
<div id="content">
<p>
Hello World! This is a paragraph!
</p>
<p>
And this is another paragraph!
</p>
</div>
</div>
</body>
</html>
Again, notice the hierarchy. You can clearly tell which code is wrapped with which DIV. If you refresh the page now, still, nothing should happen, even though we just added two more DIVs. Again, DIVs are imaginary blocks, containers, squares, what-have-you. Without assigned styles (using CSS of course), they’re nothing.
So lastly, let’s use some CSS to give them a style. REMOVE all of our previous styles, and let’s start from scratch.
In order to style DIVs using CSS, you must know what type of DIV you’re working with. If, for example, your DIV has an ID of pagewrap, then you know how to target it. If it has a class of pagewrap, then you also know how to target it. Either way, you must target the DIV in some form or another. You can target it using it’s ID, class, or target it in general (which targets all DIVs). These are the three ways to target a DIV with an ID of pagewrap, class of pagewrap, and no ID or class at all:
#pagewrap { styles_here; } /* This targets a DIV with ID of pagewrap */ .pagewrap { styles_here; } /* This targets all DIVs with class of pagewrap */ div { styles_here; } /* This targets all DIVs on the page */
Notice the difference between targeting a DIV with an ID and a DIV with a class. The hash (‘#’) sign is used to target DIVs with IDs. The perios (‘.’) sign is used to target DIVs with classes. Now that you know how to target DIVs using CSS, let’s try to style our page with the following criteria (remember to remove all prior styles):
- Let’s keep the background of the body black
- Let’s give the pagewrap DIV a white background and the text in it black
- Let’s make the header DIV have a bottom border of 2 pixels in blue
- Let’s have the text in the content DIV colored black and give the content DIV a top margin of 20 pixels
- Finally, let’s keep a big heading, so make the h1 font-size 20 pixels, bold, and black
Try to see if you can do these tasks without looking at the CSS code. But if you must, here’s the CSS code you should’ve ended up with:
body { background-color: black; }
#pagewrap { background-color: white; color: black; }
#header { border-bottom: solid 2px blue; }
#content { margin-top: 20px; color: #black; }
From here-on end, I will write my CSS style definitions in straight lines. That’s the way I work and that’s the way I’ll write ‘em. I like it better that way since then you don’t find yourself scrolling forever until you find the right style definitions for some selector you were looking for…Here’s what the final result looks like (picture on right).
Notice a few things. The first thing to notice is that the blue border is coming from the header DIV. The background of the page is black, but the background of the pagewrap DIV is white. There’s room between the heading and the first paragraph as a result of the content DIV.
Summary
Today we learned a very important part of CSS and xHTML as well as modern-based webdesign, and that is using DIVs to style your site. DIVs are unbelievably useful, and you should use treat them as your friends. Seriously!
We added a bit of markup code to our site. We wrapped our content with a pagewrap div, wrapped individual components such as paragraphs and h1 tags with their own DIVs, and styled those DIVs. We also learned how to target DIVs with IDs and classes using CSS. We’re getting closer to our goal. Now we just need to add a little more content, some DIVs, and we’ll be on our way to a full blown website!
Be sure to subscribe to the RSS feed so you can get the new post by email. Also, feel free to contact me with any questions or use my contact form to send me any private comments or questions.
Thanks for reading and see you tomorrow!
Tags: course, css, free course, html, Stylesheets, tutorial, XHTML