[Site map] You are here --- > Newbies Paradise > Tutorials > Official > Website > Reading a tutorial

CSS Properties list

	Author : M@teo21 Creation : : on 01/23/2007 11:13:24 AM Last modification: : on 07/22/2008 03:35:25 PM Rate and comment this tutorial Print this tutorial

This page is a non-exhaustive list of CSS properties.

My goal here is to gather as many CSS properties as I can on a single page. Most of those, we've been through during the course, but you'll also find some new ones we didn't have enough time to go thourgh. They are less used, but easy to deal with.

This list is non-exhaustive because I do not wish to gather all the existing CSS properties. There are way too many of those, and some are rarely used.
I'll then focus on the main ones, and believe me or not, that's still a pretty big stack.

Chapter Contents :

Text formatting properties
Colour and background properties
Boxes properties
Position and display properties
Lists properties
Tables properties
Other properties

Text formatting properties

Here are gathered most of the text formatting properties.

What is text formatting? It's everything that will affect the way the text is displayed: bold, italic, underlineation, font, alignment, etc.

Font, size and decoration

Type

Name

Possible values

Font name

font-family

Sets font names sorted by order of preference:

Code: CSS

1	font-family: font#1, font#2, font#3;

If the user possesses the font #1, he will use it. If he does not, he checks if he has the font #2, then font #3 etc.
Use quotes if the font name is more than one word long or contains spaces . You should alway use the "serif" or "sans-serif" font as last font.

Code: CSS

1	font-family: "Arial Black", Arial, Verdana, serif;

Font size

font-size

Provide the size of the text.
You can choose one of the following units:

px (pixels)
% (percentage, 100% = normal)
em (relative-size (corresponds to the height of the capital 'M' character), 1.0 = normal)
ex (relative-size (corresponds to the width of the lower-case 'x' character), 1.0 = normal)
size names:
- xx-small: very very small
- x-small: very small
- small: small
- medium: average
- large: large
- x-large: very large
- xx-large: very very large

Font weight

font-weight

bold : bold
bolder: bolder
lighter: lighter
normal: normal (default)

Font style

font-style

italic: italic
oblique : another italic like style
normal : normal (default)

Decoration

text-decoration

underline: underlined
overline: overlined
line-through: line-through
blink: blink
none: none (default)

Font variant

font-variant

small-caps: small capitals
normal: normal (default)

Uppercase letters

text-transform

uppercase: sets everything in uppercase letters
lowercase: sets everything in lowercase letters
capitalize: capitalizes the begenning of each word
none: normal (default)

Font super-property

font

Sets pell-mell possible values for font-family, font-weight, font-style, font-size, font-variant.
You don't have to set a value for each of these properties.

Example:

Code: CSS

1	font:Arial, bold, 16px;

This will put the text in bold characters, Arial, 16px.

Aligning

Type	Property	Possible values
Horizontal aligning	text-align	left: on the left (default) center: centered right: on the right justify: justified text (takes the length of the whole page)
Vertical aligning	vertical-align	To be used inside table cells. top: at the top middle: in the middle bottom: at the bottom
Line height	line-height	Set a value in pixels (px) or a perentage (%)
Indentation	text-indent	Set a value in pixels (px) to define your paragraphs indentation. Your paragraphs will start with the spacing you have defined.
Line break	white-space	normal: line breaks are automatical (default) nowrap: no automatical line breaks, unless a tag like <br /> is present. pre: line breaks are as they have been typed inside the source code (just like the xHTML <pre> tag)

Colour and background properties

Colour

