Your CSS must be written in the right place so that it communicates with your HTML. Otherwise, you won't see any changes to your elements!
CSS can be written either:
outside your HTML file
inside your HTML file
Writing CSS in the same file might sound easier — the fewer files, the better, right? However, by shoving all your HTML and CSS into one file, you often end up with a long and unreadable mess.
We'll first look at writing CSS in a separate file because it's what you'll do most often.
External CSS
In a HTML and CSS project, you often have the following file structure:
There is:
A general folder for the project ("website").
The "website" folder contains a file called index.html.
The "website" folder contains another folder called "css."
The "css" folder contains a file called "style.css."
This is what most of your simple website projects will look like! You'll write HTML in an index.html file and CSS within a style.css file.
The HTML file is what's read by a user's browser. Therefore, you need a link in there to the CSS file; otherwise, your groovy styles won't be applied to the HTML elements you want. 😢
<!DOCTYPE html>
<html>
<head>
<title>YOUR PAGE TITLE</title>
<link href=“css/style.css” type=“text/css” rel=“stylesheet” />
</head>
<body>
<h1>SOME HTML, WOOHOO</h1>
</body>
</html>Look at line 5.
The <link> element in the HTML's <head> tells the page where to find its matching CSS. It should have the following attributes:
href: the file path to the CSS. If you structure your project as shown in the image at the top of the chapter, this will be "css/style.css."
type: describes the type of link, which will always be "text/css" for your stylesheets
rel: describes the relationship between the pages, which will always be "stylesheet" for your stylesheets
There is no closing tag necessary for the <link> element!
Internal CSS
You can also write CSS in your HTML as follows:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style type=“text/css”>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>SOME HTML, WOOHOO</h1>
</body>
</html>Look at lines 5-9.
A <style> tag within the HTML file's <head> defines the CSS for the page. This is fine if you only have a couple lines of CSS. However, it can quickly become unwieldy. It's not fun to read lines and lines of CSS in a file before the actual page content even starts!
Inline CSS
You can even write CSS directly on elements in the HTML's body. In that case, you don't need to actually select them, since it's clear (based on where you place the style tag) which element you want to change the appearance of using CSS:
<h1 style="color: blue;">This will be a blue heading</h1>I advise you to use external CSS most of the time because writing styles in HTML can quickly become unwieldy and disorganized, unless you're working on a very small project.
Practice!
Head to this CodePen exercise and try taking a brief spin at adding a link to a stylesheet yourself:
Remove line 3 from the HTML code, where it says
<!-- Stylesheet link goes here -->.Add a
<link>element within the<head>that contains the necessary information about your stylesheet. There should be three attributes:href,type, andrel. Look back at the chapter text if you don't recall exactly what to put in each of these attributes.
In the next chapter, let's dive into color so you actually have something to write in your CSS files!
