CSS stands for Cascading Style Sheets

  1. They allow content to be separated from presentation layout and style.

    Example

  2. "Cascading" means priority as follows:

    1. Browser default

    2. External Style Sheet

    3. Internal Style Sheet (inside the <head> tag)

    4. Inline Style (inside HTML element)

  3. The syntax is: 
    selector {property: value}

    p {font-family: arial,helvetica,sans-serif}

  4. More than one property is separated by a semicolon: 
    p {font-family: arial,helvetica,sans-serif; font-size:x-small}

  5. By using the "class" element you can define different styles for the same element: 
    .p1 {font-family: verdana,geneva,sans-serif; font-size:small}
.p2 {font-family: verdana,geneva,sans-serif; font-size:small; color: #006400}

EXAMPLES

INLINE

CODE

<p style="font-family: verdana; font-size: large; color: #cd853f">This uses the verdana font in large size
 with font color = "Peru."</p>

RESULT

This uses the verdana font in large size with font color = "Peru."

CODE

<b style="background: #ffff00">This bold text is highlighted in yellow.</b>

RESULT

This bold text is highlighted in yellow.


INTERNAL

CSS from this page: This code does away with the default underlining of links and allows three different link hover effects. It also defines the size of two headings.

CODE


	a {text-decoration:none}
	a.one:link {color:#3cb371}
	a.one:visited {color:#3cb371}
	a.one:hover {text-decoration:underline}
	a.two:link {color:#3cb371}
	a.two:visited {color: #3cb371}
	a.two:hover {color: #00008b}
	a.three:link {color:#3cb371}
	a.three:visited {color: #3cb371}
	a.three:hover {background:#e6e6fa}
	
	.heading {font-family:arial,helvetica,sans-serif; font-size:14 pt}
	.heading2 {font-family:arial,helvetica,sans-serif; font-size:11 pt; text-decoration:underline}

RESULT

Link with underline hover effect

Link with color hover effect

Link with background hover effect

EXTERNAL

CSS from Web Business Strategy: This code does away with underlining of links and sets the link color and hover effect color. It also defines a color scheme for the browser's navigation bars.


	a {color:#666666; text-decoration:none}
	a:hover {color: #3cb371;}
	body {
 	scrollbar-track-color: #8fbc8f;
 	scrollbar-face-color: #00008b;
 	scrollbar-highlight-color: #666666;
 	scrollbar-3dlight-color: #999999;
 	scrollbar-darkshadow-color: #000000;
 	scrollbar-shadow-color: #000000;
 	scrollbar-arrow-color: #ffffff;}

CSS from Fourth Business Page

		
    body {background-color: #ffffff; color: #000000; margin-left: 0px; margin-top:10px}
	
	a {color:#9932cc;text-decoration:none}
	a:visited {color:#9932cc}
	a:hover {color:#90ee90}
	
	p {font-family:arial,helvetica,sans-serif; font-size:x-small}
	
	.name {font-family:arial,helvetica,sans-serif; font-size:large; color:#00008b}
	.slogan {font-family:arial,helvetica,sans-serif; font-size:x-small; font-style:italic; color:#808080}
	.copyright {font-family:tahoma,arial,helvetica,sans-serif; font-size:xx-small; color:#666666}

CSS LAYOUT

FONT SIZES

Font Sizes