|
|
"Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL."
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 |
|
|