CSS - Reference I - WEB DEV. - NEILS RESOURCE WEB

Grouping allows the author to assign a single style declaration to multiple elements (selectors). Example: Sets Headings 1, 2, 3, & 5 to purple

H1, H2, H3, H5 {color: purple;}

Class selectors may be used as an attribute to a tag. A class selector is a string preceded by a period. Do not use the period when referencing the class. Do not begin a class name with a number, although IE4+ let you get away with it.

.example {color: red;}
     <P class="example">This is an example in red.</P>

ID selectors may be used as an attribute to a tag. An ID selector is a string preceded by a hash mark (#), and is called using the ID= attribute. The hash mark does not appear in the value of ID. Works like the class selector except that the ID can be used only once in the document.

#i5 {color: red;}
     <P ID="i5">This is text with an ID of 'i5'.</P>

Made up of one or more selectors delimited by spaces. The example rule indicates the bold mark-up will be red only while enclosed in H1 tags.

H1 B {color: red;}
     <H1>This is <B>red</B>.</H1>
     <P>This is <B>not</B>.</P>

Good idea to leave comments in the style sheet. Affects anything enclosed, even across multiple lines.

/* This is a comment. */

These two HTML tags were introduced to support style sheets. Think of them as empty tags which you fill with styles.

DIV is used for formatting structure, blocks of text.

<DIV align=center><H1>This heading</H1></DIV>

SPAN is used for inline formatting.

<SPAN class="example">red text in paragraph</SPAN>

Units of measure take 2-letter abbreviations, with no space between number and unit.
Units fall into three categories:

• Absolute: mm, cm, in, pt (point size), pc (pica)
  
• Relative: em (defining point size of font), ex (x-height of font)
• Device-dependent: px (pixel)

width: 50px;
margin-left: 2em;

Used by various properties to define size in relative terms. Values are calculated with regard to their context; in the example, the H2 element will be 75% of its default size.

H2 {font-size: 75% }

CSS uses keywords as values for many properties.
Examples are bolder, lighter, larger, x-large, xx-large, x-small.

By number; by percentage; by name.

color: #FF00FF;    /* note that this may be expressed as #F0F */
color: rgb(100%,0%,100%);
color: chocolate

Used by various properties to define the location of images. Important: Partial URLs are relative to the style sheet, not the HTML document!

url(picture.gif)
url(http://www.pix.org/lib1/pic278.gif)
list-style-image: url(bullet3.gif)

H1 {color: maroon ! important;}

1. STYLE="blah blah" inline attribute to a tag
   Example: <P STYLE="color: red; font: 14pt 'Times New Roman', serif">inline</P>
   Note the single quotes on the font to avoid conflict with double quotes.
2. <STYLE> tag in HEAD of document
   Example:
   <STYLE>
   .title { font-family: 'Snap ITC', cursive;
   font-size: 60pt;}
   </STYLE>
3. <LINK> to external style sheet in HEAD of document
   Example: <LINK REL="stylesheet" TYPE="text/css" HREF="demo.css">
4. Browser default styles

<STYLE media="print">      /* print version styles here */
.noprint {display: none;}  /* items with this class won't print */
</STYLE>

<STYLE media="screen">     /* screen version styles go here */
.noshow {display:none;}    /* items with this class won't display */
</STYLE>

P {font-family: "Times New Roman", serif;}

EM {font-style: italic;}

H3 {font-variant: small-caps;}

B {font-weight: 700;}

H2 {font-size: 200%;} H3 {font-size: 36pt;}

P {font: bold 12pt/14pt Helvetica,sans-serif;}

H6 {color: teal;}

{ background-color: #CCCC00 } 

BODY {background-image: url(bg41.gif);}

BODY { background-repeat: repeat-y }

BODY {background-attachment: fixed;}

BODY {background-position: top center;}

BODY {background: white url(bg41.gif) fixed center;}

P {word-spacing: 0.5em;}

P {letter-spacing: 0.5em;}

U {text-decoration: underline;}
.old {text-decoration: line-through;}

.super {vertical-align: super;}

H1 {text-transform: uppercase;}

P {text-align: justify;} H4 {text-align: center;}

P {text-indent: 5em;} H2 {text-indent: -25px;}

P {line-height: 18pt;} H2 {line-height: 200%;}

The most powerful way of thinking about style is to consider every element (<P>, <H1>,etc.) as a box. The dimensions of the box can be controlled to produce a very broad range of effects.

If you think of a page as a box of boxes, this model forms the basis of positioning elements even to the pixel level.

Note that as of IE6.0, that browser now follows the W3C definition for width, which should not include border and padding values.

UL {margin-top: 0.5in;}

Sets the size of the right margin of an element. Negative values are permitted, but exercise caution.

IMG {margin-right: 30px;}

Sets the size of the bottom margin of an element. Negative values are permitted, but exercise caution.

UL {margin-bottom: 0.5in;}

Sets the size of the left margin of an element. Negative values are permitted, but exercise caution.

P {margin-left: 3em;}

Sets the size of the overall margin of an element. Negative values are permitted, but exercise caution. Multiple values start from the top and go clockwise.

H1 {margin: 2em;}
P {0% 5% 0% 5%;} 

Sets the size of the top padding of an element, which will inherit the element's background. Negative values are not permitted.

UL {padding-top: 0.5in;}

Sets the size of the right padding of an element, which will inherit the element's background. Negative values are not permitted.

IMG {padding-right: 30px;}

Sets the size of the bottom padding of an element, which will inherit the element's background. Negative values are not permitted.

UL {padding-bottom: 0.5in;}

Sets the size of the left padding of an element, which will inherit the element's background. Negative values are not permitted.

P {padding-left: 3em;}

Sets the size of the overall padding of an element, which will inherit the element's background. Negative values are not permitted.

H1 {padding: 2ex;}

Sets the width of the top border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

UL {border-top-width: 0.5in;}

Sets the width of the right border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

IMG {border-right-width: 30px;}

Sets the width of the bottom border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

UL {border-bottom-width: 0.5in;}

Sets the width of the left border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

P {border-left-width: 3em;}

Sets the width of the overall border of an element, which will inherit the element's background, and may have a foreground of its own (see border-style). Negative values are not permitted.

H1 {border-width: 2ex;}

Sets the color of the border of an element. In the example, top and bottom borders are silver, left and right are black. All 4 borders may be separately set.

H1 {border-color: silver black;}

Sets the style of the overall border of an element. Values: dashed; dotted; double; groove; inset; outset; ridge; solid; none. Default: none (border not displayed).

H1 {border-style: solid; border-color: purple;}

UL {border-top: 0.5in solid black;}

IMG {border-right: 30px dotted blue;}

Shorthand property which defines the width, colour, and style of the bottom border of an element.

UL {border-bottom: 0.5in grooved green;}

Shorthand property which defines the width, colour, and style of the left border of an element.

P {border-left: 3em solid gray;}

Shorthand property which defines the width, colour, and style of the overall border of an element.

H1 {border: 2px dashed tan;}

Used to set the width of an element. Can be used on any block-level or replaced element. Negative values are not permitted.

TABLE {width: 80%;}

Used to set the height of an element. Can be used on any block-level or replaced element, within limits. Negative values are not permitted.

IMG.icon {height: 50px;}

Causes the element to float to one side and other text to wrap around it. Use it for non-positioned block elements. Values: left; right; none.

IMG {float: left;}

Specifies whether the element can have floating elements around it. Causes the element to be positioned below any floating elements on the side specified. Values: both; left; right; none. Default is none.

H1 {clear: both;}

Used to override default formatting for HTML elements. Values: block; inline; list-item; none. Default is block. Note that space is not reserved for the element when display = none. (See Positioning Property: visibility.)

.hide {display: none;}

Defines how whitespace within the element is treated. Values: normal, pre, nowrap.

TD {white-space: nowrap;}
TT {white-space: pre;}

Used to declare the type of bullet or numbering to be used in an unordered or ordered list. Values: disc; circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha; none.

UL {list-style-type: square;}
OL {list-style-type: lower-roman;}

Used to declare an image to be used as the bullet in an unordered or ordered list. Applies to elements with a display value of list-item.

UL {list-style-image: url(bullet3.gif);}

Used to declare the position of the bullet or number in a list with respect to the content of the list item. Values: inside; outside. Default: outside.

LI {list-style-position: inside;}

Shorthand property condensing all other list-style properties. Applies to all elements with a display value of list-item.

UL {list-style: square url(bullet3.gif) outer;}

Specifies an area of an element to be rendered transparent. Values: rect (top right left bottom) where top right left bottom are auto or length values (pt, in, cm, px)

{ clip: rect (5pt auto auto auto) } 

Specifies the height of an element; the aspect ratio will be maintained if width is specified as auto. Values: auto or length values (pt, in, cm, px) or percentage.

{ height: 50px }

Specifies the width of an element; the aspect ratio will be maintained if height is specified as auto. Values: auto or length values (pt, in, cm, px) or percentage.

{ width: 50% } 

Specifies the left position of an element positioned relatively or absolutely. Values: auto or length values (pt, in, cm, px) or percentage.

{ left: 2pt } 

Specifies the top position of an element positioned relatively or absolutely. Values: auto or length values (pt, in, cm, px) or percentage.

{ top: -2pt } 

Specifies how content which overflows its box is to be handled. Values: visible (display content); hidden (hide overflow content); scroll (provide scrolling mechanism); auto (up to the browser to figure out what to do)

{ overflow: auto } 

Specifies whether the element can be positioned. Values: static (default--not positioned); relative (in relation to where the element would normally be); absolute (in relation to the top left hand corner of the parent element).

{ position: relative } 

Specifies whether element is visible. Note that space for element is reserved in either case. (see Classification Property: display) Values: visible; hidden.

{ visibility: hidden }

Specifies whether an element is displayed above or below overlapping elements. Values: auto (stack on page in order element appears in code); or an integer. Elements with higher numbers are on top of those with lower.

{ z-index: 2 }

Pseudo-classes can be used in contextual selectors and can be combined with normal classes.

A:link {color: #900}
A:link IMG { border: solid blue }
A:hover{ background:#ffff00; }   /*when mouse over link (IE4 only)*/

Below is a variation where you want the reader to know they are making a link outside your site. Define a class "external" to make the nature of the link obvious. Normal class names precede pseudo-classes in the selector.

A.external:link { color: magenta }

<A CLASS="external" HREF="http://out.side/">external link</A>

Applied to the first displayed line of text in the given element. This persists even if the text is reformatted. Applied to block-level elements only. Supported by IE5.5 and Opera 3.6.

P:first-line {color: red;}
     <P>The first line of this paragraph is
 red. More blah blah blah...</P>

Applied to the first letter in the given element. Can be used to generate drop-cap effects, among others. Should be applied to block-level elements only. Supported by IE5.5+ and Opera 3.6.

P:first-letter {color: red;}
     <P>The capital 'T' at the beginning of this paragraph is red.</P>

Printing properties currently work partially with IE4 and more fully with IE5+ and Opera 3.5. CSS2 will greatly augment single-source strategies for documenters.
Values:
auto do a page break after the element only if there is no remaining space on the current page
always always do a page break after the element
left do one or two page breaks after the element until a blank left page is reached
right do one or two page breaks after the element until a blank right page is reached

Example:

 
<STYLE>
.page {page-break-after: always}
</STYLE>
...
<P CLASS="page">
... 

Values: same as above. Note that neither of these properties work within tables. Also buggy used with <br> tag. Better luck using page breaks in structural tags (H1, P, etc.).
If there are conflicts between the two page-break properties, the value that results in the largest number of page breaks will be used.