Cascading style sheets are a key component to the modern web, empowering web developers with a language that determines the look and feel of web apps. JS might be one of the most popular programming languages, and for many developers, CSS can be one of the toughest to learn, in either case, without it, the web would not be where it is today.
As the CSS spec continues to evolve, we see new features every year to help meet user experience needs as we make the web more usable for all. It’s possible to embed CSS within HTML, but many would agree that separating out the mark up from the styles are best practice. Browsers make this easy thanks to the HTML <link> tag, it’s simple to link our CSS styles from external files into our web pages.
HTML Link Element
By utilizing HTML’s <link> tag, frontend engineers can specify a relationship to external files. This is common practice within the <head> tag, where we link to external CSS files that style our document with various attributes.
Note: you can link to CSS within the <body> tag, but the MDN documentation recommends only linking within <head>.
Key Attributes of the <link> Tag for CSS
href - The reference location to the external CSS document you want to load (see examples below)
rel - The type of relationship of this document we’re linking to (must be one of these)
media - The media field can be used to specify an external link for specific types of media devices, like print or screen, and even supports media queries for specific sizes.
preload / as - If you split your external CSS files into critical and non-critical, you can take advantage of loading all critical styles before the page renders. This makes sure that all content is styled by your CSS when first being shown to the user. This should be used for small assets that load quickly.
Learning through action
In our past article on linking JS to HTML, we used the classic button counter. I’ll re-use that here (JS included) to demonstrate linking some CSS to the example as well. You’ll be able to click the buttons to increase or decrease the counter, but more importantly, check out the colors (and change them in your own code) to see how we’re linking in those styles.
In both cases, we have a clicker counter that looks like this:
Embed (inline) CSS Example
Index.html:
<!-- Directly embeds in the styles in the HTML -->
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
button {
background-color: crimson;
color: mintcream;
width: 50px;
}
p {
border: 2px solid crimson;
max-width: 50px;
padding: 4px;
text-align: center;
}
</style>
</head>
<body>
<button id="up" type="button" onclick="countUp()">
Up
</button>
<p id="count">
0
</p>
<button id="down" type="button" onclick="countDown()">
Down
</button>
</body>
</html>
Link External CSS files
Index.html:
<!DOCTYPE html>
<html>
<head>
<!-- if we had critical assets
<link rel="preload" href="critical-main.css" as="style" />
-->
<!-- for non-critical assets -->
<link href="non-critical-main.css" rel="stylesheet">
</head>
<body>
<button id="up" type="button" onclick="countUp()">
Up
</button>
<p id="count">
0
</p>
<button id="down" type="button" onclick="countDown()">
Down
</button>
</body>
</html>
non-critical-main.css
* {
box-sizing: border-box;
}
button {
background-color: crimson;
color: mintcream;
width: 50px;
}
p {
border: 2px solid crimson;
max-width: 50px;
padding: 4px;
text-align: center;
}
Wrapping Up
Being able to create the relationship of stylesheets into your HTML grants you the power of creating amazing user experiences! The language of CSS has seen huge changes in the past few years, enabling the responsive web and unique websites that truly fit company brands or personal blogs. It all really begins with creating the styles that link into the HTML you create.
Now that you know how to link your CSS into your HTML documents, we at Honeypot are excited to see where it takes you!
