• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

CSS Colors & Background

CSS Colors

CSS user color values to specify a color, Typically , these are used to set a color either for the foreground of an element(i.e, its text) or else for the background of the element. They can also be used to affect the color of boarder and other decorative effects.

You can specify your color values in various formats. Following table tells you all possible formats:

FormatSyntaxExample
Hex Code#RRGGBBP{color, #FFoooo;}
Short Hex Code#RGBP{color,#6A7;}
RGB%rgb(TTT%, ggg%,bbb%)P{color:rgb(50%,50%,50%);}
RGB Absolutergb(TTT,ggg,bbb)P{color:rgb(0,0,255);}
Key wordAqua, black.etc..P{color:teal;}

 

Setting Backgrounds using CSS

You can set following background properties of an element:

The back ground – color property is used to set the back ground color of an element

The background – image property is used to set the back ground image of an element

The background – repeat property is used to control the repetition of an image in the background.

The back ground – position property is used to control the position of an image in the back ground

The back ground – attachment property is used to control the scrolling of an image in the back

The back ground property is used as short hand to specify a number of other back ground properties

 

Set the Background Color

Following is the example which demonstrate how to set the back ground color for an element

<p style = “back ground – color :yellow;”>

This text has a yellow background color

</p>

 

Set the Background Image

Following is the example which demonstrates how to set the background image for an element

<table style=”background – image :url(/images/paternal.gif);”>

<tr><td>

This table has background image set

</td></tr>

</table>

 

Repeat the Background Image

Following is the example which demonstrates how to repeat the background image if image is small. You can use non-repeat value for background-repeat property if you don’t want to repeat an image, in this case image will display only once.

By default background-repeat property will have repeat value.

<table sytle=”background-image:url(/images/pattern1.gif);  background-repeat:repeat;”>\<tr><td>

This table has background image which multiple times.

</td></tr>

</table>

Following is the example which demonstrates how to repeat the background image vertically

<table style=”background-image=url(/images/pattern1.gif); background-repeat: repeat-y;”>

<tr><td>

This table has background image set which will repeat vertically.

</td></tr>

</table>

 

Following is the example which demonstrates how to repeat the background image horizontally.

<table style=”background-image:url(/images/pattern.gif); background-repeat:repeat-x;”>

<tr><td>

This table has background image set which will repeat horizontally.

</td></tr>

</table>

 

Set the Background Image Position

Following is the example which demonstrates how to set the background image position 100 pixels away from the left side

<table style=”background-image : url(/images/pattern1.gif); background-position:100px;”>

<tr><td>

Background image positioned 100 pixels away from the left.

</td></tr>

</table>

Following is the example which demonstrates how to set the background image position 100 pixels away from the left side and 200 pixels down from the top.

 

<table style = “background – image :url(/image/pattern1.gif); background – position:100px 200px;”>

<tr><td>

This table has background image positioned 100 pixels away from the left and 200 pixel from the top

</td></tr>

</table>

 

Set Background Attachment

Background attachment determines whether a background image is fixed or scrolls with the rest of the page.

Following is the example which demonstrates how to set the fixed background image.

<p style=”background-image:url(/images/pattern1.gif); background-attachment:fixed;”>

This paragraph has fixed background image.

</p>

Following is the example which demonstrates how to set the scrolling background image.

<p style=”background-image:url(/images/pattern1.gif); background-attachment:scroll;”>

This paragraph has scrolling background  image.

</p>

 

Background Shorthand Property

AS you can see from the examples above, there are many properties to consider when dealing with backgrounds. To shorten the code, it is also possible to specify in one single property. This is called a shorthand property.

The shorthand property for background is simply “background”;

 

Example

body {

background:#FFFFFFF url(‘img_tree.png’) no-repeat right top;

When using the shorthand property the order of the property values are :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

It does not matter if one of the property values is missing, as long as the ones that are present are in  this order.

 

Setting Fonts using CSS

You can set following font properties of an element:

The font-family property is used to change the face of a font.

The font-style property is used to make a font italic or oblique

The font-variant property is used to create a small-caps effect.

The font – weight property is used to increase or decrease how bold or light a font appears.

The font-size property is used to increase or decrease the size of a font

The font property is used as shorthand to specify a number of other font properties.

 

Screenshot_27

 

On computer screens, sans-serif fonts are considered easier to read than serif fonts.

 

CSS Font Families

In CSS, there are two types of font family names:

generic family – a group of font families with a similar look(like “serif”or “Monispace”)

font family – a specific font family(like “Times New Roman” or “Arial”) 

 

Generic familyfont familyDescription
SerifTimes New roamGeorigiaSeri fonts have small lines at the end on. some characters
Sans-serifArialVerdana“Sans” means without-these fonts do not save the lines at the end of characters.
MonoscopeCourier New Lucida ConsoleAll monoscope characters have the same width

 

Font Family

The font family of  a text is set with the font-family property.

The font-family property should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font

Start with the font you want, and end with a generic family, to let the browser pick a similar font the generic family, if no other fonts are available

Note

If the name of a font family is more than one word, it must be in quotation marks, like font family “Times New Roman”

More than one font family is specified in a comma-separated list:

Example

p{font-family:”Times New Roman”,Times, serif; }

Following is the example which demonstrates how to set the font family of an element. Possible value could be any font family name.

<p style=”font-family: Georgia, garmond, sarif;”>

This text is rendered in either Georgia, garmond, or the default serif font depending on which font you have at your system.

</p>

Summary
Review Date
Reviewed Item
CSS Colors & Background
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Colors & Background"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.