Lesson 4
Linking External CSS to HTML
Topic Overview and Actualization

Welcome to our lesson on beautifying your static To-Do list using external CSS! As you know, external CSS promotes cleaner HTML and easier site maintenance. It's like designing one cover template and using it for all books in a series, by just altering the title and image.

Today, we'll create, link, and use an external CSS file to make your ToDo list more visually appealing.

Understanding External CSS

External CSS is simply a separate file, containing only CSS rules with a .css extension. You can link this to your HTML file, allowing you to apply the same styles across multiple web pages. Think about different methods of CSS as different approaches to book cover design. Your external CSS code is like the master template used in all the books.

Creating the External CSS File

Let's create an external CSS file. In CodeSignal's IDE, create a text file named style.css. Now you've created a new CSS file. Let's add some rules to it:

CSS
1body {
2    background-color: lightgray;
3}
4
5ul {
6    font-family: Arial, sans-serif;
7    color: darkblue;
8}

Just like that, you've made your external CSS file!

Linking the CSS File

To link our CSS file to the HTML document, we'll use the <link> HTML element inside the <head> section. The <link> element has three attributes we will use:

  • rel: Specifies the relationship between the HTML file and the linked document. For CSS, it's "stylesheet".
  • type: The type of media we are linking. For CSS, it's "text/css".
  • href: The location of the stylesheet, that is, the path to our style.css file.

Add this to the <head> section of your HTML document:

HTML, XML
1<link rel="stylesheet" type="text/css" href="style.css">

If there are multiple external CSS files linked, the later ones will overwrite the rules of the previous ones.

Lesson Summary and Practice

You’re another step closer to web development — you can now create, link, and use an external CSS file. Understanding the importance of visually appealing web pages will guide you in effective web design in your own projects.

Are you ready to try exercises on this new skill? Though challenging, they're essential for reinforcing what you've learned. Get ready for the next exciting stage in our coding journey!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.