Styling a Notepad Created Web Page with CSS

01
of 10

Create the CSS Style Sheet

Create the CSS Style Sheet
Create the CSS Style Sheet. Jennifer Kyrnin

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
02
of 10

Link the CSS Style Sheet to Your HTML

Link the CSS Style Sheet to Your HTML
Link the CSS Style Sheet to Your HTML. Jennifer Kyrnin

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 <head> tags of your pets.htm document:

<link href="styles.css" rel="stylesheet" type="text/css">
03
of 10

Fix the Page Margins

Fix the Page Margins
Fix the Page Margins. Jennifer Kyrnin

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.

I prefer to start my pages in the upper left corner, with no extra padding or margin surrounding the text. Even if I'm going to pad the contents, I set the margins to zero so that I'm 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;
}
04
of 10

Changing the Font on the Page

Changing the Font on the Page
Changing the Font on the Page. Jennifer Kyrnin

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 the Web browser itself, so if you don't define the font, you really won'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;
}

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

05
of 10

Making Your Links More Interesting

Making Your Links More Interesting
Making Your Links More Interesting. Jennifer Kyrnin

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;
}

I set up three link styles, the a:link as the default, a:visited for when it's been visited, I change the color, and a:hover. With a:hover I have the link get a background color and go bold to emphasize it's a link to be clicked.

06
of 10

Styling the Navigation Section

Styling the Navigation Section
Styling the Navigation Section. Jennifer Kyrnin

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. I 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.

07
of 10

Positioning the Main Section

Positioning the Main Section
Positioning the Main Section. Jennifer Kyrnin

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. I made mine 800px wide to accomodate 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;
}
08
of 10

Styling Your Paragraphs

Styling Your Paragraphs
Styling Your Paragraphs. Jennifer Kyrnin

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;
}

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

09
of 10

Styling the Images

Styling the Images
Styling the Images. Jennifer Kyrnin

Images typically have a border around them, this isn't always visible unless the image is a link, but I like to have a class within my CSS stylesheet that turns off the border automatically. For this stylesheet, I 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. I 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.

10
of 10

Now Look at Your Completed Page

Now Look at Your Completed Page
Now Look at Your Completed Page. Jennifer Kyrnin

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, Mar. 1, 2017, thoughtco.com/css-and-notepad-created-web-page-3466582. Kyrnin, Jennifer. (2017, March 1). 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 October 24, 2017).