Updated date:

Cascading Style Sheet: Focus on the Internal CSS

Author:

Ms. Millar has been an online writer for over eight years. She is well versed in website development with several websites she has created.

Further Reading on the Internal CSS

There are three methods for adding CSS code, AKA: styles, to your webpage 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 has its benefits and drawbacks. In this article, we will cover 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 file containing the stylesheet is a .css file. When you edit the CSS file, it will affect all the pages on your website.

If you decide a specific line or word should appear different than what the stylesheet is set for, you can create an inline style for that word or line. Your pages will still load quickly and be easy for you to edit.

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!

Internal Example

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.

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.

A Simple HTML5 With No Style

<!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>


Save & Display Your HTML5

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.

What You Should Have on Your Browser Screen

Black and white, boring, no CSS webpage.

Black and white, boring, no CSS webpage.

Add Some Style!

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:

Add CSS Code For Style!

<!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>

Save It

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!

New Attributes With CSS Added

Now your page has style!

Now your page has style!

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!

What You Can Do With the CSS Code

When an HTML5 page is created, it is merely the typewritten words that are presented. Just like the sentences, I'm typing here. It presents in black, standard type, with nothing else to it.

Adding CSS code enhances anything you wish about the letters and numbers on the pages! Whichever style you choose to apply, or combination of styles, it spices up the letters presented to catch your reader's attention, or just make the page pleasing to your eye.

With the CSS code you can:

  • Change text color.
  • Set the background color.
  • Create and color a border.
  • Change the attributes of the padding.
  • Set the height and the width.
  • Set the font type.
  • Set the font color.
  • And the list goes on!!

Let's See What You Remember!

For each question, choose the best answer. The answer key is below.

  1. How many methods are there for writing a CSS Style?
    • 100's
    • None
    • Three
  2. What does CSS stand for?
    • Crazy Sub Scripts
    • Cascading Style Sheet
    • Create Something Sensational
  3. Do you feel like you have a better grasp of CSS than when you arrived?
    • Absolutely, thank you!
    • No. I'm going back to bed.
    • Meh, I'm bored.

Answer Key

  1. Three
  2. Cascading Style Sheet
  3. Absolutely, thank you!

© 2019 Joanna

Related Articles