Adding some CSS to our website (MFW#5)

“My First Website” series navigation: first postwhole series

css-babyIt’s time for the moment you’ve all been waiting for: adding CSS to our website! In the previous post in this series we finally were able to get some very basic content on our first website. Unfortunately, as far as websites go, it’s pretty lame — no styling, no colors, and what we got was one long liquid layout (a layout whose width varies with the width of the browser window.)

So roll up your sleeves, get Notepad, TextEdit, or your favorite text-digesting software ready to go, because we’re gonna add some CSS!

Adding an External Style Sheet

The first thing we need to do is start a blank document in either Notepad or TextEdit. You’re going to name this file “style.css” (without the quotes) and save it in the same folder with the “index.html” file you created in the previous post. (Design Projects – My First Website – website.)

The naming of this file isn’t really that important. You can call it “mainsheet.css” or “stylesheet.css” or even “frankie.css” if that’s your preference. The only thing you MUST have is the “.css” at the end. Also, don’t use spaces or upper-case letters. Instead of spaces, you can use a dash ( – ) or an underscore ( _ ). For example: “style_version1.css” Make sure to save it as a UTF-8 as you learned in the previous post.

Linking your web page to the external CSS file

Next, we’re going to link our web page to the CSS file we just created. We do so using this line of mark up:

<link rel="stylesheet" href="style.css" type="text/css">

Now, open your “index.html” and add that line of mark up anywhere between the <head> </head> tags. Like this: (I made it red to make it easier to spot.)

<head>
<title>My First Website</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css">
</head>

Wrapping our web page

It’s time to add our first “box” to our web page. This box will encompass or “wrap” the whole page itself. We will do so by adding <div> </div> tags. But before we do that, we need to name our <div> so we can use our CSS file to change how it will appear.

To name this <div>, we’re going to give it a unique id. “Id”s can have any name at all, just make sure it is descriptive enough to you so you know what is does. For example, this <div> is going to wrap our web page, so let’s give it an id with the name of “pagewrap”. And we write it like this:

<div id="pagewrap">

Now add both the opening tag and the closing tag to your “index.html” file. See below (to make it shorter, I left out all of the content you created in the previous post.)

<body>

<div id="pagewrap">

<h1>A Level 1 Heading</h1>
(Here’s all the content from before)

</div>
</body>

Save your “index.html” file.

Finally! Some CSS!

Go back to your “style.css” file and enter (or copy and paste) the following:

#pagewrap {
    width: 800px;
}

What this does is declare that the id called “pagewrap” (the # sign means “id” in CSS lingo) will have a width of 800px (the “px” means pixels.) The opening and closing curly brackets — { } — must surround the CSS code and don’t forget the semicolon at the end of the line!

Save your “style.css” file.

Take a look

If all went well, then when you view your “index.html” file in your browser (remember how to do that?) It should look like this:

View the web page

If your web page looks like the one above then congratulations! If not, go back an check all of the code and mark up for mistakes. Here is the full mark up of the “index.html” file for you to compare against:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My First Website</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<div id="pagewrap">

<h1>A Level 1 Heading</h1>

<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus. Donec ornare arcu id erat.</p>

<p>Aliquam et nisl vel ligula consectetuer suscipit. Morbi euismod enim eget neque. Donec sagittis massa. Vestibulum quis augue sit amet ipsum laoreet pretium. Nulla facilisi. Duis tincidunt, felis et luctus placerat, ipsum libero vestibulum sem, vitae elementum wisi ipsum a metus.</p>

<h3>A Level 3 Heading</h3>

<p>Morbi non erat non ipsum pharetra tempus. Donec orci. Proin in ante. Pellentesque sit amet purus. Cras egestas diam sed ante. Etiam imperdiet urna sit amet risus. Donec ornare arcu id erat.</p>

<p>Aliquam et nisl vel ligula consectetuer suscipit. Morbi euismod enim eget neque. Donec sagittis massa. Vestibulum quis augue sit amet ipsum laoreet pretium. Nulla facilisi. Duis tincidunt, felis et luctus placerat, ipsum libero vestibulum sem, vitae elementum wisi ipsum a metus.</p>

</div>

</body>

Conclusion

We’ve now taken our liquid layout (a layout that changes width with the browser window) and made it into a fixed-width layout (a layout whose width is unaffected by the width of the browser window). Still it’s not much to look at, but we’re getting there!

In the next post titled Margins, padding, and borders oh my! Plus centering a website with CSS I’ll introduce you to the gory details of the CSS box model by adding some padding, some margins, and even a border to surround our web page.

Until next time!

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



2 Responses:

  1. Sammy

    Excellent series! Thank you for your hard work!

  2. Michael

    Man this is great stuff. I’d never heard of the term “liquid layout,” and this sheds some light on this issue of text expanding to fit a browser. This makes me eager for more CSS entries.


Share your thoughts below: