Photo by Pankaj Patel on Unsplash
How to Link CSS to HTML
A Step-By-Step Guide on How to Link your CSS File with your HTML
Hi, techies! I'm a newbie web developer, and currently learning CSS. It's been a thrilling journey, although with lots of snags, but it’s been filled with learning and discoveries as well. In this guide, I'll delve into the possibilities of CSS and how to add it to your webpage.
So, what is CSS?
Cascading Style Sheet which is called "CSS" for short simply marks out how HTML elements should appear on the screen or website. That is to say; it helps to beautify, align and style the HTML element you've written for a website using an IDE (such as Notepad, VSCode, Sublime, Atom, etc.)
Just in case you don't know what HTML is, HTML stands for "HyperText Markup Language." It provides the structure of a website using what is called HTML syntax."
CSS is used to adjust the font, color and size of an element on a webpage. Besides that, it can also be used for other things (more on this later.) To better understand how CSS makes a webpage look better. I've embedded two snippets. The first one is purely semantic HTML with no CSS, while the second one has CSS applied to it.
As you can see, the snippet above has no CSS applied to it. Compare it with what you have below and tell me, which one you prefer 😏😏
Do you see the difference? The second snippet looks more visually appealing than the first one. Without saying much, you now know the magic CSS can do to a webpage. But that's not all, there is so much you can do with CSS;
- It can be used to define the color and position of an element on a webpage. Take a look at the snippet below:
From the image above, you'll notice that the first HTML element <h1> is aligned to the center, while the <p> tag is aligned to the left, and the <h2> tag is aligned to the right. This is only possible with CSS.
- CSS can be used to style navigation menus, forms, buttons, etc. The styling of the login form below is made possible by CSS.
- CSS can also be used to add animation and effect. Take a look at the snippet below:
The list of things you can do with CSS can't be exhausted in this guide. This is only to give an overview of what you can do with CSS. Let's move to the next phase.
How to Add CSS!
If you want your CSS to apply to a webpage, there are three ways to do that:
Internal CSS
Internal CSS is added to the <head> tag of an HTML document using the opening <style>and closing </style>tag as illustrated below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!INTERNAL CSS SECTION STARTS HERE>
<style>
body {
background-color: teal;
}
p {
color: tomato;
font-size: 40px;
}
</style>
<!INTERNAL CSS SECTION STARTS HERE>
</head>
<body>
<p>I need a bottle of wine</p>
</body>
</html>
Inline CSS
Inline CSS is can be used to apply a style to a single HTML element such as the <h1>, <p>, <quote> tag etc., as illustrated below:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!INLINE CSS>
<h2 style="color:teal;font-size:26px;">Inline CSS</h2>
<p style="color:tomato;">Inline CSS.</p>
</body>
</html>
External CSS
Unlike other methods of adding CSS, you don't have to embed your styling in the HTML document when using external CSS. All you have to do is to save the CSS document using the .css extension, and then link it with the HTML document using the <link> tag.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Conclusion
You can think of CSS as a way of decorating your webpage to make it look more modern and aesthetic for web users. It also helps to improve the user's experience. As previously stated, this guide is not to tell you everything about CSS but to give you an overview of possibilities. I hope you enjoyed reading the write-up. I'll be coming up with another article on CSS. Stay tuned!