How to use HTML Colors With CSS Style Sheets

html-colors

HTML Colors Using CSS Style Sheets 5th Tutorial

Welcome to HTML 5th tutorial. In this tutorial we will learn how to use CSS for HTML colors. As in our previous CSS tutorial we have learnt in details about CSS Colors. So rollup your sleeves and get ready to code for HTML Colors. Creating a colorful charming and user friendly interface is an art. CSS (Cascading Style Sheets) made this art easy for website designers. If you are not familiar with CSS colors you can See a Tutorial About CSS Colors here. Before going deep inside of this art we should learn some basics. So lets start learning about CSS and how to use CSS for HTML Colors.

Adding CSS Style Sheets to HTML

 Open your text editor to write HTML code for basic HTML structure. I am using Sublime Text here so I recommend you to use same text editor for similarity in work. If you don’t know about sublime text editor you can see this article about Basic Requirements For HTML, also you can find and tutorial about HTML Basic Structure. Start up with a new project. There are three methods to use CSS in our HTML project.

  1. Inline CSS Style Sheet
  2. Internal CSS Style Sheet
  3. External CSS Style Sheet

For this tutorial we will use internal style sheet method to get basic understanding about HTML colors with CSS.

 

 

Why We Are Using Internal CSS

Actually internal CSS is very similar to external CSS, mostly and especially in big projects external CSS is used. While inline CSS is rarely used so we will use internal CSS in this way we will get idea about both CSS methods, basic structure.We will create some tags in html and will target them through CSS code.

Create HTML Document

Create your HTML structure as below in HTML code:


<!DOCTYPE html>
<html>
<head>
<title>This is Page Title CodeClick.net</title>
</head>
<body>


<h1>This is My First Heading</h1>


<h2>This is My 2nd Heading</h2>


<h3>This is My 3rd Heading</h3>


<h4>This is My 4th Heading</h4>



This is My first paragraph.


</body>
</html>

Your page will look like this with out CSS colors

html-colors

After Adding CSS code

We will add our CSS between head tags before the body tag. To add CSS style Sheet you need to open a tag named Style and type all your code between style tags you can see a full document included internal CSS example below:


<!DOCTYPE html>
<html>
<head>
<title>This is Page Title CodeClick.net</title>

<style>
h1{
color:red;
}

h2{
color:yellow;
background-color: orange;
}

h3{
color:white;
background-color: black;
}
h4{
color:purple;
}

p{
color:black;
}

</style>
</head>
<body>

<h1>This is My First Heading</h1>
<h2>This is My 2nd Heading</h2>
<h3>This is My 3rd Heading</h3>
<h4>This is My 4th Heading</h4>
<p>This is My first paragraph.</p>

</body>
</html>

As you can see we have written our CSS code between style tags. And we individually targeted different tags inside document body. Each targeted tag in CSS will be impact related tag in body.

Now Run your project in browser and see results will look like this:

html-colors

CSS Source Code Understanding



h1{
color:red;
}

h2{
color:yellow;
background-color: orange;
}

h3{
color:white;
background-color: black;
}
h4{
color:purple;
}

p{
color:black;
}



You can see we directly targeted tags from body. As in h1 tag we changed text color to red. And in h2 tag we also added background color. If you like this tutorial please share with your friends on social media.

Style sheets are just like makeup for a website to make them more beautiful and responsive for different types of display or screens.

 

Related Posts

Share with friends