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>
<!-- notice the style tag is in between the open and closed head tag -->
<!-- this is an example of an embedded style because it is
between the style tags -->
<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>
*Note - a span tag is a tag that can be included inline with other text. It's allows us to style text that is inline with other text. 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.