CPT 106 · Franklin College · Erich Prisner · 2002-2006

HTML

Programming Languages

Javascript

PHP

Javascript/PHP Syntax

Javascript Project

SQL

CSS Practice

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

Advantages of CSS

• Separating content and formatting,
• Makes files smaller, avoid repetitions,
• Unique look for all web pages,
• You can format things that you cannot with HTML

How to insert CSS into HTML documents

• 1) type it directly into the HTML pages
  • stylesheet between head and body
  • set the attribute style="" in tags
• external CSS file , reference in head like <link href="yourname.css" rel="stylesheet" type="text/css">

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

• absolute: in, mm, cm, pt, pc (12pt=1pc, 6pc=1in)
• relative: em (size of font used), ex (height of a small x in the font used), px (pixel), or you use percentages.

Text

Just for block elements:

• text-indent (length|percentages) 
• text-align (left|center|right|justify)

the following are useable for all elements:

• line-height (length|percentages|number) 
• word-spacing (length)
• letter-spacing (length)
• text-transform (uppercase|lowercase|capitalize)
• font-variant: small-caps

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

• aqua, gray, green, red, blue, ....
• RGB, like rgb(0,255,255) (aqua), reg(0,0,255) (blue), ...
• hexadecimal:

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. 

• static: the ordinary default value.
• relative: You change the position from the ordinary by giving values for left, right, top, bottom.
• absolute: the box lies above the other content, at an absolute position. This position is declared using left, right, top, bottom in combination with width and maybe height. Of course you can get overlapping parts in this way.
• fixed: like absolute, but then it doesn't change the position when scrolling.
• inherit: In this case, the position is inherited.

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