Internal CSS: Definition of styles at the page level.

We can also make the definition of styles for the different HTML elements of the page in a special section of the header that we enclose between the style HTML tags.

<style>
</style>

The problem of the previous concept, where we had to create a similar style for the h1 element can be solved in a more adequate way by using internal css.

Problem: Showing two titles with red text on a yellow background.

<!DOCTYPE html>
<html>

<head>
    <title>Problem</title>
    <meta charset="UTF-8">
    <style>
        h1 {
            color: #ff0000;
            background-color: #ffff00
        }
    </style>
</head>

<body>
    <h1>First title</h1>
    <h1>Second title</h1>
</body>

</html>

The result in the browser when loading this page is:

We can see that in the header of the page we define the section:

<style>
    h1 {
        color: #ff0000;
        background-color: #ffff00
    }
</style>

It must be enclosed by the style element.

In this example we indicate to the browser that in all places on this page where the h1 element is used, it should apply red as the text color style and yellow as the background.

We can see that it is much more efficient than defining the styles directly on the HTML elements within the body of the page.

We can define styles for many elements in the style section:

<!DOCTYPE html>
<html>

<head>
    <title>Problem</title>
    <meta charset="UTF-8">
    <style>
        h1 {
            color: #ff0000
        }

        h2 {
            color: #00ff00
        }

        h3 {
            color: #0000ff
        }
    </style>
</head>

<body>
    <h1>red</h1>
    <h2>green</h2>
    <h3>blue</h3>
</body>

</html>

Robort Gabriel

Lagos, Nigeria

Skills