CSS Color Guide

So you want to know how to color elements on a web page? This can be done with CSS.

But first of all you need to understand basic html to use this.

How to color text with CSS

You can do this with inline styling or in a external stylesheet
You can write like this
<p style=”color:red;”>Hello</p>
And then it will display like this

Hello

You can also use Hex Values and this is my favorite to use, because almost every design program like Photoshop is using them, and they are easy to find.
<p style=”color:#ed1919;”>Hello</p>
And then it will display like this

Hello

If you want to color specified text in a external stylesheet you can do it with a class.
like this
HTML
<div class=”myclass”>Hello</div>
CSS
.myclass{
color:#ed1919;
}

Hello
If you want want to apply the text color on all text you can use body like this
body{
       color:#ed1919;
}
and if you want to color all of the same type of heading like h1 you can do it like this.
h1{
     color:#ed1919;
}

How to change background color on a box?

If you want to change the background color with css, you can do it like this.

If you just want to change the background color on the whole page, then its pretty simple.

Just write

body{
background-color:#ed1919;
}

If you want to change the color of a box/element.

First you have to create an element. and put something in it.

<div style=”background-color:#ed1919;”>This is a box</div>

This is a box

 

You can also set i height and width of the element, to shape the box as you want.

HTML
<div class=”boxclass”>This is a box</div>
CSS
.boxclass{
background-color:#ed1919;
height:300px;
width:300px;
}

This is a box

 

If you want to know more about css check out this page
https://linnetshowto.com/what-is-css-cascading-style-sheets/

CSS Color Guide