How to connect CSS to HTML is one of the first questions that comes up when building web pages. CSS controls how a site looks: colors, spacing, fonts, layout, and responsiveness.
Main ways to connect CSS
There are three common options: an external file, internal CSS in a <style> block, and inline styles through the style attribute. The best choice depends on the size of the project and how easy the code needs to be to maintain.
1. External CSS file
This is the most practical method for most websites. You create a separate file, for example style.css, and connect it in the <head> section:
<link rel="stylesheet" href="style.css">
This approach keeps styles separate from HTML, makes the code easier to read, and lets you reuse one stylesheet across multiple pages.
2. Internal CSS in the style tag
If you need to style a single page quickly or test an idea, you can write CSS directly inside the HTML document:
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
}
</style>
This option is useful for small layouts, but it is less convenient for larger sites because styles and markup are mixed together.
3. Inline styles with the style attribute
Inline CSS is applied to a specific element:
<p style="color: blue;">Text</p>
This can be handy for a quick test or a one-off change, but it should not be used too often. When there is a lot of styling, the code becomes harder to manage.
How to connect CSS correctly in the head
In most cases, an external stylesheet is linked in the <head> so the browser can load the styles before rendering the page. A typical structure looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello</h1>
</body>
</html>
If the file path is wrong, the styles will not load. That is why it is important to check the folder, file name, and extension.
What to check when adding CSS
- make sure the stylesheet is saved with the .css extension;
- check that the path in the href attribute is correct;
- remember that file names can be case-sensitive on a server;
- avoid putting too much CSS directly into HTML once the project grows beyond a few pages;
- keep one main stylesheet for reusable styles.
Which method should you choose?
If you are learning HTML and CSS or building a real website, the best place to start is with an external file. It is the basic and most convenient approach for most tasks. Internal CSS is suitable for quick tests, while inline styles should be reserved for rare cases.
So, in short, the best answer to how to connect CSS to HTML is to use the <link> tag in the <head>, and only use the other methods when they are truly justified.