Type	Property	Possible values
Text colour	color	Set a colour with one of the following methods : Writing the colour name in english (black, blue, green, white, red...). Setting the colour in hexadecimal (#CC48A1) Setting the colour in RGB: rgb (128, 255, 0)
Background colour	background-color	Same operating as color. This time it defines the text background colour

Background image

Type

Property

Possible values

Background image

background-image

Sets the URL of the image (absolute or relative notation)
Code: CSS

1 2	background-image:url("images/fond.png"); /* Relative notation / background-image:url("http://www.monsite.com/images/fond.png"); / Absolute notation */

Background attachment

background-attachment

fixed: The background stays still when the page is scrolled down
scroll: The background follows the text (default one)

Background repeat

background-repeat

repeat: The background repeats itself (default one)
repeat-x: The background repeats itself only on rows, horizontally
repeat-y: The background repeats itself only on cols, vertically
no-repeat: The background doesn't repeat itself, it's shown only once

Background position

background-position

Two way to do that :

Writing a length in px or %, referring to the top left corner.

Code: CSS

1	background-position:50px 200px; /* 50 px to the right, 200px to the bottom */

Using predefined values, one for the vertical alignment, and the other for the horizontal alignment :
top: on the top, vertically
center: in the middle, vertically
bottom: on the bottom, vertically
left: on the left, horizontally
center: in the center, horizontally
right: on the right, horizontally

Code: CSS

1	background-position: bottom right; /* on the right bottom */

Overall-backround property

background

Indicates one or more values used in the properties background-image, background-repeat, background-attachment, background-position.
The values order doesn't matter and you don't need to put all the values of these properties(at least one is required)

Code: CSS

1 2	/* The background fond.png is shown in the top right screen corner and is not repeated. */ background:url("images/fond.png") no-repeat fixed top right;

Boxes properties

Size

Type	Property	Possible values
Width	width	Value in px, %, or "auto" (default value, the width will depend on the text inside)
Height	height	Idem
Minimal width	min-width	Set a value, in pixels for instance.
Maximal width	max-width	Idem
Minimal height	min-height	Idem
Maximal height	max-height	Idem

Outer margins

Type

Property

Possible values

Top margin

margin-top

Set a value like 20px, 1.5em...

Left margin

margin-left

Idem

Right margin

margin-right

Idem

Bottom margin

margin-bottom

Idem

Margin super-property

margin

Set from 1 to 4 values on the bounce. Depending on the number of values you set, the meaning is not the same:

1 value: it will be the top, bottom, right and left margin
2 values: the first determines the top and bottom margin, the second determines the left and right margin
3 values: the first determines the top margin, the second determines the left and right margin, the third the bottom margin
4 valeurs: severally the top, right, bottom and left margins.

For instance, if I set two values:

Code: CSS

1	margin:20px 5px; /* 20px margin up and down, 5px left and right */

Inner margins

Type	Property	Possible values
Top inner margin	padding-top	Set a value like 20px, 1.5em...
Inner left margin	padding-left	Idem
Inner right margin	padding-right	Idem
Inner bottom margin	padding-bottom	Idem
Inner margin super-property	padding	Set from 1 to 4 values. Depending on the number of vaules you set, the meaning is different: 1 value: it will be the top, bottom, right and left margin 2 values: the first determines the top and bottom margin, the second determines the left and right margin 3 values: the first determines the top margin, the second determines the left and right margin, the third the bottom margin 4 valeurs: severally the top, right, bottom and left margins.

Borders

Type

Property

Possible values

Border thickness

border-width

Type a value in px.

Border colour

border-colour

Type a colour value.

Border style

border-style

none: no border (default)
hidden: hidden border
solid: filled line
double: double line (requires a minimal 3px border thickness)
dashed: with dahes
dotted: with dots
inset: "embedded" 3D effect
outset: "raised" 3D effect
ridge: other 3D effect

Left border

border-left

Sets the thickness, colour and border style for the left border.
The order doesn't matter. Example:

Code: CSS

1	border-left: 2px inset blue; /* blue 2px border with an "embedded" 3D effect */

Top border

border-top

Idem

Right border

border-right

Idem

Bottom border

border-bottom

Idem

Border super-property

border

Sets the appearance of the top, bottom, left and right borders

Position and display properties

Displaying

Type

Property

Possible values

Element type

display

none: the element won't be displayed
block: the element becomes "block" (like <p>)
inline: the element becomes "inline" (like <strong>)
list-item: the element becomes a "bulleted list element" (like <li>)

Dislplaying

visibility

hidden: hidden
visible: visible (default)

display:none; makes the element vanish completely, whereas visibility:hidden; just hides the element, which still keeps taking some place on the screen.

Only display a part

clip

Set four values, just like that:

Code: CSS

1	clip: rect(value1, value2, value3, value4);

This allows to display only a part of an element. rect() allows to indicate the coordinates of the rectangle which will be displayed.
Values 1 to 4 severally correspond to the top, right-hand, bottom and left-hand corners of the rectangle.

Limit the size

overflow

visible: the whole element will be displayed (default).
hidden: the element will be cut if it goes past the values of height and width. The cut part won't be viewable.
scroll: as for hidden, the element will be cut if it goes past the limits. However, this time scroll bars will be displayed by the browser to see the rest of the text.
auto: the browser decides whether scroll bars will be displayed or not. Usually, it's the same as using the "scroll" value.

Positioning

Type	Property	Possible values
Floating	float	left: floating on the left right: floating on the right none: no floating (default)
Clearing a floating	clear	left: removes the effect of an aforegoing left floating right: removes the effect of an aforegoing right floating both: removes the effect of an aforegoing floating, left or right none: no floating effect clearing (default)
Positioning type	position	absolute: absolute positioning from the top left-hand corner fixed: fixed positioning (works like absolute positioning). The element keeps its position even if one scrolls down the page. relative: relative positioning, from the "standard" position of the element static: standard positioning (default)
Position from the top	top	Value in px, %, em... To be used with an absolute, fixed or relative positioning.
Position from the bottom	bottom	Idem
Position from the left	left	Idem
Position from the right	right	Idem
Displaying order	z-index	In case of absolute positioning for instance, if two elements overlay, z-index allows to determine which element will be displayed above the other. Set a number. The higher the number is, the more the element will be displayed on top of the others. For instance, if you have two overlaying elements, one with a 10 z-index and another with a 20 z-index, the one with the 20 z-index will be displayed above the other.

Lists properties

Type

Property

Possible values

List type

list-style-type

For non-ordered lists (<ul>):
- disc: a black disc (default).
- circle: a circle.
- square: a square.
- none: no bullet will be used.
For ordered lists (<ol>):
- decimal: numbers 1, 2, 3, 4, 5... (default)
- decimal-leading-zero: numbers beginning with zero (01, 02, 03, 04, 05...). Doesn't work with Internet Explorer
- upper-roman: roman numbering, in uppercase letters (I, II, III, IV, V...)
- lower-roman: roman numbering, in lowercase letters (i, ii, iii, iv, v...)
- upper-alpha: alphabetical numbering, in uppercase letters (A, B, C, D, E...)
- lower-alpha: alphabetical numbering, in lowercase letters (a, b, c, d, e...)
- lower-greek: greek numbering. Doesn't work with Internet Explorer

Bullets position

list-style-position

inside: "right" inside the list
outside: outside the list

Customized bullet

list-style-image

Set the URL of the image which will be used as a bullet. Example:

Code: CSS

1	list-style-image: url("images/puce.png");

List super-property

list-style

You may gather the values of list-style-type, list-style-position and list-style-image. You don't have to put all the values and the order doesn't matter.
Example :

Code: CSS

1	list-style: inside square;

Tables properties

Type	Property	Possible values
Border type	border-collapse	collapse: The cells' and the table's borders are mixed. separate: The cells' and the table's borders are separated (default).
Empty cells	empty-cells	show: The borders of empty cells are displayed. collapse: The cells' and the table's borders are separated (default).
Title position	caption-side	Defines the position of the table title, set through the <caption> tag top: at the top of the table bottom: at the bottom of the table left: at the left of the table right: at the right of the table

Other properties

Type

Property

Possible values

Mouse cursor

cursor

auto: automatical cursor (default)
default: standard cursor
pointer: hand-shaped cursor, just like when you point a link
text: cursor used while pointing text
wait: cursor displayed for a waiting period (hourglass)
help: question-mark-shaped cursor, indicating a help
move: cross-shaped cursor, indicating a possible moving

n-resize: arrow pointing north
ne-resize: arrow pointing north-east
e-resize: arrow pointing east
se-resize: arrow pointing south-east
s-resize: arrow pointing south
sw-resize: arrow pointing south-west
w-resize: arrow pointing west
nw-resize: arrow pointing north-west

url: custom cursor, of .cur or .ani type. Example:

Code: CSS

1	cursor: url("images/cursor.cur");

You have to use a software dedicated to cursor designing in order to make .cur of .ani files

Phew!

Counting CSS properties is neither restfull, nor amusing, believe me!
The most experienced of you may have noticed that I haven't talked about all the CSS properties, like I said at the beginning. Indeed, I didn't aim to show you all the CSS properties that exist, but rather provide you a guide you may use while coding CSS.

Consequently, I only kept the CSS properties that I considered as the most used ones.

If I find the time, or the courage to add other CSS properties in the futur, I will do it. However, I think you've already got pretty much to do with what's already here