Using Embedded CSS Styles
Learn how to utilize embedded stylesheets to organize your styles in the same file as the HTML code. This is a helpful tool when building websites, however this is still considered a poor practice for production applications and should only be used for debugging and development.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In the previous video, we discussed inline styles, and now, embedded styles.

For this video, I've removed all the code except for a heading and a paragraph, just to make it easy to follow.

Embedded styling means they are not inline, however, they are still embedded in the same HTML file. Though external style sheets are what is more commonly used, it's beneficial to be aware of this option.

For embedded styling, go to your <head> tag, and add a new tag called <style>. Inside this opening and closing tag, insert all the different styles such as background color, font family, and font sizes. We have to select the section for which a particular style to be applied. To do this, mention a section and follow it with curly braces, like this:

<style>
  body {
    background-color:  blue;
  }
  h1 {
    color:  white;
    font-family:  sans-serif;
    font-sizes:  2.5em;
  }
  p {
    padding:  42px;
    width:  300px;
    color:  red;
  }
</style>

These changes are reflected on our page now.

medium

In general, it's a CSS practice to put the code in a single line, if you have only one item. So, our code should look like this:

<head>
  <title>Embedded CSS</title>

 <style>
    body { background-color: blue; }

    h1 {
      color: white;
      font-family: sans-serif;
      font-size: 2.5em;
    }

   p {
      padding: 42px;
      width: 300px;
      color: red;
   }
 </style>
</head>

In the next video, we'll talk about using external stylesheets.