CSS Properties

To give various styles to HTML elements, CSS provides various properties. Related properties are grouped as: font properties, text properties, background properties, List properties etc.

 

Font Properties

 

The primary content in any web document is text. To apply different styles to the font of the text, we can use font properties.

 

Font Families

 

The shape and space between the characters depends upon the font family. A font family can be set using the CSS font property font-family. It is common to specify multiple font names separated by commas as a value to this property as shown below:

p { font-family : arial, helvetica, verdana }

 

Browser displays the above text in the paragraphs with arial font if it is found. Otherwise it displays the text with helvetica or else with verdana font. If none of the fonts are available in the client machine, browser chooses its own default font.

 

We can also specify generic font family names like serif (contains Times New Roman and Georgia), sans-serif (contains arial and verdana) and monospace (contains courier new and lucida console). Always specify a generic font family as the last choice as shown below:

p { font-family : arial, helvetica, serif }

 

When specifying a font family name having spaces, enclose the font name in single quotes or double quotes as shown below:

p { font-family : arial, ‘Times New Roman’ }

 

Font Style

 

The font-style property can be used to display text in italics. Valid values for font-style property are normal, italic and oblique. Text in italics and oblique will have the same presentation in a browser.

 

Oblique font contains natural letters created in italics. But italic forces normal characters to be displayed in italics. Below example demonstrates the font-style property:

p { font-style : italic }

 

Font Size

 

The size of the font can be set using the font-size property as shown in the below example:

p { font-size : 20px }

 

The size can be specified in points (pt), percentage (%), pixels (px) or in em. One em is equal to 16 pixels. Percentage and em are recommended for font-size property as they can scale up or down as per the needs of the user.

 

Font Weight

 

We can apply bold effect to the font using font-weight property. Valid values for this property are: normal, bold, bolder, lighter etc. Below example demonstrates applying bold effect to the text in a paragraph.

p { font-weight: bold }

 

Text Properties

 

Effects can also be applied to text written using a certain font. Properties that can be used to assign certain effects to the text are text properties. 

 

Text Color

 

The color of the text can be changed using the color property as shown below:

p { color: grey }

 

We can also assign HEX values or rgb color codes as value to the color property. Below example shows assigning red colour using HEX code:

p { color: #FF0000 }

 

Text Alignment

 

Text in a paragraph or in any other element can be aligned (horizontally) using the text-align property. Valid values to this property are left, right, center and justify. Below example shows text in a paragraph element aligned to the center:

p { text-align: center }

 

Text Decoration

 

Text can be underlined or strike out using the text-decoration property. Valid values for this property are none, overline, underline and line-through. Below example demonstrates removing the underline for hyperlinks using this property:

a { text-decoration: none }

 

Text Transformation

 

To transform all the letters in a word into lowercase or uppercase we can use text-transform property. Valid values to this property are: lowercase, uppercase and capitalize. Below example demonstrates transforming the text in bold elements to uppercase:

b { text-transform: uppercase }

 

Text Indentation

 

Text in the first line can be indented in a paragraph or other block element using the text-indent property as shown in the below example:

p { text-indent: 40px }

 

List Properties

 

In CSS we can apply style effects to order lists and unordered lists. In an unordered list, we can change the item marker (bullet by default) by using the list-style-type as shown below:

ul { list-style-type: circle }

 

Valid values that can be specified to the list-style-type property are: disc, circle, square. The default value for this property is disc. Similarly, we can change the default natural numbers (1,2,3,…) in an ordered list using the list-style-type property. Valid values for this property for an ordered list are: lower-alpha, upper-alpha, lower-roman, upper-roman, decimal etc.

 

The value decimal is the default for ordered list. Below example applies list-style-type to an ordered list:

ol { list-style-type: upper-roman }

 

We can remove the list item marker by specifying none as a value to the list-style-type property.

 

To display an image in the place of a list item marker, we can use list-style-image property. It makes sense to use this property only with unordered lists as shown in the below example:

ul { list-style-image: url(‘arrow.jpg’); }

 

The above code might not work consistently across all the browsers. A cross browser solution is given below:

ul { list-style-type: none; padding: 0px; margin: 0px }

ul li { background-image: url(‘arrow.jpg’); background-repeat: no-repeat; background-position: 0px center; padding-left: 15px }

 

Background Properties

 

The properties that are used to set a background image or apply other effects to the background of elements are the background properties.

 

Background Colour: 

The background colour of an element can be changed using the background-color property.

 

Background Image: 

A background image can be set for an element using the background-image property.

 

Background Image Repeat: 

A small background image can be tiled along x and y-axis or along x-axis or along y-axis using the background-repeat property. Valid values for this property are: repeat, repeat-x, repeat-y and no-repeat. Among these values, repeat is the default value. 

 

Background Image Position:

The position of the background image with respect to the element can be set using background-position property. Valid values for this property are: left top, left center, left bottom, etc.

 

Background Image Attachment:

To specify whether the background image scrolls along with the page or is fixed in a certain location, we use background-attachment property. Valid values for this property are: scroll, fixed, and local. Among these values, scroll is the default.

 

Below example demonstrates all the background properties mentioned above:

body
{
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

 

Styling Hyperlinks

 

Different pseudo classes can be used for styling the hyperlinks in a web document. The pseudo classes that can be used are: link, visited, hover and active.

 

The pseudo class link represents all fresh hyperlinks, visited represents all visited hyperlinks, hover represents a hyperlink on which the mouse pointer is hovered and active represents a focused hyperlink.

 

Below example demonstrates styling hyperlinks, the order of pseudo classes must be preserved:

/* unvisited link */

a:link {

color: #FF0000;

}

 

/* visited link */

a:visited {

color: #00FF00;

}

 

/* mouse over link */

a:hover {

color: #FF00FF;

}

 

/* selected link */

a:active {

color: #0000FF;

}