CSS and CSS Color Codes & Uses

I hope that you often hear a word while accessing website information online, ‘CSS’. Did you think about this word? What is meaning of CSS? Where is it used? If no, now let’s know all information about CSS in brief.

CSS stands for Cascading Style Sheets.

Websites are contained with a number of different things like images, text and content. These documents together make a page. There is a deep relation between HTML and CSS. HTML documents decide the structure of a page and CSS describes how HTML elements are to be displayed.

The word “stylesheet” refers to the document itself (means HTML). Style sheets are used for document design. In simple words, they are sample of a layout. Style sheet for a web page works in same way. CSS Style sheets are also used to change the way a page looks for various devices. CSS has become an integral part because it allows a single HTML document to give differently as per screen.

Here is an example of CSS


body {background-color:lightblue; text-align:center;}
h1 {color:blue; font-size:40px;}
p {font-family:verdana; font-size:20px;}



<h1>Technology blog</h1>




Why CSS is required?

CSS is a very powerful tool for a web designer. A web designer uses CSS to set appearance of a website. Organized and well maintained style sheet is easy to update instantly. It allows the web designer to change visual content as per priority. It allows web designer to modify without touching underlying HTML markup.

CSS Color Codes

Red #FF0000 #F00
Green #00FF00 #0F0
Blue #0000FF #00F
Black #000000 #000
Cyan #00FFFF #0FF
Magenta #FF00FF #F0F
yellow #FFFF00 #FF0

I have shown basic color codes in the table, if you want to get more shade color codes then visit this link  color codes

How to use Color codes in CSS?

Css color can be shown in several ways. Like Red color can be represented as #FF0000, #F00 and many other ways. It doesn’t hamper your choice; all these codes are valid for red color.

You can use any of these colors to a website or blog through relevant CSS code.

To set a background color, use background-color.

To set the text color, use color

To set a border color, use border-color.

We will understand through an example of red color

Following are quick CSS code examples for applying this color (red) to various HTML elements.

/* Set a background color to the ‘body’ element */

body {

background-color: red;


/* through using the CSS ‘background’ property */

body {

background: red;


/* text color for the ‘h1’ element */

h1 {

color: red;


​/* using the ‘border’ property  */

article {

border: 1px solid red;


In Hexadecimal Notation

body {

background-color: #0000FF;


body {

background: #0000FF;


h1 {

color: #0000FF;


article {

border-color: #0000FF;


I hope that you will Understand about CSS and a few CSS color Code use.

In next article, we will try to cover how to change color of links, text, headings, hyperlink etc.  To get regular tutorial of CSS, read our this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.