HTML and CSS: How to link CSS to HTML

Author:

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.

From Receptionist to Full Stack Developer

Meet Jessica, a dynamic and enthusiastic 32-year-old from the east coast of Sweden, currently thriving in the vibrant city of Malmö. She has not only transformed her career but also discovered a newfound passion for coding, all while maintaining an active lifestyle involving cycling and running. Embracing Change: Degree in Health Therapy to Full Stack […]

Working with JSON in Python: A Beginner's Guide

If you’re just starting with Python, you might have heard about JSON, which stands for JavaScript Object Notation. JSON is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. Working with JSON in Python is a common task, and it’s essential to understand how […]

The Layers of AI: Narrow AI, General AI, and Artificial Superintelligence

Artificial intelligence spans from Narrow AI to theoretical Artificial Superintelligence, offering diverse possibilities in its multifaceted landscape. In this blog, we briefly look at the various facets of AI and highlight the crucial roles that groundbreaking technologies such as ChatGPT and quantum computing play. Understanding AI’s Essence: At the heart of AI lies a quest […]