DEV Community

Cover image for How to add CSS to HTML files.
Ticha Godwill Nji
Ticha Godwill Nji

Posted on

How to add CSS to HTML files.

In the world of web development, styling plays a crucial role in enhancing the appeal of the website and the user experience. Cascading style sheet (CSS) provides the means to apply styles to HTML documents in VScode or in any IDE.

There are 3 ways in which a user can add CSS to HTML:

  • Inline CSS

  • Internal CSS

  • External CSS

Inline CSS

CSS styles can be added inside the HTML tags. This is one of the methods used to add CSS to HTML. One disadvantage of this method is that it can lead to confusion, especially when dealing with a high amount of CSS. To address this issue, other methods are implemented.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body style="background-color: #f0f0f0; font-family: Arial, sans-serif;">
    <h1 style="color: #333;">Hello, Ticha!</h1>
    <p style="font-size: 16px; line-height: 1.5;">This is an example of inline CSS.</p>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Internal CSS

CSS styles are added to the HTML file by writing inside the *tags. This method is slightly more efficient and less confusing compared to inline styling. To maintain efficiency with this method, it is advisable to place the * *tags before the * tag, as the compiler reads the code line by line.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <!-- Additional HTML content -->
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

External CSS

In this method, we are charged with creating an external stylesheet for the CSS style. This method is less confusing since the CSS file is separated from the HTML with a .css file extension and linked to the HTML using the tag and the tag should be wrapped inside the

HTML file

<!DOCTYPE html>
<html>

<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h2>Hello, Ticha!</h2>
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

External CSS file
Note that the external CSS file most have the .css extension at the end of the filename

/* styles.css */
h2 {
    color: green;
    font-size: 20px;
}

Enter fullscreen mode Exit fullscreen mode

In conclusion, mastering the art of connecting HTML and CSS documents is a fundamental skill for any web developer. Whether you choose inline CSS, external CSS, or leverage tools like Emmet, the goal remains the same: to create well-structured, visually appealing websites.

Keep exploring, keep coding, and keep creating amazing things.
Happy coding!"

Top comments (0)