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.
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 :
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.
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: