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(http://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:
Example of CSS Background is as under.
Example of CSS Backgrounds
BODY { background: white url(http://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
| 
Home 
