Exercise - Importing CSS

In this exercise we will create several versions of the index.html file to practice including CSS in our web page.

Importing a CSS file from the root directory

Create an index.html file that includes (imports) the external style.css file located in the root directory.

Solution

The index.html source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Include a single CSS file -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Here, we used a document-relative path for our CSS file. On a live server, you might want to include the / symbol, which represents the root directory on your web server. The code snippet then becomes:

<link rel="stylesheet" href="/style.css">

Importing a CSS file from a custom directory

Create an index.html file that imports the external style.css file located in the css/ directory.

Solution

The index.html source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Include a single CSS file from the css/ directory -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

</body>
</html>

The above code includes the style.css file from a css/ folder:

<link rel="stylesheet" href="css/style.css">

In production, on a live server, you can use the path with the root folder symbol (/) in front:

<link rel="stylesheet" href="/css/style.css">

Importing multiple CSS files

Create an index.html file that imports multiple external CSS files.

Solution

The source code for the index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Include several CSS files -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/other_file.css">
</head>
<body>

</body>
</html>

In this exercise, we created an HTML document that imports two external CSS files:

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/other_file.css">

Importing CSS from an external website/server

Create an index.html file that imports a CSS file from an external server/website.

Solution

The index.html file listing:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Include a CSS file from a remote host -->
    <link rel="stylesheet" href="https://www.example.com/style.css">
</head>
<body>

</body>
</html>

This HTML document imports the style.css file from some external https://www.example.com/ website. These websites/servers hosting CSS, JavaScript, and media files are called Content Delivery Networks or CDN.

Note: Replace "https://www.example.com/style.css" with the actual URL that points to a CSS file hosted on an external website/CDN.

Creating inline CSS styles

Create an index.html file that specifies several inline CSS styles.

Solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
    <!-- Define inline CSS styles -->
    <style>
        h1 { color: red; }
        h2 { color: green; }
        h3 { color: blue; }
    </style>    
</head>
<body>

</body>
</html>

This example defines several inline CSS rules inside the <style> element:

<style>
    h1 { color: red; }
    h2 { color: green; }
    h3 { color: blue; }
</style>

Summary

In this exercise, we went through several scenarios of including external CSS files and defining inline CSS styles. For more information on importing CSS files, check out our Importing CSS tutorial.

In the next exercise, we will practice importing JavaScript code/files.