CSS PROPERTIES

You can find a complete list of CSS Attributes/Properties at Microsoft.com or Blooberry.com. A tutorial for CSS can be found at W3Schools.com.

Some of the properties for various objects are:

FONT
TEXT
BLOCKLEVEL
BACKGROUND
CLASSIFICATON
UNITS
POSITION
OTHER NOTATIONS

are used as property:style with various HTML tags, e.g.

style="font-weight:bold"
<P style="font-weight:bold">

They also can be used in the <HEAD> of a single web page or as a style file like this:

<HTML>
<HEAD>
<style type="text/css">
.lotsofstuff {
font-weight:bold;
font-style:italic;
font-size:16px;
letter-spacing:5;
color:blue;
}
</style>
</head>

FONT

Use these FONT properties to specify the font size, style, family and weight.

PROPERTY VALUE
font-size
  • absolute-size - xx-small, x-small, small, medium, large, x-large, xx-large.
  • relative-size - relative to the parent's font size - larger, smaller.
  • length - a number followed by a unit of measurement, e.g. pt, 12pt.
  • percentage - relative to the parent's font size.
font-family The name of the font to be used. REMEMBER, if the surfer doesn't have the font on their PC, then their default font will be used. You can specify several fonts by using:
font-family:verdana, arial, times new roman.
The standard fonts that everyone should have on their PC are: times new roman, verdana, arial .
font-weight normal, bold, bolder, lighter, 100 - 900
font-style normal, italic

 
TEXT

Use these properties to style text in a document:

PROPERTY VALUE
color
  • #XXXXXX - hexadecimal color, e.g. #0033FF.
  • name - e.g. red, blue, green, etc.
  • rgb(r%,g%b%) - an rgb color, e.g. rgb(5%,75%,50%)
line-height
  • number - if no unit if specified then it is the current line height multiplied by this number.
  • length - specifies the unit, e.g. 12pt, 18px, 0.4in
  • percentage - relative to the element's font size, e.g. 120%
  • normal
text-decoration
  • none - use this to remove the underline from links, i.e. <a href="..." style="text-decoration:none">
  • underline - text will be underlined
  • line-through - a line will be drawn through the text
  • blink - text will blink (not recommend)
text-transform
  • none - neutralize inherited value
  • capitalize - display first letter in each word as a capital
  • lowercase - all letters will be in lower case
  • uppercase - all letter will be in upper case
text-align
  • left
  • right
  • center
  • justify - text will align with both left and right margins
text-indent
  • length - a numerical value with units, e.g. 10pt. 10px
  • percentage - a numberical value with % sign, e.g. 10%

 
BLOCK LEVEL

Style sheets treat each block-level element (elements that start on a new line or some place new on the page) as if it were surrounds by a 'box'. The various properties of this 'box' can be assigned values.

PROPERTY VALUE
margin-left
margin-right
margin-top
margin-bottom
margin 		This is the minimal distance between the border of the 'box' and any two adjacent elements within it.
  • length -numerical value with a unit
  • percentage - percentage
  • auto
You may set all margins to the same value by using margin:value or to different values by using margin:top,right,bottom,left in that order
paddint-top
padding-right
padding-bottom
padding-right
padding 		This is the minimal distance between the border of the 'box' and any elements within it.
  • length -numerical value with a unit
  • percentage - percentage
You may set all paddings to the same value by using padding:value or to different values by using margin:top,right,bottom,left in that order
border-width-top
border-width-left
border-width-bottom
border-width-right
border-width 		This is the width of the border, which can be a color, around the 'box'.
  • length -numerical value with a unit
You may set all borders to the same value by using border-width:value or to different values by using margin:top,right,bottom,left in that order
border-style These are types of border and require no 'value', i.e. border-style:outset.
  • none
  • solid
  • inset
  • outset
  • groove
  • ridge
To examples of the above see borders.htm
border-color The color of the border.
  • none
  • color value - hexadecimal, name or rgb. For example: #CC00CC, red, or rgb(red%,green%,blue%)
width The width of the element.
  • value % - e.g. 10%
float The alignment of the element. If float:left then other elements or text will wrap around the right side.
  • left
  • right
  • none
clear This element specifies whether an element allows floating elements on it sides. More specifically, it lists side where float elements are not acceptable.
  • none - float elements allowed on both sides.
  • left - element will be moved below any element on its left side.
  • right - element will be moved below any element on its right side.
  • both - - element is not allowed to have float elements on either side.
position Usage: position:property:;sub-property:style

Example: <div style="position:absolute;left:150;top:150"><img src="graphic-file-name"></div>

Properties:

  • static - the element is placed in the normal flow where it occurs.
  • relative - move an element relative to its normal position.
  • absolute - places an element at a specific place on the page.
  • fixed - as in absolute but also doesn't move when scrolling occurs.
