Skip to content

Cool Stylin’ Sheets

Let’s add some Cascading Style Sheets (CSS) to visualize our page better.

Insert the following code in the <head> right before the closing tag (i.e. </head>):

index.html
<style>
    html { /* (1)! */
        background-color: azure;/* (2)! */
    }
</style>
  1. html is the CSS selector, basically saying, “get anything in the html tags!
  2. background-color is the key, and then azure is the color we are setting it to.

What happened to the page?

Answer

It became Azure!

That’s cool! But this way of using CSS, called inline CSS, can make your HTML file long and cumbersome. So the better practice is to have a separate file for CSS and bring that whole file in as a linked source.

Adding linked CSS

Click the New Folder button:

Type in styles to name the folder styles:

Highlight the styles folder by clicking on it:

Then click on the New file button:

Name the file style.css:

Double click to open the new file. Then copy and paste the following CSS:

styles/style.css
body{
    display: grid;
    /* grid-template-columns: 1fr;  */
    grid-auto-rows: auto 1fr;
    grid-template-areas: "header" "main_content" "footer";
    background-color: aqua;
    /* height: 100vh; */
}

header{
    grid-area: header;
}

#footer{
    grid-area: footer;
}

.main{
    grid-area: main_content;
    grid-template-areas: "content";
}

#contents{
    grid-area: content;
}

Reminder!

Remember to save the style.css file (PC:Ctrl+S | Mac:Cmd+S!

Next, go back to the index.html file and replace your entire <style> </style> content and tags with this code:

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

This code tells the HTML file to use all of the CSS styles linked in the href attribute.

More external CSS files?

You can have as many external references as you’d like, as long as you link them in this way. The bottom most CSS file has the most priority because it is the last CSS read and applied!

⚽ In-Class Exercise #2

Task

  1. Link Leaflet’s CSS that exists at this url: https://unpkg.com/leaflet@1.7.1/dist/leaflet.css

Extra: If you finish early, try to see if you can load Leaflet’s CSS locally instead!

We will go into CSS in more detail later, but what you need to know is that CSS has HTML element selectors which are then followed by the styles in { }.

🏁Checkpoint

Check to see if your code looks likes the following before moving on:

index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
        <!-- hint: remember to change your page title! -->
        <meta charset="utf-8" />
        <link rel="shortcut icon" href="#">
        <link rel="stylesheet" href="styles/style.css">

        <!-- Leaflet's css-->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    </head>

    <body>
        <header>
            <!-- hint: you can make a menu with other links here if you'd like -->
        </header>

        <div class="main">
            <div id="the_map"></div>
        </div>
        <div id="footer">
            Copyright(2022)
        </div>
        <script src="js/init.js"></script>
    </body>
</html>
styles/style.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body{
    display: grid;
    /* grid-template-columns: 1fr;  */
    grid-auto-rows: auto 1fr;
    grid-template-areas: "header" "main_content" "footer";
    background-color: aqua;
    /* height: 100vh; */
}

header{
    grid-area: header;
}

#footer{
    grid-area: footer;
}

.main{
    grid-area: main_content;
    grid-template-areas: "content";
}

#contents{
    grid-area: content;
}