///Cascading Style Sheets – CSS

Cascading Style Sheets – CSS

The HTML4 way to control HTML output

Style sheets are designed to bring some of the
simplicity of word processing styles to HTML. You can define how
certain sections of text and code will be displayed, even down to the
font and size. You can change the way that existing HTML tags operate
within your pages. e.g. the <p> . . . </p> tag can be
redefined to change all the text within the tag to a specific font,
size, indent, emphasis and position.

Style sheets aren’t as new as they may seem. Internet
Explorer 3 partially implemented style sheets but you should only
expect CSS to function correctly when viewed in a version 4 or later
browser – either Netscape or Microsoft.

The main advantage of style sheets is in making a
consistent ‘feel’ for your site. By pre-defining all the styles you
use, everything in the page can be organised sometimes without making
any changes to the actual data. This is done by using an external style
sheet that can be applied equally to all pages on your site:

<head>
<link rel="stylesheet" type="text/css" href="mycssfile">
</head>

This site uses external style sheets to achieve that
consistent look and feel, by linking the same stylesheet to all similar
documents. Whether internal or external, the style sheet is ignored by
all older browsers. This leads to duplication in the common files as a
body style is defined in the style sheet and in the html tag. This is
not a problem – the CSS definition contains instructions to newer
browsers to justify the text and to only use certain font families, a
task that is beyond the capability of the HTML <BODY> tag anyway

Introduction to style sheets

The HTML4 way to control HTML output

From wordprocessors to DTP suites, even spreadsheets,
text is laid out in a ‘style’ – a collection of properties that
determine how that text is displayed. Fonts, font weight and size,
justification, colour, alignment – all can be defined as part of the
text style.

Now HTML4 and CSS not only bring styles to your web
pages, but extend the nature of the style to include the precise
position of the text elements, the visibility, movement (through
Javascript), without losing the bonus of any style – updating every
text block in one step just by changing the style properties.

A style sheet is based on rules – each with three parts

Selectors
An HTML tag, a class (see later) or an ID (enhanced version of the name attribute)

Properties
Tells the browser what part of the selected element to change

Values
What to change the property to become.

n.b. CodeHelp only uses full CSS on pages designed for
IE4&5. Netscape Navigator up to release 4.6 does not support all
CSS features. Check all pages in all versions before publishing.

Style classes, ID’s and altered HTML tags

The following is taken from the content.css file used at CodeHelp

BODY {font:10pt sans-serif;color:black;text-align:justify;
background-color:white;}
TABLE {font:10pt sans-serif}
H1 {font:18pt sans-serif;color:navy;}
H2 {font:16pt sans-serif;color:navy;}
H3 {font:14pt sans-serif;color:navy;}
B {font-weight:bold;}
#navbar {position:absolute;top:60;left:10;width:246px;}
.header {position:absolute;top:10;left:270;}

In the above example, all the selectors are HTML tags.
The BODY tag is set to only show in a sans-serif font with black text
on a white backgrond colour. Text is justified (even left and right).
The table tag is also set to a specific font family and the H1, H2 and
H3 tags are given both colours and fixed point scales.

# defines a ID selector which can be applied to any
element by adding the id="navbar" attribute to any HTML4 tag. However,
each ID must be unique in HTML4 so this is used for elements that are
common to several files – to ensure consitent display properties.

. defines a class selector which is more global and can
be applied to any HTML4 tag by adding class="header" attribute to the
tag.

Using CSS to avoid tags deprecated in HTML4

You’ve already seen how to alter the <BODY> tag
to include details normally declared in the HTML. This is included in
the CSS file because HTML4 dictates that the normal text= and bgcolor=
attributes are "deprecated" – not needed and likely to be unsupported
in future releases of HTML. There are other BODY attributes that are
deprecated, the alink=, link= and vlink= attributes. These cannot be
amended by the CSS BODY selector – you need to use a pseudo-class to
include these in CSS

a:link{color:red;background-color:white;}
a:visited{color:green;background-color:white;}
a:active{color:black;background-color:white;}

Equivalent to the attributes: link=red vlink=green alink=black in the normal BODY tag.

Remember, for files shared with non-CSS capable
browsers, you may need to include the deprecated <BODY>
attributes temporarily. Don’t neglect the text-justification and font
selection of the main BODY selector – these will add to the
presentation of the site in those browsers that support CSS but will
cause no problems in non-CSS browsers, so go ahead and include them in
all your HTML.

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.

  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-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.
2010-05-25T22:52:53+00:00 November 8th, 2007|CSS|0 Comments

About the Author:

Leave A Comment