Create a CSS Stylesheet in Notepad

We went over creating an HTML page with Notepad yesterday. Today we’ll create a CSS AKA: Cascading Style Sheet.

A CSS code is used to style an HTML document. When you create a website a browser reads the HTML file and any CSS code, javascript, etc., written within the HTML. It then displays it according to what those codes tell it to do.

Internal Style Sheet

Sometimes the CSS code is written directly into the HTML. This is called an internal style sheet. The code is written between the <head> and </head> tags using the <style> tag.

Inline Style Sheet

Other times the CSS code will affect only a specific phrase, word or paragraph. This is called an in line style sheet. It is written on the same line that it is to affect using the <style> tag and the attribute that is to be applied.

External Style Sheet

When the website has several pages in it an external CSS is used. This is the type of style sheet we will go over today. The external style sheet can be applied to several HTML documents. When the CSS code is altered it will affect all the pages. An entire website can be formatted from one style sheet. This saves a lot of time, otherwise you would have to modify every single page of a website.

By entering the <link> tag the browser reads the file you have entered a link to, and applies it across all the pages of the website.

The <link> tag is a pointer that is placed inside the <head> and </head> tags of the HTML document.

Any text editor can be used to write a CSS style sheet. We can use Notepad as we did with the HTML we wrote yesterday. We’ll have it affect the HTML we created yesterday as well.

Create Your CSS Code

Open a new Notepad document. Click Start ->All Programs -> Notepad. This is going to be the CSS file that we put a link to our HTML document.

Enter the code:

body
{background-color:yellow;}
h1
{color: white;text-align: center;}
p
{font-family:”Georgia”;font-size:30px;}

Click Save and name it something like “mystyle” (minus the quotes). Save it as a .css file type.

To save it as a .css file type: Click File, then Save. In the box at the bottom where it says name type mystyle.css. Below that box is another box. Click on the arrow at the side of it and select ALL FILES. Click Save.

Now we will add a link to the .css file you just created in the HTML document from yesterday. It will cause the HTML document to “look” for your style sheet, we just created, in the folder you direct it to look in, and then it will apply what you have written.


Open the HTML from yesterday. If you can’t find it make sure the ALL FILES is selected in the Open File window at the bottom of the box (see photo below).

Add the following <link> to the HTML after the <head> section. (Insert the name in which you saved your .css file if it is different than the suggested mystyle.css: <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> It should look like the photo below.

This tells the browser you’re using a style sheet and it is in the format of text/css and to retrieve it in “mystyle.css”

Now save the HTML document = File, Save.

Locate the HTML you just now saved. This time double click on it with your left clicker. Your document should open in your web browser like a web page with the edits you just did. It should look like the photo below:

That Was Too Easy! Congratulations!

You should practice changing the color, font and size. Just open your style sheet and change the words. For example: change yellow to blue, or light blue, or pink, whatever you like. If you know the number for a color you like you can enter that number instead of the color name. HTML understands literal color names and color code numbers. Then save the style sheet and open your HTML by double clicking on it and voila, your changes have taken place on the screen!

If an external link is placed after the internal style sheet in the HTML <head> section the external will take precedence over the internal style sheet.

Website Development Shortcut

As you have learned, writing HTML is meticulous. Every semicolon, every bracket, every closing / must be in place or the browser won’t display it correctly, or at all. This can be HIGHLY frustrating when your page won’t display, or displays wrong, and you have to go through line after line of your code looking for what you missed (Yes, what you missed. Browsers don’t read wrong.)

If you will be writing more than one page of HTML, or just don’t want to forget how to write it, you can simplify the process by saving a template, or commonly called a frame of the HTML that you know works. Then, when you need to write an HTML page all you need to do is open your frame and fill in the details!

It looks like an article explaining frames is called for next!

Leave a Reply

Your email address will not be published. Required fields are marked *