Cascading Style Sheet: Focus on the Internal CSS

Updated on May 28, 2019
Msmillar profile image

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

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

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!

view quiz statistics

Questions & Answers

    © 2019 Joanna

    Comments

    Submit a Comment

    No comments yet.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, owlcation.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://owlcation.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
    ClickscoThis is a data management platform studying reader behavior (Privacy Policy)