CSS in HTML

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

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

bottom

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;

 

display

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

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;

height

Sets the height of an element.

For example :height: 100px;

left

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;

 

overflow

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

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

For example : overflow: scroll;

padding

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

position

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

width

Sets the width of an element.