This is Part 2 in a multi-part CSS educational series developed for the #vetswhocode non-profit coding boot camp. Follow @nbhankes and @vetswhocode to get notified when then next part of this educational series is released.
Expect the following parts in this series to serve as valuable reference material for your development career.
Some of the topics to look forward to are:
- Connecting the CSS style sheet to the index.html file
- Box Model
- Selectors
- Specificity
- CSS Units
- Flexbox
- Grid Layout
- Mobile First Design
- CSS Variables
- & more
Introduction
This page will show you how to link a CSS style sheet with an HTML file. By linking these files, the style sheet will be able to access the content within the linked HTML document. This access allows web developers to use CSS selectors to begin altering the ways in which the layout of the linked HTML document renders on the browser.
Prerequisites
Code editor (VS Code)
A Basic Understanding of HTML
Setting Up The Project
Create a new project folder on your computer. Name it something like "CSS Practice." Open the empty folder in your code editor and create an index.html file and a stylesheet.css file. Your folder should be arranged like so:
📂CSS Practice
┗ 📜index.html
┗ 📜stylesheet.css
Great. Now insert the following code into the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
The above code is a basic beginning skeleton of an HTML project. In order for your index.html file to link to the stylesheet.css file, you must supply a link tag to the HTML head tag. The following link must now be inserted between the HTML link tags:
<link rel="stylesheet" href="stylesheet.css" />
The link tag element establishes the file relationship "rel" as "stylesheet," ensuring the browser knows what the link is for. And the "href" attribute gives the stylesheet.css location in relationship to the index.html document. This tells the browser where to find the style sheet. In this example, the stylesheet.css and index.html files are in the same folder, so only the file name is required.
Your HTML code should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css" />
<title>Document</title>
</head>
<body>
</body>
</html>
Conclusion
You just learned how to link a style sheet to an HTML file.
Top comments (0)