Providing a visually appealing design encourages users of your site to explore further and remain for longer. A positive experience can lead to a higher percentage of visitors returning; a greater presence of your product; and leaves users more likely to share your content for a wider audience. All this can be achieved, largely, through the linked relationship of HTML and CSS. Here, we look at how to link CSS to HTML.
What’s the difference between HTML and CSS?
Simply…a lot! Let’s understand what each of these is and what it does.
HTML
The bare bones of the web. An HTML document provides the semantic structure and general content of a website. If deployed with no styling, the content will appear in a default style, leaving any users very underwhelmed by their experience. On its own, the content will appear dull, characterless and struggle to promote that all-important positive emotional response.
You can learn more about HTML here.
CSS
Cascading Style Sheets (CSS) documents allow style and decoration to be applied to HTML docs. CSS declarations define how elements should be rendered. They can be used to create variations in positioning, sizes, colours, font…if you can visualize it, CSS can probably help you achieve it. With the correct application of CSS, a website’s content can be transformed to generate a more exhilarating experience.
How to add CSS to HTML
External CSS
For the majority of cases, linking a CSS document to an HTML via the <head> element is the most effective and efficient method. To do this, two things must be known:
- HTML document location in the directory
- CSS document location in the directory
Consider the following file structure:
The HTML document, index.html, is located in the project-folder/ directory. The CSS document, style.css, is located within the css/ directory inside the assets/ directory. The assets/ directory is located in the same directory as the HTML doc.
Link Content
In the <head> element of the HTML document, a <link> element is required. The content of the <link> will be as follows:
The element contains two essential attributes:
- rel=”stylesheet”
- The rel attribute defines that the attached resource is, as it says, a stylesheet. A browser will load the styles declared in the resource and apply them to the HTML document. This must have a value of “stylesheet”.
- href=”path-to-CSS-doc.css”
- The href attribute defines the location of the CSS document. It is recommended to use a relative file path to ensure the document is accessible, regardless of deployment method.
- In the given example, the current directory is accessed with ./
- Subsequent directories are accessed with assets/css/
- Finally, the file name and extension, style.css, specifies the file to interpret within the accessed directory.
- The value for the attribute must, as always, be contained within quotation marks.
Dev-Tips
When linking a CSS doc to an HTML doc for the first time, add a generic test declaration to CSS document:
This simple check, setting the body background colour to red, prevents frustration when trying to style elements with failed results. If the link isn’t correct, you will never see the CSS applied.
What can be achieved by linking CSS to HTML?
By linking CSS to HTML you can control hot elements like headings, paragraphs, lists and more are presented on your web page. CSS tells your page how it should look in the browser. It brings much-needed style and puts in place colours, text styles and more.
Dave Horrocks, Code Institute Student
Want to know more about website build and design?
If you’re new to coding and would like to build your first web page from scratch, for free, then try our 5 Day Coding Challenge. After just one hour a day, over five days, you’ll learn the basics of both HTML and CSS. Register now through the form below.
Try our Free 5 Day Coding Challenge 
Take our full stack course 
