Cascading Style Sheets

CSS Background Properties

The CSS background properties allow you to control the background color of an element,
set an image as the background, repeat a background image vertically or horizontally,
and position an image on a page.

Property Description Values

background A shorthand property background-color
for setting all background-image
background properties background-repeat
in one declaration background-attachment
background-position
background-attachment Sets whether a scroll
background image is fixed
fixed or scrolls with
the rest of the page
background-color Sets the background color-rgb
color of an element color-hex
color-name
transparent
background-image Sets an image as the url(URL)
background none
background-position Sets the starting top left
position of a top center
background image top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat Sets if/how a repeat
background image will repeat-x
be repeated repeat-y
no-repeat

1
Font Properties:
Property Description Values
font A shorthand property for font-style
setting all of the font-variant
properties for a font in font-weight
one declaration font-size/line-height
font-family

font-family A prioritized list of font family-name

family names and/or generic-family
generic family names for
an element
font-size Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-style Sets the style of the font normal
italic
oblique
font-weight Sets the weight of a font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

2
Text Properties:
Property Description Possible Values
color Sets the color of a text color
direction Sets the text direction ltr
rtl
letter-spacing Increase or decrease the normal
space between characters length
text-align Aligns the text in an left
element right
center
justify
text-decoration Adds decoration to text none
underline
overline
line-through
blink(NN)
text-indent Indents the first line of length
text in an element %
text-transform Controls the letters in an none
element capitalize
uppercase
lowercase
word-spacing Increase or decrease the normal
space between words length

List Properties:
Property Description Values
list-style A shorthand property for list-style-type
setting all of the list-style-position
properties for a list in one list-style-image
declaration
list-style-image Sets an image as the list- none
item marker url
list-style-position Places the list-item marker inside
in the list outside
list-style-type Sets the type of the list- none
item marker disc
circle
square
decimal

3
 decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

CSS Borders

The Border properties allow you to specify the style, color, and width of an element's
border. In HTML we use tables to create borders around a text, but with the CSS Border
properties we can create borders with nice effects, and it can be applied to any element.

Border Properties:

Property Description Values

border A shorthand property for setting all border-width
of the properties for the four border-style
borders in one declaration border-color
border-bottom A shorthand property for setting all border-bottom-width
of the properties for the bottom border-style
border in one declaration border-color
border-bottom-color Sets the color of the bottom border border-color
border-bottom-style Sets the style of the bottom border border-style
border-bottom-width Sets the width of the bottom border thin
medium
thick
length
border-color Sets the color of the four borders, color
can have from one to four colors
border-left A shorthand property for setting all border-left-width
of the properties for the left border border-style
border-color

4
 in one declaration
border-left-color Sets the color of the left border border-color
border-left-style Sets the style of the left border border-style
border-left-width Sets the width of the left border thin
medium
thick
length
border-right A shorthand property for setting all border-right-width
of the properties for the right border-style
border in one declaration border-color
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style
border-right-width Sets the width of the right border thin
medium
thick
length
border-style Sets the style of the four borders, none
can have from one to four styles hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top A shorthand property for setting all border-top-width
of the properties for the top border border-style
in one declaration border-color
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border thin
medium
thick
length
border-width A shorthand property for setting thin
the width of the four borders in one medium
declaration, can have from one to thick
four values length

5
CSS Padding

The Padding properties define the space between the element border and the element
content. Negative values are not allowed. The top, right, bottom, and left padding can be
changed independently using separate properties. A shorthand padding property is also
created to control multiple sides at once.

Padding Properties:
Property Description Values
padding A shorthand property for padding-top
setting all of the padding padding-right
properties in one padding-bottom
declaration padding-left
padding-bottom Sets the bottom padding length
of an element %
padding-left Sets the left padding of an length
element %
padding-right Sets the right padding of length
an element %
padding-top Sets the top padding of an length
element %

CSS Margins

The Margin properties define the space around elements. It is possible to use negative
values to overlap content. The top, right, bottom, and left margin can be changed
independently using separate properties. A shorthand margin property can also be used
to change all of the margins at once.

Margin Properties:
Property Description Values
margin A shorthand property for setting the margin margin-top
properties in one declaration margin-right
margin-bottom
margin-left
margin-bottom Sets the bottom margin of an element auto
length
%
margin-left Sets the left margin of an element auto
length
%
margin-right Sets the right margin of an element auto
length
%

6
margin-top Sets the top margin of an element auto
length
%

Layers
With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the
regular page with pixel precision.

To create a layer all you need to do is assign the position attribute to your style. The
position can be either absolute or relative.

The position itself is defined with the top and left properties.

Finally, which layer is on top is defined with the z-index attribute.

RELATIVE VERSUS ABSOLUTE POSITIONING

You can either position your layer calculated from the upper left corner(absolute) or
calculated from the position where the layer itself is inserted (relative).

position:absolute
If you define the position to be absolute it will be calculated
from the upper left corner of the page - unless the layer is
defined inside another layer, in which case it will be calculated
from the upper left corner of the parent layer.

position:relative
If you define the position to be relative it will be relative to the
position of the tag that carries the style.
That is, if you add a relatively positioned layer in the middle
of the page, then the position will be calculated from that exact
spot in the middle of your page where it was added.

7
Cursor Properties

Look Values Example

default cursor:default
crosshair cursor:crosshair
hand cursor:hand
pointer cursor:pointer
Cross browser cursor:pointer;cursor:hand
move cursor:move
text cursor:text
wait cursor:wait
help cursor:help
n-resize cursor:n-resize
ne-resize cursor:ne-resize
e-resize cursor:e-resize
se-resize cursor:se-resize
s-resize cursor:s-resize
sw-resize cursor:sw-resize
w-resize cursor:w-resize
nw-resize cursor:nw-resize

progress cursor:progress

not-allowed cursor:not-allowed

no-drop cursor:no-drop

vertical-text cursor:vertical-text

all-scroll cursor:all-scroll

col-resize cursor:col-resize

row-resize cursor:row-resize

8
 cursor:url(uri) cursor:url(uri)

Selector {cursor:value}

For example:

<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>

<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>

Redefining the Cursor for the Entire Page

Example:

<html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>
<body>
SOME TEXT <br/>
<a href="mypage.htm">ONE</a>
<br/>
<a href="mypage.htm">TWO</a>
</body>
</html>