Warning: Declaration of WPVCAdminConfigAction::render() should be compatible with WPVCWPPlugin::render($ug_name, $ug_vars = Array, $action = NULL) in /nfs/c02/h06/mnt/27819/domains/ianwhitmore.com/html/teaching/psu/wp-content/plugins/wp-vcard/classes/action/WPVCAdminConfigAction.php on line 170
CSS | Interactive Media – Whitmore


CSS  (Cascading Style Sheets)

CSS assists in the separation of STYLE and STRUCTURE. Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document. (Wikipedia)

CSS can be applied three ways:
INLINE: Coded into HTML elements.

EMBEDDED: Coded into the <head> element.

EXTERNAL: Coded in an external document that is linked to by each HTML page.

This link is placed within the <head> element:
<link href=”styles.css” rel=”stylesheet” type=”text/css” media=”all” />

CSS Sytax : The Selector and the Declaration Box

Selectors (HTML,Group, Classes & ID)

Grouping Selectors
h1,h2,h3,h4,h5,h6 { font-size: 20px; }


Classes & IDs
We use ‘class’ to style any number of elements we want. CLASS = used for more than one element.

.blueTest { color: blue; }

We us ‘id’ to style an individual element per page. ID = a unique individual element such as a header or footer.

#header { height: 182px; }


Using Colornames or Hex number values.
http://www.w3schools.com/tags/ref_colornames.aspWith CSS we can use Color Names such as: BlanchedAlmond, SlateGray, Sienna, OrangeRed

However, it there are more options available using Alpha-numeric combinations known as Hexadecimal Colors (A-F combined with 0-9):

#FFFFFF = white
#000000 = black
#A52A2A = brown

HEX Shorthands: For hexcolors with three matching pairs of letters or numbers you can write a single character for that pair:

#AA9977= #A97

Some of the CSS properties that we covered in class:

color: #00000;
font-size: 24px;

font-family: Arial,Helvetica,sans-serif;

font-weight: bold;

letter-spacing: 0.5em;
background-color: #FF0000;
background-image: url(‘images/header_image.jpg’);

background-repeat: no-repeat; (other values: repeat-x, repeat-y)

width: 500px;
height: 100px;

Margins & Padding (Short Hand and Long Hand)
Remember: All of these examples work the same for ‘margin’ and ‘padding’

margin: 50px;
margin: 20px 10px;

margin: 20px 10px 15px 32px;
margin-top: 20px;
margin-right: 10px;