Styling a Notepad Created Web Page with CSS

With an external style sheet (CSS), you can change the look of your entire website just by changing the code in one file. In this tutorial, we’ll walk you through the steps to create a CSS file. You’ll learn how to create the style sheet—setting page margins, fonts, and more—and get a better idea of how to link the style sheet to your HTML.

Create the CSS Style Sheet

You create a text file for the CSS in the same way you create a separate text file for the HTML. Here are the steps to create your CSS style sheet in Notepad:

1. Choose File > New in Notepad to get an empty window
2. Save the file as CSS by clicking File < Save As…
3. Navigate to the my_website folder on your hard drive
4. Change the “Save As Type:” to “All Files“
5. Name your file “styles.css” (leave off the quotes) and click Save

Link the CSS Style Sheet to Your HTML

Once you have a style sheet for your website, you’ll need to associate it with the Web page itself. To do this, use the link tag. Place the following link tag anywhere within the tags of your pets.htm document:

Fix the Page Margins

When you’re writing XHTML for different browsers, one thing you’ll learn is that they all seem to have different margins and rules for how they display things. The best way to be sure that your site looks the same in most browsers is to not allow elements like margins to default to the browser choice.

We prefer to start pages in the upper left corner, with no extra padding or margin surrounding the text. Even if we’re going to pad the contents, we set the margins to zero so that we’re starting with the same blank slate. To do this, add the following to your styles.css document:

 html,body 
margin: 0px;
padding: 0px;
border: 0px;
left: 0px;
top: 0px;

Changing the Font on the Page

The font is often the first thing that you’ll want to change on a web page. The default font on a web page can be ugly and is actually up to the web browser itself, so if you don’t define the font, you really don’t know what your page will look like.

Typically, you would change the font on paragraphs, or sometimes on the entire document itself. For this site, we’ll define the font at the header and paragraph level. Add the following to your styles.css document:

 p, li 
font: 1em Arial, Helvetica, sans-serif;

h1 
font: 2em Arial, Helvetica, sans-serif;

h2 
font: 1.5em Arial, Helvetica, sans-serif;

h3 
font: 1.25em Arial, Helvetica, sans-serif;

We started with 1em as the base size for paragraphs and list items and then used that to set the size for the headlines. We don’t expect to use a headline deeper than h4, but if you plan to you’ll want to style it as well.

Making Your Links More Interesting

The default colors for links are blue and purple for unvisited and visited links respectively. While this is standard, it might not fit the color scheme of your pages, so let’s change it. In your styles.css file, add the following:

 a:link 
font-family: Arial, Helvetica, sans-serif;
color: #FF9900;
text-decoration: underline;

a:visited 
color: #FFCC66;

a:hover 
background: #FFFFCC;
font-weight: bold;

We set up three link styles, the a:link as the default, a:visited for when it’s been visited—we changed the color, and a:hover. With a:hover, we have the link getting a background color and going bold to emphasize it’s a link to be clicked.

Styling the Navigation Section

Since we put the navigation (id=”nav”) section first in the HTML, let’s style it first. We need to indicate how wide it should be and put a wider margin on the right side so that the main text will not bump up against it. We also, put a border around it.

Add the following CSS to your styles.css document:

 #nav 
width: 225px;
margin-right: 15px;
border: medium solid #000000;

#nav li 
list-style: none;

.footer 
font-size: .75em;
clear: both;
width: 100%;
text-align: center;

The list-style property sets up the list inside the navigation section so that it has no bullets or numbers, and the .footer styles the copyright section to be smaller and centered within the section.

Positioning the Main Section

By positioning your main section with absolute positioning, you can be sure it’ll stay exactly where you want it on your web page. We made it 800px wide to accommodate larger monitors, but if you have a smaller monitor, you might want to make that narrower.

Place the following in your styles.css document:

 #main 
width: 800px;
top: 0px;
position: absolute;
left: 250px;

Styling Your Paragraphs

Since I’ve already set the paragraph font above, I wanted to give each paragraph a little extra “kick” to make it stand out better. I did this by putting a border on the top that highlighted the paragraph more than just the image alone.

Place the following in your styles.css document:

 .topline 
border-top: thick solid #FFCC00;

We decided to do it as a class called “topline” rather than just defining all paragraphs in that manner. This way, if we decide we want to have a paragraph without a top yellow line, we can simply leave off the class=”topline” in the paragraph tag and it won’t have the top border.

Styling the Images

Images typically have a border around them, this isn’t always visible unless the image is a link, but we like to have a class within the CSS stylesheet that turns off the border automatically. For this stylesheet, we created the “noborder” class, and most of the images in the document are part of this class.

The other special part of these images is their location on the page. We wanted them to be a part of the paragraph they were in without using tables to align them. The simplest way to do this is to use the float CSS property.

Place the following in your styles.css document:

 #main img 
float: left;
margin-right: 5px;
margin-bottom: 15px;

.noborder 
border: 0px none;

As you can see, there are also margin properties set on the images, to make sure that they aren’t smashed up against the floated text beside them in the paragraphs.

Now Look at Your Completed Page

Once you’ve saved your CSS, you can reload the pets.htm page in your Web browser. Your page should look similar to the one shown in this picture, with images aligned and the navigation placed correctly on the left side of the page.

Follow these steps for all of your internal pages for this site. You should have one page for every page in your navigation.