How to add CSS to HTML document

Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.

Add Cascading style sheet to HTML

We have talked about formatting text: Click here to learn about formatting text now,we move on to adding styles like colour and all of that to HTML.

You would have heard of CSS ( Cascading style sheet) that is used to style HTML document.

Jokingly, CSS is like makeup, you know the beautiful transformation a lady get when they where makeup.

When it comes to CSS, it transform the look of HTML document and gives it a better look.

Now, how exactly do you add styles to CSS.
There are 3 ways to add style to an HTML document. They are :

• Inline style
The inline style is directly applying style to an element within the tag. This style could be color, size etc but make sure that the style are inline with the element.
Here is an example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Add CSS to html </title>
</head>

<body>
<h1 style="color:purple">Example 1</h1>
<div style="float:right">Text here</div>
</body>
</html>

Output

Note :Well the good thing about inline style is that you can directly apply style but the bad thing is that it makes updating and maintenance of the website very difficult.

• Embedded /Internal style sheet
This style sheet only make changes to the element they are defined in. To use an internal style , you use <style> tag within the element you want to add style to. Here is what I mean.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Add CSS to html </title>
<style>body { background-color:blue;}
h1 { color: red;}
</style>
</head>

<body>
<h1>Here is an example for you. Keep the good work. </h1>
</body>
</html>

Result

Don't mind my color combo.

• External style sheet
External! Means separate. When we talked about internal and inline, we never mentioned that the CSS will be in a separate file. But in the case of external, CSS will be in a separate document and the content will be linked.
In this case, you need to create a new file either you are using Visual basic or notepad, save the file as .css extension, then you begin to style.
You then link your new file to your HTML document.
Just like this.

The link must Always be within the head tag and the href must contain the name you saved the folder as.

Follow us on

Twitter , Facebook page , Facebook group

Please share