|
|
CSS rules can be defined either inline, at the top of the page, or in an external file:
Inline Definitions Example:
<html>
<head>
<title>Your Title</title>
<style type="text/css">
/*insert style information here*/
</style>
</head>
...
</html>
External Reference Example:
<html>
<head>
<title>Your Title</title>
<link href="site.css" rel="stylesheet" type="text/css"/>
</head>
...
</html>
Note that the subject of doctype is not addressed in above examples.
| Keyword |
Value options |
Examples |
| Position |
| position |
static, absolute, relative, fixed |
{position: absolute;} |
Notes:
- static: where it would "normally" be in the html flow
- absolute: position inside the parent element
- relative: position relative to where it would "normally" be
- fixed: do not scroll the element as the page scrolls
|
| top |
<unit> |
{top: 4px} |
| right |
<unit> |
{right: 4px} |
| bottom |
<unit> |
{bottom: 4px} |
| left |
<unit> |
{left: 4px} |
| float |
none, left, right |
{float: right;} |
| Floats up to the perimeter of its container...
Example:
L
L
L
Examples of float:left...
R
R
R
Examples of float:right...
L
L
L
R
R
R
Examples of float:left and float:right...
|
| clear |
none, left, right, both |
{clear: left;} |
| Used to control flow, when used with float.
Example:
L
L
L
Examples of float:left + clear:left...
*
and some more text...
R
R
R
Examples of float:right + clear:right...
*
and some more text...
L
L
R
R
Examples of float:right + clear:both...
*
and some more text...
L
L
L
R
R
R
both together...
*
and some more text...
L
L
L
R
R
R
float right, clear none...
*
and some more text...
|
| Visibility |
| visibility |
hidden,visible |
{visibility: visible;} |
| display |
none, inline, block |
{display: block;} |
| clip |
none, left, right, both |
{clip: rect(top right left bottom);} |
| overflow |
visible, hidden, scroll, auto |
{overflow: scroll;} |
| z-index |
<int> |
{z-index: 2;} |
| Z-index only applies to other objects in the same container. |
| white-space |
normal, nowrap, pre |
{visibility: visible;} |
- s stops pre-mature text wrapping (somewhat like NOBR).
- pre: like using <pre> in HTML, but requires "strict" mode for IE 6
|
| Font |
| font-family |
arial, courier, serif, etc. |
{font-family: arial} |
| font-size |
xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger, <unit>, <%> |
{font-size: 10pt} |
Examples:
- xx-smaller
- xx-larger
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
|
| font-style |
normal, italic, oblique |
{font-style: italic} |
Examples:
|
| font-weight |
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
{font-weight: bold} |
Examples:
- normal
- bold
- bolder
- lighter
- 100
- 200
- 300
- 400
- 600
- 700
- 800
- 900
|
| font-variant |
normal, small-caps |
{font-variant: small-caps} |
Examples:
|
| Text |
| text-transform |
none, capitalize, uppercase, lowercase |
{text-transform: capitalize} |
Examples:
- normal
- italic
- uppercase
- lowercase
|
| text-decoration |
none, underline, overline, line-through, blink |
{text-decoration: underline} |
Examples:
- normal
- underline
- overline
- line-through
- blink
|
| color |
<color> |
{color: orange} |
| Text Alignment, Indentation, and Spacing |
| text-align |
left, right, center, justify |
{text-align: justify} |
|
Examples:
|
Notes:
- inline elements: use text-align: center; on parent;
- block elements: use margin: [X] auto;
- Remember to define a global div {text-align:left;} at top.
|
| vertical-align |
baseline, top, text-top, middle, bottom, text-bottom, sub, super |
{vertical-align: top} |
| Indentation of a block's first line:
Examples:
- baseline
- top
- middle
- bottom
- text-bottom
- sub
- super
|
| text-indent |
<unit>, <%> |
{text-indent: 10px} |
| Indentation of a block's first line:
Examples:
A paragraph, with some text that will roll over...
|
| line-height |
normal, <number>, <unit>, <%> |
{line-height: 150%} |
| Changes spacing of lines
Examples:
A paragraph, with some text that will roll over...
|
| letter-spacing |
normal, <unit> |
{letter-spacing: 1em} |
| Changes spacing of letters:
Examples:
A paragraph, with some text that will roll over...
|
| word-spacing |
normal, <unit> |
{word-spacing: 10px} |
| Changes spacing between words:
Examples:
A paragraph, with some text that will roll over...
|
| Margins |
| margin |
<top-unit> <right-unit> <bottom-unit> <left-unit> |
- {margin: 4px 16px 16px 16px}
|
margin-<quadrant>
- margin-top
- margin-right
- margin-bottom
- margin-left
|
auto, <unit>, <%> |
- {margin-top: 10px}
- {margin-right: 1em}
- {margin-bottom: 4pt}
|
| Margin is buffer on outside of box.
Example:
Notes:
- Margin-top/Margin-bottom only is applied if display:inline.
|
| Paddings |
| padding |
<top-unit> <right-unit> <bottom-unit> <left-unit> |
- {padding: 4px 16px 16px 16px}
|
padding-<quadrant>
- padding-top
- padding-right
- padding-bottom
- padding-left
|
auto, <unit>, <%> |
- {padding-top: 10px}
- {padding-right: 1em}
- {padding-bottom: 4pt}
|
| Padding is buffer on inside of box.
Example:
|
| Background |
| background-position |
top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, <x% y%>, <x y> |
{background-position: top left}
{background-position: 10% 10%}
{background-position: 20px 30px} |
| background-color |
transparent, <color> |
{background-color: #0000CC} |
| background-image |
none, <url> |
{background-image: url(marble.gif)} |
| background-repeat |
repeat, repeat-x, repeat-y, no-repeat |
{background-image: url(marble.gif);
background-repeat: no-repeat;} |
| background-attachment |
scroll, fixed |
{background-image: url(marble.gif);
background-attachment: fixed;} |
| Borders |
| border |
<width> <border> <color> |
{border: thick dotted orange} |
border-<quadrant>
- border-top
- border-right
- border-bottom
- border-left
|
<width> <border> <color> |
- {border-top: solid 1px red}
- {border-right: dashed 2px green}
- {border-bottom: double 3px #A0A0A0}
|
| border-width |
thin, medium, thick, <unit> |
- {border-width: thick}
- {border-width: thin}
- {border-width: 4px} (all borders)
- {border-width: 2px 4px} (top/bottom, left/right)
|
border-<quadrant>-width
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
|
thin, medium, thick, <unit> |
- {border-top-width: 1px}
- {border-right-width: 1em}
- {border-bottom-width: 1pt}
|
| border-style |
none, solid, double, groove, ridge, inset, outset |
- {border-style: dashed}
- {border-style: solid}
|
border-<quadrant>-style
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
|
thin, medium, thick, <unit> |
- {border-top-style: dashed}
- {border-right-style: solid}
- {border-bottom-style: groove}
|
| border-color |
<color> |
|
border-<quadrant>-color
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
|
<color> |
- {border-top-color: orange}
- {border-right-color: red}
- {border-bottom-color: #A0A0FF}
- {border-left-color: rgb(0,0,255}
|
| border-collapse |
separate, collapse |
{border-collapse: collapse} |
|
Example:
|
| Lists |
| list-style |
none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, |
{list-style: 10px} |
| Cursor |
| cursor |
auto, crosshair, default, pointer, move, N-resize, text, wait, help |
{cursor:hand;} |
|
Example:
- auto
- crosshair
- default
- pointer
- move
- N-resize
- S-resize
- E-resize
- W-resize
- text
- wait
- help
|
| Printing |
| page-break-before |
auto, always, left, right |
{page-break-before:always;} |
| page-break-after |
auto, always, left, right |
{page-break-before:auto;} |
| Pseudo |
:first-letter
:first-line |
|
div:first-letter{float:left;color:blue}
div:first-line{float:left;color:blue} |
|
Example:
Once upon a time, lived a very little cat...
|
:active
:hover
:link
:visited |
|
span:hover{background:yellow} |
|
Example:
Once upon a time, lived a very little cat...
Notes:
Doesn't work in IE7. |
| :first-child |
|
div:firstchild{background:yellow} |
|
Example:
Once upon a time, lived a very little cat...
Notes:
For IE must be declared? |
| Notes |
| <quadrant> |
top, right, bottom,left |
| <border> |
solid, dashed, dotted,double, ridge, groove, inset, outset |
| <unit> |
px, pt |
|
|