CSS in HTML

font-family

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;

font-size

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;

font-style

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

font-style: normal;

font-style: italic;

font-style: blique;

font-weight

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

 For example:

font-weight: normal;

font-weight: bold;

font-weight: 900;

font-stretch

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

Text  Properties

text-decoration

Specifies the decoration added to text

For example

text-decoration: overline;

text-decoration: line-through;

text-decoration: underline;

text-shadow

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;

letter-spacing

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

For example : letter-spacing: 2px;

line-height

The line-height set the space between line.

For example :    line-height: 90%;

text-align

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

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

word-spacing

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

Background
 

You can set the  background color or image or both

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

background-color
 

Set the background color of the element .

For example :

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

background-image
 

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

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

background-position
 

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

For example : background-position: center;

background-repeat
 

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;

border

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;

border-bottom-left-radius

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.

box-shadow

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.