The most common solution in website design is the use of
one or more files that contain the styles of the whole site. These
files must have a .css
extension and contain styles with the same
syntax as internal styles.
In the page header, specify the path to the CSS style file thank to the <link>
tag:
<link rel="stylesheet" href="path/file.css">
The rel
attribut means relationship which corresponds to the relationship between
the file and the page. It can be of many kinds (stylesheet, icon ...).
The following code presents an example of external CSS styles:
<!DOCTYPE html>
<html>
<head>
<!-- Police de caractère Google -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Architects+Daughter|Orbitron">
<!-- Style du site lucidar.me -->
<link rel="stylesheet" type="text/css" href="https://lucidar.me/css/generic.css">
</head>
<body>
<h1>Title</h1>
<h2>Sub-title</h2>
<p>Paragraph</p>
</body>
</html>
The previous code displays the following page in the browser:
The first <link>
tag import a font from Google Font,
the second tag import styles from this website!
Let's consider the html page bellow. Load the following stylesheets:
https://lucidar.me/en/web-dev-class/files/css-style-1.css
https://lucidar.me/en/web-dev-class/files/css-style-2.css
<!DOCTYPE html>
<html>
<head>
<!-- Load stylesheet here -->
</head>
<body>
<h1>One page, many styles</h1>
<h2>Heading 2 title</h2>
</body>
</html>
Here is the expected result for the first style: