Lesson 2.4. External CSS

External CSS files

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.

Internal CSS general syntax

Syntax

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

Example

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!

Exercice

Let's consider the html page bellow. Load the following stylesheets:

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

See also


Last update : 03/10/2022