How to put external CSS in HTML?

To include external CSS in HTML, you can use the tag within the section of your HTML document. This allows you to link an external CSS file to your HTML file, keeping your styling separate for easier management.

By placing your CSS code in a separate file and linking it to your HTML document, you can easily apply consistent styling across multiple web pages. This method promotes better organization, scalability, and maintenance of your codebase, making it a preferred approach for styling web pages effectively.

When it comes to designing a website, CSS (Cascading Style Sheets) plays a crucial role in defining the look and feel of your web pages. While you can include CSS code directly within your HTML file using the inline method, it is highly recommended to put CSS in a separate external file. This allows for better organization, easier maintenance, and improved reusability. In this article, we will guide you through the process of putting external CSS in HTML.

Table of Contents

Step 1: Create a CSS File

The first step is to create a new file with a .css extension. You can use any text editor to create this file, such as Notepad or Sublime Text. Save the file with a descriptive name, something like style.css, for example. Remember to save the file in the same directory as your HTML file.

Step 2: Link the CSS File to HTML

Once your CSS file is created, you need to link it to your HTML file to apply the styles. To do this, you will use the link tag within the head section of your HTML file. Here’s the basic syntax:

    <link rel="stylesheet" type="text/css" href="style.css">

Let’s break it down:

rel: This attribute specifies the relationship between the HTML file and the linked file. In this case, it should be set to stylesheet to indicate that the linked file is a style sheet.
type: This attribute specifies the MIME type of the linked file. For CSS, it should be set to text/css.
href: This attribute specifies the path to the CSS file. In our example, it is set to style.css. Adjust the path as needed if your CSS file is located in a different directory.

Place this link tag within the head section of your HTML file, usually between the <head> and </head> tags.

Step 3: Define CSS Rules in the External File

Now that your CSS file is linked to your HTML file, you can start defining the styles for your web page elements. Open the CSS file you created in Step 1 and start writing your CSS rules. Here’s an example:

    h1 {
        color: #FF0000;
        font-size: 24px;
        text-align: center;
    }

    p {
        color: #000000;
        font-size: 16px;
        line-height: 1.5;
    }

    .highlight {
        background-color: #FFFF00;
        font-weight: bold;
    }

In the above example, we have defined styles for the h1 and p elements, as well as a class named highlight. Adjust the CSS rules according to your preferences and requirements.

Step 4: Apply the CSS Styles

With the CSS rules defined in your external file, you can now apply these styles to the HTML elements in your web page. To do this, you simply use the appropriate HTML tags or class names as defined in your CSS file.

For example, if you want to apply the style defined for the h1 element, you would use the <h1> tag in your HTML:

    <h1>Welcome to my website</h1>

Similarly, if you want to apply the style defined for the .highlight class, you would add the class attribute to the HTML element:

    <p class="highlight">This is a highlighted paragraph.</p>

Continue applying the styles to the appropriate HTML elements by using the corresponding tags or class names as defined in your CSS file.

By putting your CSS in an external file and linking it to your HTML, you can easily organize and maintain your styles. This separation of concerns helps improve the overall structure of your website and makes it easier to make changes or updates in the future. Remember to always use the proper syntax and follow best practices when writing CSS and HTML code. With these steps, you are now equipped to effectively use external CSS in your HTML files.

Incorporating external CSS in HTML is a straightforward process that provides numerous benefits, such as improving organization, consistency, and manageability of styling across multiple web pages. By linking an external CSS file to an HTML document using the tag in the section, web developers can efficiently apply styles to their websites and enhance the user experience.