(click anywhere to close)

[CSS3] Linking CSS & HTML

category: Website | course: CSS3 | difficulty:

Without HTML elements, CSS can’t do anything. Therefore, the first step is to link an HTML document with a set of CSS rules. Three ways for doing this are available to us: inline styles, style element and an external style sheet. I highly recommend the last one, but the first two also have their uses (and are quite common), so I will discuss all three options.

Inline Styles

Inline styles are embedded within the HTML document itself. Every HTML element can take the style attribute, which takes CSS code as value.

<!-- Makes this element's text colour red -->
<p style="color:red">Some styled text!</p>

Therefore, anything you write there applies to this specific element only, and can’t be easily copied or changed. Because of these major downsides, I recommend against this technique. It is, however, cleaner and faster in cases where you want to style a very specific element in an unique way (for example, a single letter in an article that you want a certain colour that you don’t use anywhere else).

Style Element

The <style> tag can be put in the head section of an HTML document, and all its content will be parsed as CSS code. Basically, this allows you to use all the functionality that CSS provides in the same way as external style sheets would. But, it’s still embedded within the HTML, which means that you’d have to copy the code between documents if you want them to have the same style.

<style type="text/css">
/* CSS Code Here */

Only use this when you really have no other choice, or it’s a very small project with only one file.

Style Sheet

The last option is to put all the CSS code in an external file, which carries the extension .css. Then, use the <link> tag to link it to an HTML file. This link tag is also put in the head section, as style sheets are not part of the content but describe the page.

<link rel="stylesheet" type="text/css" href="linktostylesheet.css">

The rel attribute defines what relation the linked file has with the HTML file. It is always necessary, because other file types could also be linked, and HTML wants to know.

Style sheets can be easily shared among multiple HTML files, can apply the same style to all sorts of groups of elements, and are usually cached by browsers (which means they are saved and don’t need to be reloaded every time a user visits a webpage). As you can see, external style sheets are the way to go!

Final Note

In this course, all code examples can be viewed in the live html editor by hovering over them and clicking the button that appears. As this is a pure CSS tutorial, however, we focus on that, and you’ll have to write some HTML tags yourself to test out the code. See it as an educational exercise!

Test your knowledge with the quiz!
What happens when you use the <link> tag?
You add an external CSS file to an HTML page
You embed CSS rules into an HTML page
You add styles to one particular element
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk