For an HTML file and a CSS file to communicate with each other, a connection needs to be established. An HTML tag called <link/> needs to be implemented in the <head> section of the HTML file. The example below shows the attributes necessary to make a <link/> tag link up with a CSS file.
<link rel="stylesheet" type="text/css" href="style.css">
The rel attribute establishes the relationship between the HTML file and the file being linked to. In this case, rel="stylesheet" indicates that the linked file will be serving as a stylesheet for the HTML file. Then, the type attribute sets the internet media type that should be expected. Here, it is defined as "text/css", so the file will be in text format and should be parsed according to CSS syntax.
With all the general information out of the way, the only piece of information left is the file you're linking to. Like with anchor tags, the <link> tag uses the attribute href to set the file's location. Simply set the file path to the folder and CSS file that you want applied to the web page, and that's it! All CSS rules set in your external file will now be applied to that HTML file.
Example contents of style.css:
body {
background-color: #d2fffd;
}
h2 {
font-size: 24px;
}
p {
font-style: italic;
}
Example contents of index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Example Page</title>
<!--CSS File-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h2>Welcome to my page!</h2>
<p>This page demonstrates how an external style sheet is applied.</p>
</body>
</html>
Welcome to my page!
This page demonstrates how an external style sheet is applied.
Question
Do naming conventions matter when naming your CSS file?
Yes! Just like other linked items, your file naming should follow the previously outlined conventions of using dashes, hyphens, or camel-casing, while avoiding blank spaces and special characters.
