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:
| Format | Syntax | Example |
| Hex Code | #RRGGBB | P{color, #FFoooo;} |
| Short Hex Code | #RGB | P{color,#6A7;} |
| RGB% | rgb(TTT%, ggg%,bbb%) | P{color:rgb(50%,50%,50%);} |
| RGB Absolute | rgb(TTT,ggg,bbb) | P{color:rgb(0,0,255);} |
| Key word | Aqua, black.etc.. | P{color:teal;} |
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
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>
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>
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>
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>
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>
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 :
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
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. 
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
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 family | font family | Description |
| Serif | Times New roamGeorigia | Seri fonts have small lines at the end on. some characters |
| Sans-serif | ArialVerdana | “Sans” means without-these fonts do not save the lines at the end of characters. |
| Monoscope | Courier New Lucida Console | All monoscope characters have the same width |
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>
You liked the article?
Like: 0
Vote for difficulty
Current difficulty (Avg): Medium
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
