CSS Properties

CSS abbreviated from Cascading Style Sheets, which is an external style sheet file which are used to manage and format you WebPages. With the help of CSS file you can control more then one pages with a single file. CSS also provides far better control over presentation than do presentational element types in HTML. In this tutorial you can get knowledge about the different Attribute of CSS.

Following are the some important CSS properties:

Fonts Properties

Property Description


The font-family is similar to font face property which  specifies the font for  an element.

 for example

  font-family: "Times New Roman", Georgia , Serif;


Set the font size. you can set the different type of value to this property

 for example

font-size: 2.5em; /* 40px/16=2.5em */   or    font-size: 100%;   or  font-size: 14px;


The font-style property specifies the font style for a text.

font-style: normal;

font-style: italic;

font-style: blique;


The font-weight property make the text bold or nrmal.

 For example:

font-weight: normal;

font-weight: bold;

font-weight: 900;


Selects a normal, condensed, or expanded face from a font family


Text  Properties


Specifies the decoration added to text

For example

text-decoration: overline;

text-decoration: line-through;

text-decoration: underline;


Adds some shadow to text The syntax is :

text-shadow: h-shadow v-shadow blur color|none|initial|inherit;

for example  : text-shadow: 2px 2px #ff0000;


With this you can increase or decrease the space between characters.

For example : letter-spacing: 2px;


The line-height set the space between line.

For example :    line-height: 90%;


The text-align property specifies the horizontal alignment of text in an element.

For example : text-align: left|right|center|justify|initial|inherit;


Increases or decreases the space between words in a text.

this is specify as  : word-spacing: normal|length|initial|inherit;

For example: word-spacing: 30px;


Background and Border Properties


You can set the  background color or image or both

For example:              background: #00ff00 url('smiley.gif') no-repeat fixed center ;  


Set the background color of the element .

For example :

 background-color: yellow;   or background-color: #00ff00;  background-color: rgb(255,0,255);


The background-image property sets one or more background images for an element.

for example : background-image: url('paper.gif');


The background-position property sets the starting position of a background image.

For example : background-position: center;


Set that  background image will repeated or not.

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

For example : background-repeat: repeat-y;


Apply the border and also set the border size etc

border: solid #ff0000; is allowed.

For example : border: 5px solid red;

You can Also  set border border-bottom , border-left ,border-right , border-top separately.

For example :border-bottom: thick dotted #ff0000;



The border-bottom-left-radius property defines the shape of the border of the bottom-left corner.

For example : border-bottom-left-radius: 2em;

You cal also set the border-bottom-right-radius and border-top-left-radius and border-top-right-radius in the same way.


The box-shadow property attaches one or more drop-shadows to the box. this is use in the following way

 syntax :  box-shadow: none|h-shadow v-shadow blur spread color

for example :  box-shadow: 10px 10px 5px #888888;


Basic Box Properties


The bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its containing element.

syntax is  : bottom: auto|length|initial|inherit;

for  example : bottom: 5px;



Specifies how a certain HTML element should be displayed. Display type shuld be  inline, block , inline-block ,table , table-cell , table-column , table-row , none

For example :   display: inline


Float is a CSS positioning property.The float property specifies whether or not a box (an element) should float.

syntax : float: none|left|right|initial|inherit;


Sets the height of an element.

For example :height: 100px;


For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its containing element.

For example:  

 position: absolute;

 left: 5px;



Specifies what happens if content overflows an element's box .

syntax:         overflow: visible|hidden|scroll|auto|initial|inherit;

For example : overflow: scroll;


The padding property sets space at all side of the  element.

For example  : padding:10px 5px 15px 20px;

This will be set top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px

You can aslo set separtially each padding with padding-bottom ,padding-left ,padding-right,padding-top


Specifies the type of positioning method used for an element (static, relative, absolute or fixed) . This will be discussed in separate tutorials.


Sets the width of an element.