Internal Styles

Syntax Summary

So, as we just learned about inline styles, it's time to learn about the second of the three ways to implement style to your HTML document, this is done through internal styling.

I'm going to be honest and blunt here, internal styling is really only good for landing pages or one-page websites. If your website has more than one page, an external style sheet is the way to go.

None the less, it's good to learn the style element because it's pretty useful in some instances.

how we do...

So unlike inline styling, internal styling won't be located in a tag or element, but instead, you're going to place it in the head section of your HTML document. Like so...

<head>
  <style>
  
  </style>
</head>

Now, if you're concerned that this will appear on your website, let me remind you that anything that appears in the head section is strictly for the browser's functionality, and won't be visible to your websites' visitors.

Let's take a time to see this in practice...

<head>
  <style>
    p {
      background-color: black;
      color: white;
      padding: 10px 15px;
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>

<p>Percocets, molly, Percocets</p>

This is your common internal styling layout. Here is the end result...

Percocets, molly, Percocets

As you can see, internal styles are pretty easy to apply, but if you have a multi-page layout, it's not feasible to implement and maintain. Cause what if you want to make a style change? You would have to go into every single document and manually make the changes over and over again. Which is really a waste of time.

In the next post, I will show you how to utilize CSS in a fast efficient manner through external style sheets.

Encycodepedia is a reference guide to the common syntax and terminology used in everyday programming.

Encycodepedia CSS covers the styling component of building websites.