Adding CSS to HTML

Embedded

The second way in which we can add CSS by using embedded styles on the page. By having embedded styles, we apply a format to only this page.

An example might look like this.

<html>
    <head>
        <title>Embedded Style Example</title>
        <style>
            span{
                background-color:red;
            }
        </style>
    </head>
    <body>
        <span>This is the first sentence.</span>
        <br />
            This is the second sentence.
        <br />
        <span>This is the third sentence</span>
    </body>
</html>

In this example, you see the first, and the third sentence has a background color of red. While the second sentence does not. The style at the top of the page within the <head> tags applies the background color to all span tags.

What are some of the positives and negatives of using embedded styles?

See the Pen by Michael Cassens (@retrog4m3r) on CodePen.