Styling a Notepad Created Web Page with CSS

Create the CSS Style Sheet

The same way we created a separate text file for the HTML, you will create a text file for the CSS. If you need visuals for this process please see the first tutorial. 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've got a style sheet for your web site, you'll need to associate it to the Web page itself. To do this you use the link tag. Place the following link tag anywhere within the


Fix the Page Margins

When you're writing XHTML for different browsers, one thing you will 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 things 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 my 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 change the color, and a:hover. With a:hover we have the link get a background color and go 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 to have 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 that it will stay exactly where you want it to stay 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 way. 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 that is 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 same steps for all of your internal pages for this site. You want to have one page for every page in your navigation.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Styling a Notepad Created Web Page with CSS." ThoughtCo, Feb. 15, 2023, thoughtco.com/css-and-notepad-created-web-page-3466582. Kyrnin, Jennifer. (2023, February 15). Styling a Notepad Created Web Page with CSS. Retrieved from https://www.thoughtco.com/css-and-notepad-created-web-page-3466582 Kyrnin, Jennifer. "Styling a Notepad Created Web Page with CSS." ThoughtCo. https://www.thoughtco.com/css-and-notepad-created-web-page-3466582 (accessed March 19, 2024).