CSS Properties

To use CSS you need to know the individual CSS properties which will be used to style the document. Let us see the important CSS properties. We do not discuss each CSS property but rather the ones most commonly used.

Colors and Background.
color: this property changes the foreground color of the text. Valid values include color name or hexadecimal code of the color.
p{color: blue;}
p{clor:#ffffff;}

background: This property changes the background of the document. Its sub properties are,
background-color: changes background color of the styled part.
h4{background-color:cyan;}
background-image: changes the back ground image.
.some_class{ background-image :rose.jpg;}
background-repeat: Sets whether the background image will tile or not. Valid values include repeat, repeat-x to repeat only in horizontal direction, repeat-y for vertical repeat, and no repeat.

Fonts and Typography.
Font and related properties set the typography.
font-weight: It sets the weight of the text, making it bolder or lighter. Possible values include light, normal, bold, lighter and bolder.
font-family: It sets the font face to be used for the text. Possible values include the name of the font.

Text effects.
letter-spacing: It sets the spacing between each letter. The spacing can be specified in terms of pixels (most common) or percentages.
word-spacing: Sets the spacing between adjacent letters. Spacing can be specified in terms of pixels or percentages.
text-decoration: Sets special decorations or effects. Possible values include none, underline, strikethrough and overline.
text-transform: Used to convert all text to a specific case. Possible values include uppercase and lowercase.

The CSS box model.
Each CSS element can be understood to be a box. The elements of a CSS box are margin, padding, border and width.
width: Sets the width. Legal values can be specified in absolute terms like pixels or in terms of percentage of parent box.
margin: Sets the spacing between adjacent boxes. margin-left, margin-right, margin-top, margin-bottom are sub properties to set the margin of one side only. Generally specified using pixels.
padding: Sets the spacing between box and the included content. padding-left, padding-right, padding-top, padding-bottom are sub properties to set the padding of one side only. Generally specified using pixels.
border: Sets the spacing between box and the included content. border-left, border-right, border-top, border-bottom are sub properties to set the padding of one side only. Generally specified using pixels.

Divs and Spans.
Some time you want to apply a style to a specific part of the document. But that part is not within any HTML tag. At that time a <span> or a <div> tag can come in very useful. They are catchall tags which do not add any presentation of themselves. You can enclose the styled area in a span tag with a specific class and then style it.
………
<span class=”cyan”>Some text</span>
……….
span.cyan{color:cyan;}
Div is block level element while span is an inline element. This means that div will take a rectangular box for its display while this is not a requirement for span.

Pseudo classes and pseudo elements.
Pseudo classes and elements are tags not actually present in the document, but which are implied from other tags. They provide some completely new functionality not present in HTML. A pseudo class is defined as :some_pseudo_class.
:link - Specify styles to be used with links in general
:visited - Specify styles to be used with links that have been visited
:hover Specify styles to be used when an item is selected (for
example, hovered over)
:active - Specify styles to be used when the item is activated by the
user.
:first-letter: Specify styles to be used with first letter of some element.
:first-line: Specify styles to be used with first line of some element.

Lists.
In XHTML document lists are created using <ul> and <ol> tags. CSS allows you to change the style of the marker of the list element.
list-style-type: change type of list marker. Valid values include circle, square, disk, upper roman and lower roman.
list-style-image: Allows you to set the image associated with list element marker. The path to image must be given as value to this property.
list-style-position: Sets whether the marker is within the box of the list or outside it.


Main Menu XHTML CSS Basics CSS Properties CSS Layouts Finally XHTML Articles CSS Articles	CSS Properties To use CSS you need to know the individual CSS properties which will be used to style the document. Let us see the important CSS properties. We do not discuss each CSS property but rather the ones most commonly used. Colors and Background. color: this property changes the foreground color of the text. Valid values include color name or hexadecimal code of the color. p{color: blue;} p{clor:#ffffff;} background: This property changes the background of the document. Its sub properties are, background-color: changes background color of the styled part. h4{background-color:cyan;} background-image: changes the back ground image. .some_class{ background-image :rose.jpg;} background-repeat: Sets whether the background image will tile or not. Valid values include repeat, repeat-x to repeat only in horizontal direction, repeat-y for vertical repeat, and no repeat. Fonts and Typography. Font and related properties set the typography. font-weight: It sets the weight of the text, making it bolder or lighter. Possible values include light, normal, bold, lighter and bolder. font-family: It sets the font face to be used for the text. Possible values include the name of the font. Text effects. letter-spacing: It sets the spacing between each letter. The spacing can be specified in terms of pixels (most common) or percentages. word-spacing: Sets the spacing between adjacent letters. Spacing can be specified in terms of pixels or percentages. text-decoration: Sets special decorations or effects. Possible values include none, underline, strikethrough and overline. text-transform: Used to convert all text to a specific case. Possible values include uppercase and lowercase. The CSS box model. Each CSS element can be understood to be a box. The elements of a CSS box are margin, padding, border and width. width: Sets the width. Legal values can be specified in absolute terms like pixels or in terms of percentage of parent box. margin: Sets the spacing between adjacent boxes. margin-left, margin-right, margin-top, margin-bottom are sub properties to set the margin of one side only. Generally specified using pixels. padding: Sets the spacing between box and the included content. padding-left, padding-right, padding-top, padding-bottom are sub properties to set the padding of one side only. Generally specified using pixels. border: Sets the spacing between box and the included content. border-left, border-right, border-top, border-bottom are sub properties to set the padding of one side only. Generally specified using pixels. Divs and Spans. Some time you want to apply a style to a specific part of the document. But that part is not within any HTML tag. At that time a <span> or a <div> tag can come in very useful. They are catchall tags which do not add any presentation of themselves. You can enclose the styled area in a span tag with a specific class and then style it. ……… <span class=”cyan”>Some text</span> ………. span.cyan{color:cyan;} Div is block level element while span is an inline element. This means that div will take a rectangular box for its display while this is not a requirement for span. Pseudo classes and pseudo elements. Pseudo classes and elements are tags not actually present in the document, but which are implied from other tags. They provide some completely new functionality not present in HTML. A pseudo class is defined as :some_pseudo_class. :link - Specify styles to be used with links in general :visited - Specify styles to be used with links that have been visited :hover Specify styles to be used when an item is selected (for example, hovered over) :active - Specify styles to be used when the item is activated by the user. :first-letter: Specify styles to be used with first letter of some element. :first-line: Specify styles to be used with first line of some element. Lists. In XHTML document lists are created using <ul> and <ol> tags. CSS allows you to change the style of the marker of the list element. list-style-type: change type of list marker. Valid values include circle, square, disk, upper roman and lower roman. list-style-image: Allows you to set the image associated with list element marker. The path to image must be given as value to this property. list-style-position: Sets whether the marker is within the box of the list or outside it.
Copyright 2006 XHTML and CSS . All rights reserved.