Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!


How to link style.css to HTML

Cascading Style Sheets (CSS) are an essential part of web development. They control the layout and visual presentation of HTML documents. To apply CSS styles to your HTML documents, you need to link an external CSS file to your HTML file. In this article, we’ll walk you through the process of linking a style.css file to your HTML document.


Before we start, you should have the following:

  1. HTML File: You should have an HTML file that you want to style using CSS. If you don’t have one, create a basic HTML file with a .html extension.
  2. CSS File: You should have a CSS file (usually named style.css) with the styles you want to apply to your HTML document.

Steps to Link a CSS File to HTML:

1. Organize Your Project Files

Before linking your CSS file to your HTML file, make sure your project files are organized in the same directory or a consistent folder structure. For example, you might have a structure like this:

├── index.html
├── style.css

2. Open Your HTML File

Open your HTML file using a text editor or an integrated development environment (IDE) like Visual Studio Code, Sublime Text, or any other of your choice.

3. Add the Link Element

Inside the <head> section of your HTML file, you need to add a <link> element that references your CSS file. The <link> element should be placed between the <head> tags, like this:

<!DOCTYPE html>
    <title>Your Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- Your HTML content goes here -->

In the example above, the <link> element contains the following attributes:

  • rel: Specifies the relationship between the HTML document and the linked resource, which is a stylesheet in this case.
  • type: Indicates the type of the linked resource, which is text/css for CSS files.
  • href: Specifies the path to the CSS file. In this example, we assume that the style.css file is in the same directory as the HTML file. If it’s in a different directory, you would provide the relative or absolute path to the CSS file.

4. Save Your HTML File

After adding the <link> element to your HTML file, save the HTML file.

5. Write Your CSS Code

In your style.css file, you can define the CSS rules that will style your HTML document. For example:

/* style.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;

h1 {
    color: #333;

p {
    font-size: 16px;
    line-height: 1.5;

You can customize the CSS rules to suit your design requirements.

6. Preview in a Browser

Open your HTML file in a web browser. You should see your HTML document styled according to the rules defined in your style.css file.

That’s it! You’ve successfully linked a CSS file to your HTML document, allowing you to control the visual presentation of your web page. CSS enables you to make your web content visually appealing and well-structured, enhancing the user experience.



About Author

Leave a comment

Your email address will not be published. Required fields are marked *

You may also like


How to align button in center in HTML without CSS

In HTML, buttons are used to trigger actions, submit forms, and navigate to different pages. However, aligning a button in

How to align button in center in HTML with CSS

In HTML, buttons are commonly used for various purposes, such as triggering actions, submitting forms, and navigating to different pages.