Cascading Style Sheets - CSS
By Neil Williams
2007-11-08
Your complete CSS1 + CSS2 reference
Specifying Values
Many CSS properties take numerical values for length, width, height and
other measurements. Some values can be specified as percentage % values
and these are indicated in the Glossary examples. Absolute values can
be specified using these codes:
e.g.
style="line-height:3ex;"
style="border-top:2px;"
Specifying absolute CSS property values
| Code | Unit | Description |
|---|
| px | Pixel | Taken relative to monitor resolution |
| pt | Point |
Traditional publishing font measurement |
| 72 Points is approximately 1 inch (2.5cm). |
| pc | Pica |
Traditional publishing font measurement |
| 12 Pica = 1 Point, approximately
1
/
6 inch
(8mm). |
| em | Em |
Taken relative to the capital M in the current font
|
| Can be assumed to be equal to the current point size.
|
| ex | Ex |
Taken relative to the lower-case x in the current font
|
| Can be assumed to equal half the current point size.
|
| in | " | Inches |
| mm | mm | Millimetres |
| cm | cm | Centimetres |
Top
Details about how to use these CSS properties can be found in
the CodeHelp Glossary and each property listed
is linked to the corresponding description.
- Text Properties
- font-family
- style="font-family: helvetica,sans-serif" - font-style
- style="font-style:oblique;" - font-variant
- style="font-variant:small-caps;" - font-weight
- style="font-weight:700;" - font-size
- style="font-size:xx-large;" - font
- style="font: 12pt Times, serif;" - color
- style="color:red;" - line-height
- style="line-height:2em;" - word-spacing
- style="word-spacing:2ex;" - letter-spacing
- style="letter-spacing:4pc;" - text-decoration
- style="text-decoration:overline;" - text-transform
- style="text-transform:capitalize;" - text-align
- style="text-align:justify;" - text-indent
- style="text-indent:2em;" - vertical-align
- style="vertical-align:text-bottom;"
Top - Box Properties
Full explanation of the "box"
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin
- style="margin-right:20px;" - padding-top
- padding-right
- padding-bottom
- padding-left
- padding
- style="padding-right:20px;" - border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-width
- style="border-right-width:8px;" - border-color
- style="border-color:red;" - border-style
- style="border-style:groove;" - width
- style="width:40px" - height
- style="height:40px" - float
- style="float:right" - clear
- style="clear:both"
Top
- Background Properties
- background-color
- style="background-color:silver;" - background-image
- style="background-image:url(../images/nav2.jpg);" - background-repeat
- style="background-repeat:repeat-y;" - background-attachment
- style="background-attachment:fixed;" - background-position
- style="background-position:top left;" - background
- style="background: silver url(../images/nav2.jpg) repeat-y fixed top left;"
Top - Classification Properties
- display
- style="display:inline;" - white-space
- style="white-space:pre;" - list-style-type
- style="list-style-type:disc;" - list-style-image
- style="list-style-image:url(../images/spot.png);" - list-style-position
- style="list-style-position:inside;" - list-style
- style="list-style: disc url() inside;"
Top - Positioning
- absolute
- style="position:absolute;top:75px;left:125px;" - relative
- style="position:relative;top:75px;left:125px;" - static
- style="position:static;" - z index
- style="z-index:5" - visibility
- style="visibility:hidden;" - overflow
- style="overflow:scroll;"
Top - New elements in CSS2 - including:
- New selectors
- * - matches any element.
* {font-family:sans-serif;} - A>B - matches any element B that is a child element of A.
DIV.body>P {text-align:justify;} - A+B - matches any element B that immediately follows element A.
P+UL {width:100%;} - A[att] - matches any element that has the named attribute defined.
LI[id] {text-transform:capitalize;} - A[att="val"] - matches any element that has the named attribute
set to the specified value.
TD[colspan="2"] {font-weight:700;} - A[att~="val"] - matches any element that has the named attribute
where that attribute value is a list of space-separated values, one of which is exactly equal to "val".
A[title~="Licence"] {font-weight:700;}
matches:
<a href="../code/gpl.html" title="General Public Licence">The GPL</a>
- A[lang|="val"] - matches any element that has the given value as one
of the values for the lang attribute.
*[LANG=fr] {font-weight:400;}
- New Properties. Detailed information on these new CSS2 properties
is available at the W3C CSS2 index. Information will be added to the CodeHelp Glossary as CSS2 becomes more widespread.
-
New CSS2 properties
| text-shadow | top |
table-layout | volume |
| font-size-adjust | right |
cell-spacing | speak |
| font-stretch | bottom |
empty-cells | pause-before |
| unicode-bidi |
left | caption-side | pause-after |
| z-index | content | pause |
| cursor | min-width | quotes | speak-header-cell |
| outline | max-width | counter-reset |
cue-before |
| outline-color | min-height | counter-increment |
cue-after |
| outline-style | max-height | marker-offset |
cue |
| outline-width | overflow | row-span |
play-during |
| border-top-color | clip | column-span |
azimuth |
| border-right-color | visibility | border-collapse |
elevation |
| border-bottom-color | page | border-spacing |
speech-rate |
| border-left-color | page-break-before | position |
voice-family |
| border-top-style | page-break-after |
direction |
pitch |
| border-right-style | page-break-inside | pitch-range |
| border-bottom-style | orphans | stress |
| border-left-style |
widows | richness |
| size | speak-punctuation |
| marks |
speak-date |
| speak-numeral |
| speak-time |
- New Font descriptors
- unicode-range
- units-per-em
- src
- panose-1
- stemv
- stemh
- slope
- cap-height
- x-height
- ascent
- descent
- widths
- bbox
- definition-src
- baseline
- centerline
- mathline
- topline
- New Pseudo-Selectors
- :after
- :before
- :first
- :first-child
- :focus
- :hover
- :lang
- :left
- :right
- New Functions
- @charset
- @media
- @font-face
- @page
- New values for CSS1 Properties
- All properties : inherit
- display : run-in, compact, marker, table, inline-table, table-row,
table-row-group, table-column, table-column-group, table-cell, table-caption,
table-header-group, table-footer-group.
- list-style-type : hebrew, armenian, georgian, cjk-ideographic,
hiragana, hiragana-iroha, katakana, katakana-iroha.
- Colour names : ActiveBorder, ActiveCaption, AppWorkspace, Background,
ButtonFace, ButtonHighlight, ButtonText, CaptionText, GrayText, Highlight,
Hightlight-Text, InactiveBorder, InactiveCaption, InfoBackground, InfoText,
Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight,
ThreeDLightshadow, ThreeDShadow, Window, WindowFrame, WindowText.
Tutorial Pages:
»
The HTML4 way to control HTML output
»
Introduction to style sheets
»
Style classes, ID's and altered HTML tags
»
Using CSS to avoid tags deprecated in HTML4
» Your complete CSS1 + CSS2 reference
Copyright © Neil Williams
|
|
|