Sub-Properties:
  • left - Sets how far the left edge of an element is to the right/left of the left edge of the parent element. Values are: auto, %, length.
  • top - Sets how far the top edge of an element is below(+)/above(-) the top edge of the parent element. Values are: auto, %, length.
  • z-index - Sets the stack order of an element. Values are: auto, number
  • overflow - Sets what happens if the content of an element overflow its area. Values are: visible, hidden, scroll, auto. .
  • bottom - Sets how far the bottom edge of an element is above/below the bottom edge of the parent element, which can be another element such as a graphic. Values are: auto, %, length.
  • clip - Sets the shape, rectangle, of an element. The element is clipped into this shape, and displayed. Values are: shape, auto.
  • right - Sets how far the right edge of an element is to the left/right of the right edge of the parent element. Values are: auto, %, length.
  • vertical-align - Sets the vertical alignment of an element. Values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, %.

 
BACKGROUND PROPERTIES

The property defines the color of an element, i.e. the FOREGROUND color.

PROPERTY VALUE
background-image
  • URL - the locaton of the image, e.g. http.//www.myhomepage.com/myimage.gif. I have found that the proper way to get a background image with style sheet is to use background-image:url('URL');.
background-color
  • #XXXXXX - hexadecimal color, e.g. #0033FF.
  • name - e.g. red, blue, green, etc.
  • rgb(r%,g%b%) - an rgb color, e.g. rgb(5%,75%,50%)
background-attachment
  • scroll - background scroll with rest of page or is fixed.
  • fixed
background-position
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x-% y-%
  • x-pos y-pos
background-repeat
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat.

 

CLASSIFICATION
This property defines whether an element is inline, e.g. <EM>, a block element or a block-element list item.
PROPERTY VALUE
display
  • inline
  • list-item
  • block
  • none - if this is set then the element and all of it children will no be displayed.
list-style-type This list is displayed with the list-style-type:square.
  • disc
  • circle
  • square
  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • none
white-space This property determines how the 'white space' within an element is handled.
  • normal - white space is 'collapsed.
  • pre - works like the <PRE> HTML tag.
UNITS

PROPERTY VALUE
length The value is an optional sign, '+' or '-', followed by a numerical value followed by a unit name. There are three types of lengths:
  • relative - specify a length relative to another element. These are easier to scale from one medium to another, e.g a computer diplay to a printer.
  • pixel
  • absolute
There are three types of relative units:
  • em - height of a capital M
  • ex - half the height of an 'x'.
  • px - pixels.
There are six types of absolute units:
  • pt - point
  • pc - pica
  • px - pixels
  • in - inches
  • mm - millimeters
  • cm - centimeters
color
  • hexadecimal - e.g. #FF00FF
  • rgb - e.g. 10%,5%,35%
  • name - the suggested 16 name are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

    See my color chart for a list and demonstration of various colors you can use on a web page.

POSITION
Property Description Values
bottom Specifies the bottom edge of an element auto
%
length
clip Sets the shape of an element. The element is clipped into this shape, and displayed shape
auto
left Specifies the left edge of an element auto
%
length
overflow Sets what happens if the content of an element overflow its area visible
hidden
scroll
auto
position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed
right Specifies the right edge of an element auto
%
length
top Sets how far the top edge of an element is above/below the top edge of the parent element auto
%
length
vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order. Negative values can be used. auto
number

STYLE

style can be used as a property in any element, e.g. <UL style="font-size:15pt">
 

CLASS

class is used to assign a particular style to an element, e.g. <UR>. It can also be used to define a style class, e.g H4.BOLD {font-weight:bold; }
 

ID

id is used to individually name a style. Thus you could specify, within an element, a class and an id, e.g.

H4.BOLD {font-weight:bold;} #myfont {font-family:verdana;}
 
<STYLE>

The <STYLE>, </STYLE> tags are used to specify style sheets elements, e.g. P, define CLASSes and IDs and to establish styles for a document.


 
<LINK>

The <LINK> tag is used to reference a document's style sheet elements to another document that contains only style sheet elements.


 
<SPAN>

<SPAN>, <SPAN> are used to apply style sheet elements to specify text, e.g. <SPAN style="color:#CC0000; font-weight:bold; font-style:italic">This text will be bold, red, and italic.<SPAN> which will look like this This text will be bold, red, and italic.


 
COMMENT

Comments in Style Sheets use a form that is similar to one used in C Programming Language. It is the "/* .... */". A typical comment could look like this:

P {font-size:12pt; font-family:verdana, arial; } /* Use multiply fonts in case surfer doesn't have 1st choice */