Internal Stylesheet

Name: Learn CSS: Introduction
Rating: 4.741400000000000000 (642 reviews)

CSS can be written in an HTML document using the internal stylesheet. The internal stylesheet is situated between head tags in the HTML document.

You can use this technique when you want to apply styles to a specific page.

Syntax

1<head>
2  <title>Internal Stylesheet</title>
3  <style>
4    /* Your CSS Rules goes here */
5  </style>
6</head>
7

The above code shows how to declare an internal stylesheet in HTML. The style element is located in the head part of the HTML document that contains CSS rules/ruleset.

The only difference is the absence of the link tag that we used to link the stylesheet in our HTML document.

Example

1<head>
2  <title>Internal Stylesheet</title>
3  <style>
4      h1 {
5          color: blue;
6      }
7      p {
8          border: 1px solid black;
9          padding: 20px;
10      }
11  </style>
12</head>

In this example, we established styles for the h1 and p elements using specific CSS properties. We can say that the rules will apply to all h1 and p elements in the document.

Instructions

Let's move the inline style that was added to the paragraph into an internal stylesheet.
Start by adding an empty <style> element in the head of index.html.

Inside of the <style> element, add a CSS ruleset targeting the paragraph (the <p> element). You can leave the declaration block empty for now

Next, place just the declaration from the inline style into the empty declaration block in the inline stylesheet.

Finally, delete the inline style from the <p> element.
Notice how the styling works the same in the stylesheet as it did in the inline style!

Already have an account?

Course content