When you are looking at the HTML for the web page you are building, it should usually look something like this when you are first beginning:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
This is the basic skeletal structure of any web page.
It is possible to insert a style sheet anywhere you want to on a web page. However, if you want to make a basic set of rules that will hold true throughout the entire page, then you will want to insert the style sheet inside of the <HEAD> part of the document.
The <HEAD> is where all information about the page that is not actually the page resides. The most commonly used <HEAD> element is the <Title> command, which inserts the name of the page in the top bar of the browser. There are many more things that you can put into the <HEAD> section though, like META tags, javascript and our subject for the day, cascading style sheets.
Inside of the <HEAD> section of the document, you will want to put the following HTML tag:
<STYLE TYPE=“text/css”>
Don’t forget you will need a closing tag, which will come at the end of your style rules and will look like this:
</style>
This will form the basic outline of your style sheet, the style rules will come in between. In fact, we already have one style rule written up already, so let’s insert that into our HTML.
<HTML>
<HEAD>
<STYLE TYPE=“text/css”>
h1 {font-color: red; font-size: 48pt}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
The bolded part is our style sheet. Now every time that we use the h1 command, the text will be size 48 and red. Let’s try it out for ourselves.
<HTML>
<HEAD>
<STYLE TYPE=“text/css”>
h1 {font-color: red; font-size: 48pt}
</STYLE>
</HEAD>
<BODY>
<H1>My Style Sheet Worked!</H1>
</BODY>
</HTML>
Inserting this code should give you red letters written in a size 48 font when you look at it in your browser.