Linking CSS to HTML

CSS Fundamentals: Beginner’s Guide to Web Styling

Sobre a Aula

Linking CSS to HTML

Hello, everyone! Welcome to the lesson on Linking CSS to HTML.

In this lesson, we will learn how to link CSS to HTML.

What is CSS linking?

CSS linking is the process of connecting a CSS file to an HTML file. This allows you to use CSS rules to style HTML elements.

How to Link CSS to HTML?

There are two main ways to link CSS to HTML:

Including CSS in the HTML file
Creating an external CSS file

Including CSS in the HTML file

The simplest way to link CSS to HTML is by including the CSS directly in the HTML file. To do this, use the style tag within the HTML head element.

Example:

<html>
<head>
  <title>My Page</title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>This is a title</h1>
</body>
</html>

This code includes a simple CSS style that sets the text color of h1 elements to red.

Note:

If you include CSS in the HTML file, all CSS rules will be applied to all elements on the page.

Creating an external CSS file

The more flexible way to link CSS to HTML is by creating an external CSS file. To do this, create a file with the .css extension and store it in the same directory as the HTML file.

Example:

h1 {
  color: red;
}

Next, link the external CSS file to the HTML file using the link tag within the HTML head element.

Example:

<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>This is a title</h1>
</body>
</html>

This code links the style.css CSS file to the HTML file.

Note:

If you link an external CSS file, you can control which CSS rules are applied to which elements using CSS selectors.

Next Module

After completing this lesson, you will be able to:

Link CSS to HTML using two different approaches.
Use CSS selectors to control which CSS rules are applied to which elements.

With this knowledge, you’ll be ready to start styling basic elements on a web page.

Siga-me

Entrar na conversa