Skip to content

C010 Getting Started with CSS

In this task, you will attach CSS to a document. Start by creating a new HTML document with the following content:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
</head>

<body>
    <h1>CSS</h1>    
</body>
</html>

External CSS

Now, create a new CSS document called style.css with the following content:

h1 {
    color: blue;
}

And make sure the document is linked to the HTML document in the head section with:

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

View the HTML page through Live Server. What color is the heading? It should be blue. Also, open the F12 tool by right-clicking on the heading and selecting “Inspect.” Can you see that the heading is blue and that it has overridden the browser’s default stylesheet?

Internal CSS

Now, add the following to the head section after the previously mentioned link:

<style>
    h1 {
        color: green;
    }
</style>

View the HTML page through Live Server. What color is the heading? It should be green. Also, open the F12 tool by right-clicking on the heading and selecting “Inspect.” Can you see that the heading is green and has overridden both the external stylesheet and the browser’s default stylesheet?

Order

Try swapping the positions of the link and style tags. What color is the heading now? Check the F12 tool as well.

Inline CSS

Modify the heading to the following:

<h1 style="color: red">CSS</h1>

View the HTML page through Live Server. What color is the heading? It should be red. Also, open the F12 tool by right-clicking on the heading and selecting “Inspect.” Can you see that the heading is red and has overridden both the external, internal, and the browser’s default stylesheet?

See my solution

Html file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1 style="color: red">CSS</h1>
</body>

</html>

css file

h1 {
    color: blue;
}