Linking CSS & HTML

CSS cannot stand on its own. It merely styles something that already exists. As such, you need content first—something to style—and then connect the two.

For websites, this means creating an HTML structure. If you haven’t read that course yet, do so now! Find it at HTML Course (Pandaqi Tutorials).

Whenever I give an example, you can always press the “HTML” tab to see the underlying HTML structure that it styles. At the start, as you’re just learning CSS, this is important to check and learn about. As you get more familiar, this becomes less important.

So, how do you link the two? There are three ways:

Inline
Style Block (Internal)
Stylesheet (External)

Inline

Inline means that you put the styling information right there on the element itself. Using the style attribute, you can set any CSS rules on the starting tag.

Don’t worry, we’ll get into the specific syntax for CSS soon. (Although it’s quite straightforward to infer what the color property does.) I wanted to explain linking to HTML first, because without that, you can’t actually see what you’re doing!

Style Block

But this is messy! Your document will slowly become a mess of HTML elements mixed with lots of CSS code. You want to separate the two: content and visuals.

Remark

This is true for any project, by the way. If you’re developing video games, for example, it’s also the best practice to completely separate what something is from how it should be displayed. Mixing the two become a mess of dependencies and makes it hard to change anything later.

So, instead, you can move your styling rules into a special <style> element. These can be placed anywhere on the page (even after the things it is styling). Why? Because whenever a browser encounters this element, it refreshes the display of the entire page. (It adds the new rules to those it already had, then calculates the visuals of the whole page again.)

It’s best practice, therefore, to add one of these in the <head>. This is the proper semantic location and prevents expensive refreshing of the document’s styles.

Stylesheet

But this is still inefficient! Your CSS is still mixed with the HTML in the same document.

The best option, always, is to move it to a separate stylesheet. A separate file that is merely linked to the HTML document.

This keeps your CSS and HTML nice and separate. It’s also faster to load: after loading the stylesheet once, browsers will “cache” it and don’t need to download it again for a given time.

To do this, use the <link> element with the correct href attribute.

Once linked, you can write all your CSS in that external file. This is the preferred and recommended method!

Modular Stylesheets

I want to go one step further. A common beginner’s mistake—which some people never solve—is the “gigantic CSS document of no return”. Many don’t even know the feature I’m about to explain exists!

They have one stylesheet, one file, for their whole website. Usually, this file grows to over thousands of lines of code, after which it’s impossible to work with.

Instead, create new stylesheet files for each different “part” of your website. (One file for the header, one file for the typography, one file for links and buttons, etcetera.)

Then, you can combine all these into a single file to link with your HTML. Use the @import url syntax.

Remark

Imports should always be the FIRST lines of your stylesheet. Nothing may come before them.