The Internal Cascading Stylesheet

You have a website document that you’re setting up and want to add some styles to it. That’s great! Adding styles to your website will definitely add to its curbside appeal and attract more readers! Now you have to ask yourself, “How do I add a CSS code to my webpage?”

There are three methods for adding CSS code, aka: styles, to your webpage(s) document:

  • The internal stylesheet – Usually applied to a single page.
  • The inline stylesheet – Used to style an element on a page.
  • The external stylesheet – This type of stylesheet is used for a multi-page website.

Each style type has its benefits and drawbacks. In this article, we will go over the internal CSS.

The internal CSS is used when you have a single page you want to style. If you add more than one page to your website, you will want to use an external stylesheet. This is due to two reasons. One being the internal stylesheet can make your website load slower. And the second reason is an external stylesheet is far more practical for a website with multiple pages.

The external CSS file is more practical for multiple page websites because one file is created, a .css file, which styles all of the website out of this one file. Otherwise, if you used an internal or inline CSS style, you would have to place it on every single page of your website! This would be a huge, time intensive, task. Imagine if you had a website that included twenty, or more pages! This is not an unheard of size of a website. Actually that is a conservative number of pages. Placing internal or inline on all those pagers would be impractical. By using an external CSS file it affects all of the pages. When you edit the one CSS file, it will affect all the pages on your website.

On occasion you may find that you want to alter some of the text on your webpage, or maybe you’re intending to set-up a one page landing page. For these situations the internal CSS code would be used.

When you are competing for screen time on the internet, the speed at which your website loads is paramount. The latest study on page speed and user engagement, by Forrester Consulting, reveals the average American user will wait all of 2 seconds for a website to load before they will abandon the page!

If you plan on competing with a 2 second load time, an internal style sheet won’t always cut it.

Why does it take longer to load? The internal style sheet is written into the <head> section of the page. With more information written into this section, and anywhere on the page, there is more for the browser to process and present. Albeit some information like styles is hidden from the user’s view, it still must be processed by the browser.

Yes, we are talking about milliseconds, but when you have 2 seconds to present your page to the user, every millisecond counts!

Create An HTML5 Document

Let’s create a document together. We’ll write an HTML5 document without any CSS code. We’ll save it, then open it in a browser to view it.

Then, we’ll go back and add an internal CSS code to the same HTML5 document, save it, and open it again in a browser to see the difference!

The 1st step is to open a new document in either notepad or wordpad where we will type up a webpage using HTML5 code. I’ll be using notepad.

This is a sample template of the format for an Internal CSS code. If you want you can copy it for practice. The “. . . . . .” should be replaced with your CSS code accordingly as we will see below.

What you need to do now is copy exactly what I have written below. Either copy and paste it into your note or wordpad document. Or type it into your document just make sure it is exactly the same.

<!doctype html>
<html>
<head>

</head>

<body>
<h1>No Styles Page</h1>
<p>This is an HTML5 document, or page, with no styles added. This is what the whole internet would look like if we did not have CSS code we can add to spice up this drab writing.</p>
</body>

</html>

The 2nd thing we need to do is Click File and Save as… In the window the pops up there is a box at the bottom that says File Type. Click it and from the drop-down menu select All File Types. Above All File Types is a box for you to name your file. Type in a name for your file, then a period and HTML. For example: mywork.html or firstpage.html. And be sure to put the period with HTML. Make a note of the folder you are saving this file in. Click Save.

After you save your page as an HTML document leave the original open, or save it again but save it as a .txt document so we can edit it later.

Locate your new file where you noted that you saved it. It should have your browser as its icon. Double click on your file, and it will open a new browser tab with your page just like the photo below.

If the entire internet looked like that you and I would be bored out of our minds!

This is where your CSS stylesheet comes in! We will be adding an internal stylesheet. This will be contained within those </head> and </head> labels we put in our HTML5 document.

Go back to the original document we typed up in the 1st step. Add to the document, or copy and paste the text below:

<!doctype html>
<html>

<head>

<style>
h1 {color: red;}
body {color: green;}
p {text-align: center; font-family: "Georgia"}
</style>

</head>

<body>
<h1>Styled Page!</h1>
<p>This is an HTML5 document, or page, with styles added! This catches your attention    much better don't you think? There are so many elements you can change with a CSS stylesheet the limits are virtually endless!</p>
</body>

</html>

We have only added the <style> and closing </style> tags and there elements to the document. I updated the content of the body to go with the theme of the page better.

Now we need to save it again. You can save it the same way as in step 2: File –> Save As –> File Type: All File Types –> and the name of your document.

Now find the document you just saved and double click on it, and it will open in your browser with the new attributes we just added!

You can see the changes we made just by adding a CSS style in the document. The title or h1 element stands out in large red letters. And the font is now Georgia and green!

You can play around with the elements in your document all you like. After you change an element, save it as .html and open it in your browser to see the changes!

CSS Elements

When using the name of a color, you can use HEX, RGB, HSL, RGBA or HSLA values. Also each color value IE: red, blue, green, etc. can be manipulated within the CSS code to alter its values. A simple Google search for CSS styles will display a list of websites where all the codes are listed. Listing all of them here is outside the scope of this article. CSS color code alone has 140 color value names, that does not include the alternate methods of entering a color name!

Using the sample practice pages we created earlier practice changing the values of the elements, save and then display them to see how it worked out. Try adding different values such as Borders, Outline and Icon. With a little practice you’ll be able to style your pages to your satisfaction!

Thanks for reading!

Leave a Reply

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