Lesson 2.3. Internal CSS

Syntax

When you bring all styles together in one place, the styles are no longer localto a given tag It becomes impossible, with online syntax, to associate a style to a general type of tag. It becomes necessary to use selectors to define which entities will be affected by the style. Here is the general syntax for selectors:

In this illustration, heading 1 titles and their descendants will be blue in italic. There are a large number of selectors for picking page entities with different criteria.

CSS declarations must be done in a <style> tag placed in the header of the page.

Example

Here is an example of internal styles for a given page, located in the HTML header:

<!DOCTYPE html>
<html>

  <head>
    <style>
      body { background-color: #9f9f9f;}
      h1 { color: indigo; }
      p {margin-left: 40px;}
    </style>
  </head>

  <body>
    <h1>Title</h1>
    <p>Paragraph</p>
  </body>

</html>

Le code précédent affiche le rendu suivant dans le navigateur :

Try it online

In the example above, we see the use of the body selector which allows to define the properties of the page body (here the background color of the page).

The style declared in the header will be applied to the whole page. When we need to apply the same styles to all pages of a site, the best soltuion is to use external CSS.

Exercice

Add internal CSS to colorize each title with the associated color (page background mus be black):

<html>

  <head>
    <!-- Add styles here -->
  </head>

  <body>
    <h1>#FFFFFF</h1>
    <h2>#CCCCCC</h2>
    <h3>#AAAAAA</h3>
    <h4>#777777</h4>
    <h5>#444444</h5>
    <h6>#333333</h6>
  </body>
</html>

Here is the expected result:

Try online

Solution

Lesson 2.2 Summary Lesson 2.4

Lesson 2.3. Internal CSS

Syntax

Example

Exercice

See also