Inline, Embedded and Linked


Inline

In Inline style we set the style right in the block

<p style = "font-size : 12pt">

<div style = "line-height : 14pt">

<span style = "letter-spacing : 4pt">

We changed the
Style for these tags

Embedded

When we use Embedded Style we can put the style right in the Head.


<head>
<style>
p { font-size : 12pt; color : blue;}

td {font : size : 24pt}

h1 {font-weight : bold; font-size : 20; font-family : 'Monotype Corsiva'; color : red} </style>
</head>

These commands will set the size of
the font to 12pt and blue if it is in
paragraph tags anywhere in the page.
It will also have 24pt in any
td (inside the table)



Linked (External Style Sheets)

To use the external style sheets we create a file. We don't use HTML or Body tags. We just enter it like we do with the embedded (or internal) style sheet. We don't use the word style. Using Webs.com, you are going to need to create an HTML file (it won't let you create a CSS file) and then paste the code below. Then save it and rename it is as pete.css (but use your name). You can then link to your css external file with each new HTML file you create. You may have to fully reference it (http:// -> ) if it is not in the folder where your HTML file is.

Copy and Paste Below
p { font-size : 12pt; color : blue;}

h1 {font-weight : bold; font-size : 20; font-family : 'Monotype Corsiva'; color : red} 

.headline	{font-size : 36pt;
                 font-family : 'monotype corsiva';
                 font-weight : bold;	
		color: #003300;
		padding: 5pt 5pt;
		left: 5pt;
		}



.special 
{ 
font-family: Comic Sans MS; font-size: 24pt; color: #FFD5AA;
}


.special2  { 
font-family: Tahoma, sans-serif; 
color: #800000; 
font-size: 18pt; 
font-style: bold; 
letter-spacing: 8px; 
margin-top: 7px;
} 


.special3  { 
font-family: Tahoma, sans-serif; color: #800000; font-size: 14pt; 
font-style: normal; letter-spacing: 3px; font-weight: normal; 
} 

.comic { 
font-family: Comic Sans MS, sans-serif; color: #FFFFFF; font-size: 14pt; 
} 



.special5 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
border-top: solid #e7ce00 medium;
border-bottom: dotted #e7ce00 thin;
width: 600px;
}



a{
		font-family: sans-serif;
		font-size: 10pt ;
		font-weight: bold;
		color: green;      
}


a:hover
{font-size : 12pt;
color : red;}    

a:visted{font-size : 12pt;
color : red;} 

  
a:active{font-size : 12pt;
color : green;}   




Copy and Paste Above


After you have created this file, you must save it with a css extension. For example, save it as petestyle.css - use your name - not pete

Then in the program where you want to use that style sheet, in the head you link to the style sheet.

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

You would then have that style on your page, just like you had embedded it.

If you look at the .headline section that you created up above. That is a class style that you have created. To use it
<p class ="headline"> This is a test </p>


You can use this class with any tag. You can change the size, the font color or the font. Just experiment with the style sheet. Once you get a nice style that you like you can add it to your external style sheet and then just use it by having the span, paragraph, div or table take on that style.