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.

Database Programming

In layman’s terms, a database is a collection of organised data and information. These databases contain many tables with multiple fields containing information on a company’s clients or employees.    Nearly every website uses databases, notably eCommerce websites, to record sales, shipments, and other information using special database software. This software is essential for organising, updating, […]

What Are HTML Tags?

When a web browser sees an HTML tag, it knows what to do with the material. Tags allow a web browser to differentiate between HTML and plain text. Opening tag, content, and closing tag all make up a single HTML tag. But some HTML tags are not closed tags. What Are HTML Tags? An HTML […]

What is AWS?

AWS, which stands for Amazon Web Services, is a cloud computing technology platform provided by one of the most well-known organisations, Amazon. This innovative and evolving platform provides customers with a myriad of services like servers, storage, networking, virtual computing, email, hosting services, and privacy. Storage is an essential asset for practically every organisation. Previously, […]