Tag Archives: how to use CSS color codes

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

<style>

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

</style>

<body>

<h1>Technology blog</h1>

<p>www.triople.com>

</body>

</html>

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
White #FFFFFF #FFF
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.

Advertisements