DEV Community

Adeoye Jumoke
Adeoye Jumoke

Posted on

How to Add CSS to HTML

So, you’ve started learning web development and now you’re hearing about this thing called CSS. You might be wondering, “What exactly is CSS, and how does it connect with HTML?” Well, you’re not alone. Let’s go through it together.
HTML is like the foundation of a building, it gives your website structure. It tells the browser, “Here’s a heading, here’s a paragraph, here’s an image.” But by itself, HTML looks plain. That’s where CSS comes in.
CSS (Cascading Style Sheets) is like the stylist of the web. It adds color, changes fonts, adjusts layouts, and basically makes a website attractive. Think of HTML as the skeleton and CSS as the clothes and makeup that bring it to life.
Now, how do we add CSS to HTML? There are three main ways: inline, internal, and external CSS.

  1. Inline CSS This means adding CSS to a single element by using the style attribute in the element’s opening tag. It is useful for applying a unique style to one element without affecting others.

<p style="color: red;">This text is red.</p>

  1. Internal CSS This involves applying CSS inside an HTML file by placing the style tag in the head section of the document. It allows you to style multiple elements on that page without affecting other pages.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: navy;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

  1. External CSS This means writing your CSS in a separate CSS file and linking it to your HTML using the link tag. The link is placed inside the head section of your HTML file.

h1 {
color: green;
text-align: center;
}

Conclusion
To sum it up, HTML gives your webpage structure while CSS makes it visually appealing. Inline CSS works best for quick, one-time styles, internal CSS is great for styling a single page, and external CSS is the most professional method for larger projects because it keeps everything clean and reusable.
Once you start combining HTML and CSS, you’ll realize that creating a beautiful and functional webpage is not as complicated as it first seems.

Top comments (0)