CSS Color & Background, CSS Tutorial, Global Guideline

Bookmark Bookmark: CSS Color & Background, CSS Tutorial
Forum | Blog


      Home                    

Basic CSS Guide.
 CSS Introduction.              
 What is CSS?                      
 Colors & Backgrounds.
 CSS Fonts.                          
 CSS Text.                           
 CSS Links.                          
 CSS Classes.                       
 CSS Floating Elements.     
 CSS Margining.                  
 CSS Padding                      
 CSS Borders.                      
 CSS Layers.                       
 CSS Positioning Elements.
 CSS Properties.                  
 Good CSS Design.              
 CSS Summary.                   

CSS Tutorial >> CSS Colors & Backgrounds.


     Back             Next     



CSS Colors.

CSS color property allows developer to specify the color of any supported element. Details of Cascading Style Sheet Color element is as under.  
Syntax: color: <color>
 
Initial Value: Determined by browser
 
Applies to: All elements
 
Inherited: Yes
 
Such as headings Cascading Style Sheet Color example like below.

Example of CSS Color

H1 { color: red }
H2 { color: #080808 }
H3 { color: #0c0 }

See the Units section for color value descriptions. As shown on above some example of color rules include..
To help avoid conflicts with user created style sheets, background and color properties should always be specified together.

CSS Background Colors.

In CSS property of background-color use to set the background color of any element in web pages. Detail for CSS background color property is as under.
Syntax: background-color: <value>
 
Possible Values: <color> | transparent
 
Initial Value: transparent
 
Applies to: All elements
 
Inherited: No
 
Example of CSS background color is as under.

Example of CSS Background Color

BODY    { background-color: white }
H1	{ background-color: #080808 }

To help avoid conflicts with user created style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable in case of with out image pages.

Authors may also use the shorthand background property, which is currently better supported than the background-color property.

CSS Background Image.

CSS property of background-image sets the background image for any supported element.
Details of Cascading Style Sheet Background Image is as under.
 
Syntax: background-image: <value>
 
Possible Values: <url> | none
 
Initial Value: none
 
Applies to: All elements
 
Inherited: No
Example of CSS Background image is as under.

Example of CSS Background Image

BODY { background-image: url(/images/ggl.gif) }
P    { background-image: url(https://www.globalguideline.com/images/ggl.gif) }

When a background image is defined, a similar background color should also be defined for those not loading images.

Developers may also use the shorthand background property, which is currently better supported than the background-image property.

CSS Background Repeat.

In CSS property of background-repeat determines how a specified background image is repeated or not. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically.
Details of CSS Background Repeat property is as under.
 
Syntax: background-repeat: <value>
 
Possible Values: repeat | repeat-x | repeat-y | no-repeat
 
Initial Value: repeat
 
Applies to: All elements
 
Inherited: No
Example of CSS Background Repeat is as under.

Example of CSS Background Repeat

BODY { background: white url(ggl.gif);
background-repeat: repeat-x }

In the above example, the image will only be tiled horizontally.

Developers may also use the shorthand background property, which is currently better supported than the background-repeat property.

CSS Background Attachment.

CSS property of background-attachment determines if a specified background image will scroll with the content or be fixed with regard to the canvas. For example, the following specifies a fixed background image: Details of Cascading Style Sheet Background Attachment is as under.
 
Syntax: background-attachment: <value>
 
Possible Values: scroll | fixed
 
Initial Value: scroll
 
Applies to: All elements
 
Inherited: No
 
Example of CSS Background Attachment is as under.

Example of CSS Background Attachment

BODY { background: white url(ggl.gif);
       background-attachment: fixed }

Developers may also use the shorthand background property, which is currently better supported than the background-attachment property.

CSS Backgrounds

CSS Background property is a shorthand for the more specific background-related properties. Some examples of background declarations follow:
 
Syntax: background: <value>
 
Possible Values: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
 
Initial Value: Not defined
 
Applies to: All elements
 
Inherited: No
Example of CSS Background is as under.

Example of CSS Backgrounds

BODY       { background: white url(https://www.globalguideline.com/images/ggl.gif) }
BLOCKQUOTE { background: #7fffd4 }
P          { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE      { background: #0c0 url(leaves.jpg) no-repeat bottom right }

A value not specified will receive its initial value. For example, in the first three rules above, the background-position property will be set to 0% 0%.

To help avoid conflicts with user style sheets, background and color properties should always be specified together.

How to include CSS file.

Now you learned about the CSS Colors in this section of CSS Tutorial, Backgrounds, Font, Text and much more but you must know how to include any external Cascading Style Sheet file in an HTML file. Below code is for inclusion of a CSS file.

Example of External CSS file include

<LINK href=".MyCssFileName.css" type=text/css rel=stylesheet>

     Back             Next     


 



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 180 visitors are online now