<Home> | <HTML Tutorials> | <CSS Tutorials> | <Color Charts> | <Practice Area>

Basic Exercises
· Introduction
· ex. 1 - Inline CSS
· ex. 2 - Embedded
· ex. 3 - External



Join our mailing list to receive tips and tricks.
Name:

E-Mail:


  
CSS TUTORIALS: Ex. 2 - Embedded Styles

EXERCISE 2: CREATING EMBEDDED STYLES :

Embedded styles require us to place our styles inside of style tags. The style tags go between the opening and closing head tags, and we reference them in the body of our page.

I will demonstrate how to use html tag styles, class styles, and show how to use the DIV and SPAN tags.

<!---Type or copy the following code below---> (To copy the highlighted coding below, just highlight it with your mouse, go up to the top of your browser and click on Edit, then click on copy. Finally, highlight the text inside of the textarea box below and choose, edit, then paste.)
I suggest you type the tags out instead of copying them. Trust me; you will learn more if you do!

<html>
<head>
<title> Bucktowndusty's Inline CSS Tutorial Page </title>
<style type="text/css">
h1,h2,h3 {font-style:italic}
.bluetext {color:#0000ff}
.red {background-color:#ff0000}
.green {background-color:#00ff00} </style> </head>
<body>
<h1>Headline</h1>
<h1 class="bluetext">Headline with Class Style</h1>

<div class="red">The div tags allows us to effect an entire vertical area of the screen. You can see here where the div area is located by its color. Advanced techniques can be used with the div tag, yet, I just wanted you to see how it works. You may not use it that often though.The span tag allows us to <span class="green">change several words</span> inline. Ain't they grand!</div>
</body>
</html>




( After you submit, close the window that will pop up, and read below )
NOTE: CONGRATULATIONS! YOU NOW KNOW HOW TO DO EMBEDDED STYLES!

Notice how I created a style using "h1,h2,h3"? That's just to let you know that you can specify several html tags (seperated by commas) to take on the style that you want. It just saves you from having to repeat the same style multiple times if you want to apply it to more than one HTML tag.

If you're not ready to go out and become a CSS master by now, I'm afraid CSS will never do it for you. I have my suspicions that you will want to be a master however, so go on to exercise 3.



In the next exercise you will tackle the last method of styles, linking to External Style Sheets.

END OF EX. 2 - CREATING EMBEDDED STYLES

<-- Back to Exercise 1: Creating Inline Styles Fundamentals  |  Go to Exercise 3: External CSS -->



Home | HTML Tutorials | CSS Tutorials | Color Charts | Practice Area
Copyright 2003 FromThePen.com All Rights Reserved