HTML and CSS: How to link CSS to HTML

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:

Image shows lines of code that says: project-folder/
index.html
assets/
css/
style.css

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:

Image shows lines of code that says: <html>
	<head>
		<link rel=”stylesheet” href=”./assets/css/style.css” />
	⋯⋯⋯
	</head>
⋯⋯⋯
</html>

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:

Image shows lines of code that says: body {
	background-color: red;
	height: 100vh;
}

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.

Code Institute Credit Rating with the University of West of Scotland

Code Institute prides itself on providing a university credit-rated full-stack software development programme. It’s a testament to the brilliant work that our team of professionals put into the programme. We didn’t want just to throw a course together and say, “here you go, here’s a course for training developers”. Instead, we wanted to create something […]

Why You Should Learn HTML & CSS 

Whether you are new to the tech world or starting to look for a change in your career to tech, there are some must-haves that you should possess before carrying on to learn the advanced concepts. For example, HTML and CSS are essential languages to learn in programming, no matter what tech domain you choose. […]

Programming & Coding Terms, Defined 

As with any skill, it is essential to familiarise yourself with the fundamental terminologies used in that field before fully committing to practice mode. Understanding coding words can speed up and improve your knowledge of your area. This blog looks at simple definitions for programming and coding terms.    We have provided you with a list […]