CSS Properties

This section of Iron Spider is devoted to my go-to list of CSS properties that were highly instrumental in the making of this website. Be advised that this is in no way, shape or form an exhaustive list of CSS properties and values. Therefore headings like 'Some Possible Values' should be taken literally (operative word: Some). The property lists are categorized according to thier functions.

Here's a list of the categories:

• Font Styles
• Dimensions, Padding & Margin
• Borders
• Backgrounds
• Position
• Float & Alignment
• Hyperlinks

Below you'll find all the property lists covered in this section. Each list also has a page of its own that you can visit for some comprehensive notes and examples on what the properties do, how they work and which HTML elements they apply to.

---

Font Styles

Property Name	Some Possible Values	What It Does
font-family	(Any font name)	Sets the text typeface
font-size	15px | 12pt | 0.5em	Sets the text size
font-weight	bold | normal	Set bold typeface?
font-style	italic | normal	Set italics typeface?
background	(Any color) | url('example.jpg')	Sets background
color	(Any color)	Sets the text color
line-height	17px | normal	Sets line spacing

---

Dimensions, Padding and Margin

Property Name	Some Possible Values	What It Does
width	400px | 70%	Sets width
height	400px | 70%	Sets height
padding	10px | 5%	Set padding on all 4 sides
padding-top	10px | 5%	Set padding on top
padding-bottom	10px | 5%	Set padding on bottom
padding-left	10px | 5%	Set padding on left side
padding-right	10px | 5%	Set padding on right side
margin	10px | 5%	Set margin on all 4 sides
margin-top	10px | 5%	Set margin on top
margin-bottom	10px | 5%	Set margin on bottom
margin-left	10px | 5%	Set margin on left side
margin-right	10px | 5%	Set margin on right side

---

Borders

Property Name	Some Possible Values	What It Does
border	1px solid black	Defines all borders
border-top	1px solid black	Defines top border
border-bottom	1px solid black	Defines bottom border
border-left	1px solid black	Defines left border
border-right	1px solid black	Defines right border

---

Backgrounds

Property Name	Some Possible Values	What It Does
background	(All background properties at once)	Sets background
background-color	(Any color)	Background color
background-image	url('example.jpg')	Background image
background-repeat	repeat-x | repeat-y | no-repeat	Tile background?
background-position	top left | 50% 100%	Position?
background-attachment	fixed | scroll	Fixed or scroll?

---

Position

Property Name	Some Possible Values	What It Does
position	relative | absolute | fixed	Sets type of positioning
top	20px | 10%	Offsets element from top
left	20px | 10%	Offsets element from left
bottom	20px | 10%	Offsets element from bottom
right	20px | 10%	Offsets element from right

---

Float & Alignment

Property Name	Some Possible Values	What It Does
float	left | right	Aligns block element
text-align	left | center | right | justify	Aligns text

---

Hyperlinks

Property Name	Some Possible Values	What It Does
text-decoration	underline | overline | none	Is the link text underlined?
cursor	crosshair | default | help	Sets the mouse pointer style
background	(Any color)	Rollover background color
display	block | inline	Set link as block element?

---

See also:

• How to Use CSS - An Overview
• Inline Styles
• Embedded Style Sheets
• External Style Sheets
• Class Selectors

External resources:

• Official CSS2 Specification Property Index

HOME

TOP

NEXT ~>