Complete CSS

Your complete CSS1 + CSS2 reference

[ Specifying property values ] [ Text Properties ] [ Box Properties ] [ Background Properties ] [ Classification Properties ] [ Positioning ] [ New elements in CSS2] - including: New selectors, properties, font descriptors, pseudo-selectors, functions, added values for CSS1 Properties.

Adapted from Web Design in a Nutshell by Niederst

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
CodeUnitDescription
pxPixelTaken relative to monitor resolution
ptPoint Traditional publishing font measurement
72 Points is approximately 1 inch (2.5cm).
pcPica Traditional publishing font measurement
12 Pica = 1 Point, approximately 1 / 6 inch (8mm).
emEm Taken relative to the capital M in the current font
Can be assumed to be equal to the current point size.
exEx Taken relative to the lower-case x in the current font
Can be assumed to equal half the current point size.
in"Inches
mmmmMillimetres
cmcmCentimetres

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.

  1. Text Properties
    1. font-family - style="font-family: helvetica,sans-serif"
    2. font-style - style="font-style:oblique;"
    3. font-variant - style="font-variant:small-caps;"
    4. font-weight - style="font-weight:700;"
    5. font-size - style="font-size:xx-large;"
    6. font - style="font: 12pt Times, serif;"
    7. color - style="color:red;"
    8. line-height - style="line-height:2em;"
    9. word-spacing - style="word-spacing:2ex;"
    10. letter-spacing - style="letter-spacing:4pc;"
    11. text-decoration - style="text-decoration:overline;"
    12. text-transform - style="text-transform:capitalize;"
    13. text-align - style="text-align:justify;"
    14. text-indent - style="text-indent:2em;"
    15. vertical-align - style="vertical-align:text-bottom;"

    Top

  2. Box Properties Full explanation of the "box"
    1. margin-top
    2. margin-right
    3. margin-bottom
    4. margin-left
    5. margin - style="margin-right:20px;"
    6. padding-top
    7. padding-right
    8. padding-bottom
    9. padding-left
    10. padding - style="padding-right:20px;"
    11. border-top-width
    12. border-right-width
    13. border-bottom-width
    14. border-left-width
    15. border-width - style="border-right-width:8px;"
    16. border-color - style="border-color:red;"
    17. border-style - style="border-style:groove;"
    18. width - style="width:40px"
    19. height - style="height:40px"
    20. float - style="float:right"
    21. clear - style="clear:both"

    Top

  3. Background Properties
    1. background-color - style="background-color:silver;"
    2. background-image - style="background-image:url(../images/nav2.jpg);"
    3. background-repeat - style="background-repeat:repeat-y;"
    4. background-attachment - style="background-attachment:fixed;"
    5. background-position - style="background-position:top left;"
    6. background - style="background: silver url(../images/nav2.jpg) repeat-y fixed top left;"

    Top

  4. Classification Properties
    1. display - style="display:inline;"
    2. white-space - style="white-space:pre;"
    3. list-style-type - style="list-style-type:disc;"
    4. list-style-image - style="list-style-image:url(../images/spot.png);"
    5. list-style-position - style="list-style-position:inside;"
    6. list-style - style="list-style: disc url() inside;"

    Top

  5. Positioning
    1. absolute - style="position:absolute;top:75px;left:125px;"
    2. relative - style="position:relative;top:75px;left:125px;"
    3. static - style="position:static;"
    4. z index - style="z-index:5"
    5. visibility - style="visibility:hidden;"
    6. overflow - style="overflow:scroll;"

    Top

  6. 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-shadowtop table-layoutvolume
        font-size-adjustright cell-spacingspeak
        font-stretchbottom empty-cellspause-before
        unicode-bidi leftcaption-sidepause-after
        z-indexcontentpause
        cursormin-widthquotesspeak-header-cell
        outlinemax-widthcounter-reset cue-before
        outline-colormin-heightcounter-increment cue-after
        outline-stylemax-heightmarker-offset cue
        outline-widthoverflowrow-span play-during
        border-top-colorclipcolumn-span azimuth
        border-right-colorvisibilityborder-collapse elevation
        border-bottom-colorpageborder-spacing speech-rate
        border-left-colorpage-break-beforeposition voice-family
        border-top-stylepage-break-after direction pitch
        border-right-stylepage-break-insidepitch-range
        border-bottom-styleorphansstress
        border-left-style widowsrichness
        sizespeak-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.

    Top

This is part of www.codehelp.co.uk Copyright © 1998-2004 Neil Williams
See the file about.html for copying conditions.