CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later
date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

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-position

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.
The background image for a page can be set like this:
Background Image - Repeat Horizontally or Vertically
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, like this:
-If the image is: repeated only horizontally (repeat-x), the background will look
better:
Background Image - Set position and no-repeat
Showing the image only once is specified by the background-repeat property:
Background - Shorthand property
As you can see from the examples above, there are many properties to consider
when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single
property. This is called a shorthand property.
The shorthand property for background is simply "background":

When using the shorthand property the order of the property values is:

background-color
background-image
background-repeat
background-attachment

background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this
order.
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
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.
When text-align is set to "justify", each line is stretched so that every line has equal width
, and the left and right margins are straight (like in magazines and newspapers).
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:

Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter
of each word.
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for
the <body> element:
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:
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
Common Link Styles
In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Background Color
The background-color property specifies the background color for links:
List
In HTML, there are two types of lists:
Unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers

The type of list item marker is specified with the list-style-type property:
An Image as The List Item Marker
To specify an image as the list item marker, use the list-style-image property:
Cross browser Solution
The following example displays the image-marker equally in all browsers:
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
When using the shorthand property, the order of the property values are:

list-style-type (if a list-style-image is specified, the value of this property

will be displayed if the image for some reason cannot be displayed)
list-style-position (specifies whether the list-item markers should appear
inside or outside the content flow)
list-style-image (specifies an image as the list item marker)

Table Borders
To specify table borders in CSS, use the border property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Table Padding
To control the space between the border and content in a table, use the padding property on td and th
elements:
Table Color
The example below specifies the color of the borders, and the text and background color of th
elements:
Property

Description

background

Sets all the background properties in one declaration

background-attachment

Sets whether a background image is fixed or scrolls with the rest of

the page

background-color

Sets the background color of an element

background-image

Sets the background image for an element

background-position

Sets the starting position of a background image

background-repeat

Sets how a background image will be repeated

Property

Description

list-style

Sets all the properties for a list in one declaration

list-style-image

Specifies an image as the list-item marker

list-style-position

Specifies if the list-item markers should appear inside or outside the

content flow

list-style-type

Specifies the type of list-item marker

Property

Description

font

Sets all the font properties in one declaration

font-family

Specifies the font family for text

font-size

Specifies the font size of text

font-style

Specifies the font style for text

font-variant

Specifies whether or not a text should be displayed in a small-caps

font

font-weight

Specifies the weight of a font

Property

Description

color

Sets the color of text

direction

Specifies the text direction/writing direction

letter-spacing

Increases or decreases the space between characters in a text

line-height

Sets the line height

text-align

Specifies the horizontal alignment of text

text-decoration

Specifies the decoration added to text

text-indent

Specifies the indentation of the first line in a text-block

text-shadow

Specifies the shadow effect added to text

text-transform

Controls the capitalization of text

unicode-bidi

Used together with the direction property to set or return whether

the text should be overridden to support multiple languages in the
same document

vertical-align

Sets the vertical alignment of an element

white-space

Specifies how white-space inside an element is handled

word-spacing

Increases or decreases the space between words in a text

Generic family

Font family

Description

Serif

Times New Roman

Georgia

Serif fonts have

small lines at the
ends on some
characters

Sans-serif

Arial
Verdana

"Sans" means
without - these
fonts do not have
the lines at the
ends of
characters

Courier New
Lucida Console

All monospace
characters have
the same width

Monospace