Changing Background color using CSS

Using CSS we can design our page, according to our requirements. We can change the background color or we can add some image to our background (see in the next post).
We can change the background color to whatever color we want. To do so, we must know the color name, the RGB Value of the color, the RGBA Value or HEX Value of the color, the HSL Value or the HSLA Value. We will be discussing some basics only.

Color Name

To change the background color of the whole page using color name, add the color property into the body selector like this,

We can specify any of the logical color name as the value e.g., red, yellow, green etc. 

The HEX Value

 In this pattern we specify three different value for three different colors red, green and blue followed by a # sign like this: #ff0000 (it's red). 

Code snippet is given below:

RGB Value

The RGB stands for Red, Green, Blue. As above, we mention three values for three different color in () sign followed by rgb like this: rgb (255,0,0)  /* Red */

The code snippet is given below: 

RGBA Value

RGBA value is as same as the RGB value, but with some opacity. A is an alpha parameter which specifies the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

An rgba value is specified by: rgba(red,green,blue,alpha).  e.g., 

Read more

CSS Selectors

CSS selectors allows you to select and manipulate HTML elements.
CSS selectors are used to find some element based on their ID, class, group and much more.
There are different types of CSS selectors.

• Element Selector
• ID Selector 
• Class Selector 
• Grouping Selectors 

Element Selector: The element selector, selects elements based on the names of elements (HTML tags). Using element selector you can select multiple elements with the same name at a time. 

p {
     color: red;
     text-align: center;
     }

The p is the name of an HTML element. 

Like this you can also select h element or h1 element. 

ID Selector: The ID Selector selects the elements based on their IDs. ID Selector is used to select a single unique element on a document. So, an ID must be unique in a single document. 

           To find some element by its ID. Place an hash (#) tag followed by the ID of that element. 

           Lest assume we have some element with id="colorit" ...

#colorit {
     font-family: 'Arial';
     color: red;
     }

Class Selector: The class selector selects elements with the specific classes. The class selector uses HTML class attribute. 

            To find some element with specific class, use period character (.), followed by the class name. 

            A document can contain more than one elements belonging to the same class. 

            Suppose we have some elements with class="freak" ...

.freak {
     text-align: center;
     color: red;
     font-family: 'Arial';
     }

You can also specify that only specific element should be affected by some class. 

p.freak {
     text-align: center;
     color: red;
     font-family: 'Arial';
     }

Grouping Selector: Sometimes there are some elements with the same style. 

               We can define same formatting for multiple elements. 

h1 {
     text-align: center;
     color: red;
     }
h2 {
     text-align: center;
     color: green;
     }
p {
     text-align: center;
     color: red;
     }

To minimize the code we can group the elements. Just separate each element by putting a comma between elements. 

h1, h2, p {
     color: red;
     text-align: center;
     font-family: 'Arial';
     }

To learn more about CSS Selectors, visit: http://www.w3.org/TR/CSS2/selector.html

Download the Example file here...

CSS_Selector.html

Read more