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.

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:

Try it online

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:

Start with https://lucidar.me/en/web-dev-class/files/css-style-1.css
then replace by 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:

Try online

Solution

Lesson 2.3 Summary Lesson 2.5

Lesson 2.4. External CSS

External CSS files

Syntax

Example

Exercice

See also