CSS Properties

CSS Properties
Content
* Text Properties
* Background-properties
* Border- Properties
* Anchor Properties
* List Style Properties
* Box Model
* Other Common Properties

Text Properties
* CSS provides many properties related to text for formatting and decoration. Some of them are:

 - Color
 - Text-alignment
 - Text-decoration
 - Text-transformation
 - Font-style
 - Font-size
 - Font-weight
 - Font-family
 - Text-shadow

Color

Color property is used to set the color of the text.

* The color property is used to set the color of the text.
* Example:

 - body {color:blue;}
 - h1 {color:#00ff00;}
 - h2 {color:rgb(255,0,0);}

Text-alignment

* The text-align property is used to set the horizontal alignment of a text.
* Text can be centered, or aligned to the left or right, or justified.
*  h1 {text-align:center;}

Text-decoration

* The text-decoration property is used to set or remove decorations from text.
* The text-decoration property is mostly used to remove underlines from links for design purposes
* a {text-decoration:none;}
* h1 {text-decoration:overline;}
* h2 {text-decoration:line-through;}
* h3 {text-decoration:underline;}
* h4 {text-decoration:blink;}

Text-transformation

* The text-transform property is used to specify uppercase and lowercase letters in a text.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Font-style

* The font-style property is mostly used to specify italic text.
* This property has following values:
* normal - The text is shown normally
* italic - The text is shown in italics

Font-size

* The font-size property sets the size of the text.
* p{font-size:24px;}

Font-weight

* The font-weight property sets the boldness of the text
* p{font-weight:bold;}

Font-family

* The font family of a text is set with the font-family property.
* Example
* p{font-family:”Georgia”;}

Text-shadow

* The text-shadow property applies shadow to text.
* text-shadow:h-shadow v-shadow blur color;

p
{
 text-shadow:20px 20px 5px gray;
}

CSS Background Properties

* CSS background properties are used to define the background effects of an element.
* CSS properties used for background effects:
 - background-color
 - background-image
 - background-repeat
 - background-attachment

background-color

* The background-color property specifies the background color of an element.
* The background color of a page is defined in the body selector:
* Colors can be specified by a hex value, RGB value or by color name

body
{
    background-color:aqua;
}

background-image

* The background-image property specifies an image to use as the background of an element
* By default, the image is repeated so it covers the entire element.
* body {background-image:url('paper.gif');}

background-repeat

* By default, the background-image property repeats an image both horizontally and vertically
* Some images should be repeated only horizontally or vertically, or they will look strange

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
}

background-attachment
* When the background attachment is fixed image will not scroll and it is fixed though you are moving scroll bar

body
{
background-image:url('gradient2.png');
background-repeat:no-repeat;
background-attachment:fixed;
}

CSS Border Properties

HTML elements can have borders and with the help of CSS properties we can decorate html element border. Here are the properties:

* Border-color
* Border-style
* Border-radius
* Border-spacing
* Border-width
* Border-collapse
* Border-color

This property is used to set color of border of an HTML element.

Colors can be specified by a hex value, RGB value or by color name
a
{ border-color:blue;}
border-style

CSS provides a variety of style properties to change the style of border of an HTML element.

Some of the possible values of border-style property are:

 - Dotted
 - Dashed
 - Solid
 - Groove
 - Double
 - Rigid
 - Inset
 - Outset
a
{
border-color:blue;
border-style:dotted;
}

* In CSS it is possible to specify different borders for different sides:
* Border-left-style
* Border-right-style
* Border-top-style
* Border-bottom-style

border-radius
* Border-radius property specify radius of corner of the border
a
{
border-color:blue;
border-style:dotted;
border-radius:10px;
}

border-spacing
* It Specify space between table cells.

border-width

* It Specify thickness of the border
a
{
border-color:blue;
border-style:dotted;
border-width:2px;
}

border-collapse
* The border-collapse property sets whether the table borders are collapsed into a single border or separated. The value of this property could be collapse

Anchor properties

* Properties on anchor
 - a:link - a normal, unvisited link
 - a:visited - a link the user has visited
 - a:hover - a link when the user mouses over it
 - a:active - a link the moment it is clicked

Example
a:link {color: darkgray;}
a:visited {color: silver;}
a:hover {color: orange;}
a:active {color: red;}

List Style Properties

* Following are the common properties to style lists
 - List-style-image
 - list-style-image:url('sqpurple.gif');
 - List-style-position
 - ul { list-style-position:inside; }
 - List-style-type
 - ul.circle {list-style-type:circle}
 - ul.square {list-style-type:square}
 - ol.upper-roman {list-style-type:upper-roman}
 - ol.lower-alpha {list-style-type:lower-alpha}

Box Model

 - All HTML elements can be considered as boxes


Other common properties

Width : It specifies the width of the element.
Height:  It specifies the height of the element
Display: display property allows to make an element block, inline, as a table cell etc
Padding: padding value is gap between inner boundary and content
Margin: it is a space leaving outside the element boundary
Opacity: it sets the transparency level of an HTML element. Minimum value is 0 and maximum value is 1.

<<Prev     Home     Next>>