How to connect a CSS file to an HTML page
Until the CSS styles are connected to the HTML page, there will be no effect from their use. There are several ways to do this. In order to demonstrate how each of these methods works, take, for example, an html file with the following content.
Option 1. Inside the opening tag using the style attribute.
For elements on the page that sit inside the body element, you can add the style attribute. The value of this attribute can be CSS properties and values that will be applied to this element. Let’s see how this works with a specific example. A style attribute has been added for the <p></p> element.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titles</title>
</head>
<body>
<p style="color:red;">Content</p>
</body>
</html>
Option 2. Inside the style.
Another way to include CSS styles is to use the <style> element with the type = “text / css” attribute. This attribute is required.
Let’s see how this looks like with a specific example.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {color:red;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Header</title>
</head>
<body>
<p>Content</p>
</body>
</html>
Option 3. Connecting an external style file.
And the last option for connecting CSS styles is using the link element, which allows you to connect external files to the HTML page. Pay attention to the attributes that are specified for this element.
<link rel="stylesheet" href="/style.css" type="text/css"/>
They are also required. The href attribute specifies the path to the css file to be connected.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/style.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Header</title>
</head>
<body>
<p>Content</p>
</body>
</html>
The style.css file contains the following code:
p {color:red;}
These 3 ways to include CSS styles are very often used in practice. I advise you to experiment with these examples on your computer. In the future, this will be very useful to you.
