CSS Colors and Backgrounds Tutorial, TutorialsPoint

CSS Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (its only text color).

Colors in CSS are most often specified by:

1. color name : "red"

2. RGB color : "rgb(255, 0, 0)"

3. HEX color : "#ff0000"

Color Name Example :

<html>
   <head>
  <title>HTML Colors Names</title>
   </head>
 
   <body>
  <div style="color:red">Red Color Text</div>
   </body>
   
<html>

Output :

Red Color Text

RGB Color Example :

<html>
   <head>
<title>RGB Color</title>
   </head>
   <body>
        <div style="color:rgb(255,0,0);">RGB Color Text</div>
   </body>
<html>

Output :

RGB Color Text

HEX Color Example :

<html>
   <head>
<title>HEX Color</title>
   </head>
   <body>
        <div style="color:#FD0000;">HEX Color Text</div>
   </body>
<html>

Output :

HEX Color Text

CSS Backgrounds

The CSS background properties :

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

Background Color Example :

<html>
   <head>
<title>Background Color</title>
   </head>
   <body>
    
    <style type="text/css">
    .content_bg{ background:#F60;}
    </style>
    
     <div class="content_bg">This is Backgroung Color</div>
    
   </body>
<html>

Output :

This is Backgroung Color

Background Image Example :

<html>
   <head>
<title>Background Images</title>
   </head>
   <body>
    
    <style type="text/css">
       .content_bg_image{ 
                 background-image:url(background_images.jpg); 
                 background-repeat:repeat; 
                 background-position:center; 
                 background-attachment:scroll; 
                 }
    </style>
    <div class="content_bg_image">This is Backgroung Image</div>
    
   </body>
<html>

Output :

This is Backgroung Image

CSS Tutorial