Emerging Technology Fall Semester, 2004 CSS part 2
	Previous     Lecture Notes Index     Next      © 2004, All Rights Reserved, SDSU & Roger Whitney San Diego State University -- This page last updated 06-Sep-04

CS 683 Emerging Technologies Fall Semester, 2004 Doc 3 CSS

Contents

References

Some Properties & Values

Colors

Lengths

Border

Margins

Backgrounds

Fonts

Text

Copyright ©, All rights reserved. 2004 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent ( http://www.opencontent.org/opl.shtml) license defines the copyright on this document.

References

Cascading Style Sheets, level 2 revision 1 CSS 2.1 Specification

http://www.w3.org/TR/CSS21/

Some Properties & Values

Colors

Named Colors

RGB values

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }      
em { color: rgb(100%, 0%, 0%) } 

For color details see:

http://www.w3.org/TR/CSS21/syndata.html#value-def-color

Lengths

Relative Units

• em: the 'font-size' of the relevant font
• ex: the 'x-height' of the relevant font
• px: pixels, relative to the viewing device

h1 { margin: 0.5em }      /* em */
h1 { margin: 1ex }        /* ex */
p  { font-size: 12px }    /* px */

Absolute Units

• in: inches — 1 inch is equal to 2.54 centimeters.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS 2.1 are equal to 1/72th of an inch.
• pc: picas — 1 pica is equal to 12 points.

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */

For more detail see:

http://www.w3.org/TR/CSS21/syndata.html#length-units

Percentages

p { font-size: 10px }
p { line-height: 120% }  /* 120% of 'font-size' */

Border

A Border has

• Color
• Width
• Style

Details at:

http://www.w3.org/TR/CSS21/box.html#border-properties

Width

Values

• thin
• medium
• thick
• <length>

p
{
   border-color: black;
   border-top-width: 1pt;
   border-right-width: 2pt;
   border-bottom-width: thin;
   border-left-width: thick;
   border-style: solid;
}

p
{
   border-color: black;
   border-style: solid;
   border-width: 1pt 2pt thin thick;
}

p
{
   border-color: black;
   border-width: 1pt;
   border-style: solid;
}

Border Style

Values

• none

No border; the border width is zero.

• hidden

Same as 'none', except in terms of of border conflict resolution for table elements.

• dotted

The border is a series of dots.

• dashed

The border is a series of short line segments.

• solid

The border is a single line segment.

• double

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

• groove

The border looks as though it were carved into the canvas.

• ridge

The opposite of 'groove': the border looks as though it were coming out of the canvas.

• inset

The border makes the box look as though it were embedded in the canvas.

• outset

The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.

Border Style Examples

p
{
   border-color: black;
   border-top-style: solid;
   border-right-style: dotted;
   border-bottom-style: double;
   border-left-style: groove;
   border-width: 1pt;
}

p
{
   border-color: black;
   border-width: 1pt;
   border-style: solid dotted double groove;
}

p
{
   border-color: black;
   border-width: 1pt;
   border-style: solid;
}

Margins

p { margin: 1.5pt 1em 2.3mm 2in; }

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */

body { margin: 1em 2em 3em } /
* top=1em, right=2em, bottom=3em, left=2em */
body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */

For details see:

http://www.w3.org/TR/CSS21/box.html#margin-properties

Backgrounds

Properties

p
{
   margin: 1.5pt 1em 2.3mm 2in;
   background-color: lime;
}

For details see:

http://www.w3.org/TR/CSS21/colors.html#q2

Fonts

Properties

Font-family

Value: <family-name> | <generic-family> | inherit

<generic-family>

• serif
• sans-serif
• cursive
• fantasy
• monospace

body { font-family: Gill, Helvetica, sans-serif }

Font-variant

Values: normal | small-caps | inherit

h3 { font-variant: small-caps }
em { font-style: oblique }

Font-style

Values: normal | italic | oblique | inherit

Font-weight

Values

400 = normal

700 = bold

p { font-weight: normal }   /* 400 */
h1 { font-weight: 700 }     /* bold */

strong { font-weight: bolder }
p { font-weight: lighter }

font-size

Value: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

<relative-size> larger | smaller

p { font-size: 16px; }
@media print {
        p { font-size: 12pt; }
}
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

Text

Affect visual presentation of characters, spaces, words, and paragraphs

For details see:

http://www.w3.org/TR/CSS21/text.html

text-indent

Values: <length> | <percentage> | inherit

p { text-indent: 3em }
p.left { text-indent: -1in }

text-align

Values: left | right | center | justify | inherit

div.important { text-align: center }

text-decoration

Values: none | [ underline || overline || line-through || blink ] | inherit

a:visited,a:link { text-decoration: underline }

text-transform

Values:

• capitalize

Puts the first character of each word in uppercase; other characters are unaffected.

• uppercase

Puts all characters of each word in uppercase.

• lowercase

Puts all characters of each word in lowercase.

• none

No capitalization effects.

Previous     visitors since 06-Sep-04     Next