me Banner
TECH
HARDWARE CISCO LINUX MICROSOFT C++ HTML JAVASCRIPT PERL SHELL SCRIPTING SQL NOTES

Embedding a Style Sheet


A style sheet may be embedded in the HEAD of document with the STYLE element:

<style type="text/css">
<!--
A:link { text-decoration: none; color: #0066FF; }
A:active { text-decoration: none; color: #000000; }
A:visited { text-decoration: none; color: #0033FF; }
A:hover { text-decoration: none; color: #FF3333; }
body { background: url(foo.gif) red; color: black }
-->
</style>

...Or, inline as in the example below:

<H1 style="color: blue; font-style:italic">This is blue<H1>

Linking to an External Style Sheet


An external style sheet may be linked to an HTML document through HTML's LINK element:

<link rel="stylesheet" href="stylesheet.css" type="text/css">

Or style sheet may be imported with CSS's @import statement inside the STYLE element:

<style type="text/css">
<!--
@import url(/stylesheet.css);
-->

The STYLE element also supports an optional MEDIA attribute which specifies the medium or media that the style sheet should be applied to. For example, to use a different stylesheet for printing use:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

The MEDIA element supports the following values (may be comma separated):

  • screen - for presentation on non-paged computers
  • print - for output to a printer
  • projection - for projected presentations
  • aural - for speech synthesizers
  • braille - for presentation on braille tactile feedback devices
  • tty - for character cell displays (using a fixed-pitch font)
  • tv - for televisions
  • all - for all output devices

Style Classes


<style type="text/css">
<!--
p.abstract { font-style: italic; left-margin: 0.5cm; }
h1, p.centered { text-align: center; margin: 0 0.5cm 0 0.5cm; }
p:first-line { font-style: small-caps }
p:first-letter { font-size: 200%; float: left }
.italic { font-style: italic }
#yellow { color: yellow }
h1#blue { color: blue }
-->
</style>

<p class="abstract">This is an abstract paragraph with indented margins</p>
<h1><p class="centered">This paragraph's text is centered</p></h1>
<p class="italic">This paragraph's in italic.</p>
<p ID="yellow">This paragraph's text is yellow</p>
<h1 ID="blue">This headinging's text is blue</p>


Note the nested style used with p.centered

CSS Properties table


Text Properties

PropertyWhat it DoesPossible Values
letter-spacingControls the amount of space between each letter in a section of text.normal (default)
number of pixels
line-heightControls the amount of vertical space between lines of textnormal (default)number of pixelspercentage
text-alignControls the alignment for a section of textbrowser decides (default)
left
right
center
text-decorationControls what the text looks likenone (default)
underline
overline
line-through
blink
text-indentControls the indentation of the first line in a section of text0 (default)
number of pixels
percentage
text-transformChanges the case of a section of textnone (default)
uppercase
lowercase
capitalize
vertical-alignControls the vertical alignment of a section of textbaseline (default)
sub
super
top
text-top
middle
bottom
text-bottom
word-spacingControls the amount of space between words (doesn't work as of yet)normal (default)
number of pixels

Font Properties

PropertyWhat it DoesPossible Values
font-styleControls the style of the fontnormal (default)
italic
oblique
font-variantControls the variant of the fontnormal (default)
small-caps
font-weightControls the boldness of the fontnormal (default)
lighter
bold
bolder
100
200
300
400
500
600
700
800
900
font-sizeControls the size of the fontsmall, x-small, xx-small
medium (default)
large, x-large, xx-large
smaller
larger
number of pixels
percentage
font-familyControls the type of font shown on the pagebrowser decides (default)
font family name

font: font-style font-variant font-weight font-size/line-height font-family;

Color/Background Properties

PropertyWhat it DoesPossible Values
colorControls the color of the textbrowser decides (default)
color name
background-colorControls the color of the backgroundtransparent (default)
color name
background-imageAllows you to set a background imagenone (default)
image url
background-repeatAllows different patterns of background repetitionrepeat (default)
repeat-x
repeat-y
no-repeat
background-attachmentControls the scrolling of the backgroundscroll (default)
fixed
background-positionControls the position of the background on the page0% 0% (default)
postion in pixels ie {20,20}
percentage ie {5%,7%}
top
bottom
left
right
center

Background properties in shorthand order. See also W3schools: CSS Background

Box Properties

PropertyWhat it DoesPossible Values
widthControls the width of a sectionauto (default)
number of pixels
percentage
heightControls the height of a sectionauto (default)
number of pixels
percentage
border-colorControls the border color of a sectiondefault text color (default)
color name
border-styleControls the style of a bordernone (default)
solid
double
groove
ridge
inset
outset
dotted
dashed
border-widthControls the width of a borderundefined (default)
number of pixels
thin
medium
thick
border-top-widthControls the width of a border sidemedium (default)
number of pixels
thin
thick
border-right-widthControls the width of a border sidemedium (default)
number of pixels
thin
thick
border-bottom-widthControls the width of a border sidemedium (default)
number of pixels
thin
thick
border-left-widthControls the width of a border sidemedium (default)
number of pixels
thin
thick
margin-topControls the width of a margin from the specified side0 (default)
number of pixels
percentage
margin-rightControls the width of a margin from the specified side0 (default)
number of pixels
percentage
margin-bottomControls the width of a margin from the specified side0 (default)
number of pixels
percentage
margin-leftControls the width of a margin from the specified side0 (default)
number of pixels
percentage
padding-topControls the amount of padding from the specified side0 (default)
number of pixels
percentage
padding-rightControls the amount of padding from the specified side0 (default)
number of pixels
percentage
padding-bottomControls the amount of padding from the specified side0 (default)
number of pixels
percentage
padding-leftControls the amount of padding from the specified side0 (default)
number of pixels
percentage
floatControls the floating of a sectionnone (default)
left
right
clearDefines whether a section disallows other sections on its sidesnone (default)
left
right

Classification Properties

PropertyWhat it DoesPossible Values
white-spaceControls the white space formatting of a sectionnormal (default)
pre
nowrap
displayControls the display of a sectionblock (default)
inline
list-item
none
visiblityControls the visibility of an elementinherit (default)
visible
hidden
z-indexControls the layering of an elementauto (default)
number


Helpfull Links


CSS Projects from School
http://www.htmlhelp.com/reference/css/style-html.html
http://www.pageresource.com/dhtml/cssprops.htm