C S S  

Style Sheets
CPT 108 · Franklin College · Erich Prisner · 2002-2007

Here is a tutorial, here is another one, an here is a short one.

Advantages of CSS

How to insert CSS into HTML documents

Structure of a CSS Stylesheet

selector 

{property1 : value1;
property2 : value2;
           ...
propertyn : valuen;}

Quotation marks are needed around the value if the value is more than one word. More than one values are possible for the same property, you would just write them in, separated by spaces. Also, you can combine different selectors. This time, you would separate them by commas. 

Example: Stylesheet of these pages here

Selectors

The selector is either a 

  1. HTML tag, or a combination (contextual selector)
  2. a class selector, or 
  3. an ID selector.

Classes

Define different styles for the same HTML element by inserting class="classname" inside the HTML tag inside the HTML code. Refer to it inside the CSS sheet by selector tagname.classname or even .classname (for multiple kinds of tags).

ID selector

starts always with #. It refers to tag having the corresponding ID="..." attribute. That ID should occur only once in the HTML file!

Classification of Elements

  1. Block-level elements: P,H1, ..., LI, TABLE, DIV, BODY. The elements IMG and FORM normally aren't, but can be.
  2. Inline-elements: SPAN, and most other tags.
  3. List-item elements, like LI
.

The display property can take the values block, inline, list-item, none.

Comments

Start with /* and end with */.

Inheritance

border, margin, padding and background properties are not inherited.

Specificity

Which definition is used if several apply? Here is the order from weak to strong if more than one apply: inherited property --- tag selector --- contextual selector --- general class selector --- class selector with tag --- contextual class selectors with tag --- id selector --- style tag --- important property (like H1 {color: red !important; }).
Also, from weaker to stronger browser --- reader --- author.
Also, earlier --- later (appearance in stylesheet).

Units

could be relative or absolute

Text

Just for block elements:

the following are useable for all elements:

Font

font-family: (serif,sans-serif,monospace,cursive,fantasy)
or use list of specific fonts
font-weight (normal,bold,bolder,lighter,100,200,...900)
font-style (italic,oblique,normal)
font-size (xx-small,x-small,small,medium,large,x-large,xx-large,smaller,larger,length,percentages)

or combine all into font, like
p: {font: italic small-caps bolder 10pt Verdana, Arial, sans-serif;}
always end with font-size and font-family

Color

The main properties are color and background-color.

Margins and Borders

A box contains around its content, from content to outside content-padding-border-margin. width, height, refer to the content of the box (although older browsers with the box model bug may differ). All this only applies to block-level elements.
margin and margin-left, margin-top, ...
border-style: dotted|dashed|solid|double|groove|ridge|inset|outset
border-width: thin|medium|thick|length
border-color
border-left, ... and combine properties for border-style, border-width, and border-color.
padding in length, also padding-left, ...

float: (left,right,none) is used (in combination with setting the width of a box to some value) to let the other parts float around this box. This floating can be stopped (at the start of a new paragraph, for instance) by using the clear: (left,right,both,none) option.

Lists

list-style-type could be any of the following:  disc, circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman, none. For nested lists, you use selectors like UL UL, for instance. Using list-style image: URL, you can also use graphics as bullets for lists. The command list-style-position: inside|outside lets you choose whether the bullets are outside the text of inside.

Positioning

The property position that can take the values static|relative|absolute|fixed|inherit, decides where a box (block-level element) is placed. 

using position: absolute; and the properties left and top.

You can always determine minimum or maximum width and height using min-width, min-height, max-width, max-height.

If the box created is too small to hold all of its content, you decide with overflow how to proceed then. Possible values are visible|hidden|scroll|auto|inherit.

If elements overlap, you can decide with z-index: (integer) the ordering of the different elements, higher or lower. Higher numbers lie higher.


Erich Prisner, 2006