CSS Reference

There are four methods in which Styles can be used. The first three are either called or coded in the Header.

  1. Embedding: This places the style formatting inside the header of the HTML document.
  2. Importing: This uses a separate file, FileName.css.
  3. Linking: This uses a separate file, FileName.css.
  4. InLine: This places the style formatting inside of an individual tag. <br style='text-align: center';>

Here are the formats for all four.

  1. EMBEDDING:
    <style type="text/css" media="print">
    <!--
    p {text-align: right; margin-bottom: 4pt;}
    -->
    </style>
  2. IMPORTING:
    <style>
    <!--
    @import url('YourFileName.css');
    -->
    </style>
  3. LINKING:
    <link rel="stylesheet" type="text/css" media="screen" href="ScreenFileName.css">
    <link rel="stylesheet" type="text/css" media="print" href="PrintFileName.css">
  4. INLINE: (Used as a property in a tag. See list at bottom. Must use quotes, " or ‘, around the style command.)
    Example: used in a <p> tag
    <p style="text-align: right; margin-bottom: 4pt";>
    Example: used in a <span> tag
    <span style="font-family: Verdana, "Times New Roman"; font-weight: 700";>Some Text</span>

EXAMPLE OF AN EXTERNAL STYLE SHEET FileName.css. This file only contains the style code from one line to many.

a:hover {font-size: 100%; font-weight: bold; color: #ff0000;}
a:link {color: #0000ff;}
a:visited {color: #0000ff;}
a:active {color: #ff0000;}

 

STYLES LIST

Notice that ALL style properties are terminated using a semi-colon. Do this whether using one style property or ten.
Properties marked with an * are using shorthand values.

FONT:

* font: [style weight variant size/line-height family] (Size & Family are required)
font-style: [normal, italic, oblique]
font-weight: [100 (lightest), 400 (normal), 700 (bold), 900 (extra-bold)]
font-variant: [small-caps] (Not very supported)
font-size: [12pt, 120%, 1.2em]
line-height: [normal, 14pt, 120%, 2.0]
font-family: Verdana, "Times New Roman", Arial, etc.

TEXT:

letter-spacing: [2px]
text-align: [left, right, center, justify]
text-decoration: [underline, overline, line-through, blink]
text-indent: [-3em, 3em] Example of HANGING: p {text-indent: -3em; margin-left: 3em}
text-transform: [capitalize, uppercase, lowercase, none]
vertical-align: [baseline, middle, sub, super, text-top, text-bottom, top, bottom or 50%, -100%]
word-spacing: [25px]

COLOR & BACKGROUND:

* background: [color image position repeat attachment]
background-attachment: [scroll, fixed]
background-color: [blue, #0000ff]
background-image: [none or a url(image.gif)]
background-position: [10px (Right) 20px (Down)]
backgroung-repeat: [repeat, repeat-x, repeat-y, no-repeat]
color: [red or #ff0000] (Font Color)

BOX PROPERTIES:

* margin: [top right bottom left] (1 value = 4 sides, 2 values = T/B & L/R, 3 values = T & L/R & B)
* border: [width color style]
* padding: [top right bottom left] (1 value = 4 sides, 2 values = T/B & L/R, 3 values = T & L/R & B)

Margin, Border, and Padding shorthand values can all be used with the longhand properties. eg: margin-left, border-right, etc.

margin-left, margin-right, margin-top, margin-bottom:
border-left, border-right, border-top, border-bottom:
padding-left, padding-right, padding-top, padding-bottom:
border-color: [green or #00ff00]
border-width: [thin, medium, thick or 1px, 5px, etc.]
border-style: [none, dotted, dashed, solid, double, groove, ridge, inset, outset]
position: [absolute, relative]

LIST:

list-style-image: [none, url(image.gif)]
list-style-position: [inside, outside]
list-style-type: [disc, circle, square, none, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha]

OTHER:

white-space: [normal, pre]
float: [none, left, right]
clear: [none, left, right, both]

MOUSEOVER STUFF:

<a href="www.somelink.com" OnMouseOver=’rollover.src="image1.gif"’ OnMouseOut=’rollover.src="image2.gif"’>
<img src="image2.gif" name="rollover"></A>

IMAGE MAPPING:

<img src="someimage.jpg" usemap=#MAPNAME>
At end of doc if desired…
<map name="MAPNAME">
<area shape="rect" [circle, poly] coords="X,Y,X,Y," href="url.com">
<area shape="rect" [circle, poly] coords="X,Y,X,Y," href="another_url.com">
</map>

Notes on Coords:

Rect first X,Y is upper left, second X,Y is lower right.
Circle first X,Y is center of circle, second X,Y is far right hand edge of radius.
Poly uses from 3 to as many points as you would like to use. X,Y for each point.

CLASSIFACTION PROPERTIES:

display [block, inline, list-item, none, compact, run-in, marker]

Styles are available to use in the following tags:
A Anchor ABBR Abbreviation
ACRONYM Indicates an Acronym ADDRESS
Distinguishes an address
AREA Defines an area in an image map B Bold
BIG Larger font and Bold BLINK Netscape only
BLOCKQUOTE Left & Right indentation BODY Container for HTML document
BR Line Break BUTTON
CAPTION Used inside <TABLE> tags to specify a description for a table CITE Same as Italics
CODE Displays text as code COL Specifies attributes for a table column
COLGROUP Specifies characteristics for a group of table columns DD Definition in definition list
DEL Marks text for deletion DFN Indicates the definition of a term
DIR Directory list DIV Document divisions
DL Contains DT & DD in a definition list DT Contains terms in a definition list
EM Italics FIELDSET Groups related FORM elements
FORM A container for a FORM Hn Headings 1 – 6
HR Horizontal Rule I Italics
IFRAME Creates floating frames IMG Image
INPUT Input methods. Used inside a FORM INS Marks text to be inserted into a document
KBD Specifies keystrokes within a document LABEL Label for a FORM widget
LEGEND Description used inside the <FIELDSET> tag LI List item
MAP Map container MARQUEE Scrolling text. IE only
MENU Menu list NOBR No word wrapping
OL Ordered list OPTGROUP Specifies a description for a group of options
P Paragraph PRE
Preformatted plain text. Good for code
Q Quotes inside a paragraph. SAMP Indicates a sequence of literal characters
SELECT Specifies a selection list within a FORM SMALL Shrinks the font down
SPAN Defines an inline section of a document for styles STRIKE Strike through the text
STRONG Indicates strong emphasis SUB Subscript text
SUP Superscript text TABLE Table container
TBODY Defines the table body TD Table cell
TEXTAREA Used in FORMS as a large text display area TFOOT Defines a table footer
TH Table cell heading. Same as TD but with emphasis THEAD Defines a table header section
TR Table row TT Monospace font
U Underline UL Unordered list
VAR Indicates a placeholder variable in a document    

 

Leave a Reply

No labor of love is in vain