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.

What is Machine Learning? 

A part of AI popularly known as machine learning enables systems, without needing to be explicitly programmed, to gain knowledge from their prior performance. Machine learning aims to create computer programs that can access the data and use it to acquire knowledge on their own.    The idea of machine learning has existed for a while. […]

External CSS

The primary distinction between external CSS and inline CSS is the processing speed; using inline CSS only needs the browser to download one file, whereas using external CSS necessitates downloading both HTML and CSS files. Cascading Style Sheets Cascading Style Sheets‘ primary objective is to distinguish between the content of a document and its presentation, […]

Is now a good time to become a software developer?

Recent stories about layoffs in the tech industry have made some people ask themselves whether or not now is a good time to become a software developer. It’s a natural question to ask, especially considering how we perceive companies like these as the largest “tech” companies. However, technology will not stop growing regardless of their […]