Embedded Style Sheets - Web 1.0

What am I going to learn to do?

On this page,you will learn how to modify page elements and text with Embedded CSS or Cascading Style Sheets.

What software/tools will I use?

Notepad

Web Browser

What are the ideas I will work with?

You can control all of the attributes of a page from one central location in the HEAD.

If you don't modify the tags, they will behave normally

There are lots of modifications that you can do to these tags.

How do I do it?

Embedded style sheet example - http://www.eskimo.com/~bloo/indexdot/css/examples/cssembedded.htm

Introduction to CSS -

http://www.w3schools.com/css/css_intro.asp

How to write CSS code - http://www.w3schools.com/css/css_syntax.asp

Make a page called Embedded.html.

Set the page up with normal HTML structure and whitespace.

Put this code into the HEAD element of your page.

Add to the styles and customize them to be more to your own liking.

<style type="text/css" media="all">

<!--

p { font: Times serif; color: green; first-line:20px}

h1 { font: Times serif; color: red; }

-->

</style>

Write so that you have something to control

Write two paragraphs about the best movies you have ever seen.  Write a descriptive headline for each paragraph. Each paragraph should be at least five sentences long.  Use <P> and </P> tags for the paragraphs. Use H tags for the headings of the paragraphs. Place each paragraph and headline into its own DIV.

Modify the Divs,  P tags and the H tags with embedded CSS 

Make a List of all the best movies you have ever seen. You will control the appearance of your list with the embedded style sheet.

Checklist

• HTML page structure
• Title with page name and your name (first name and last initial only )
• Heading with page name and your name (first name and last initial only
• Proper use of WhiteSpace in your HTML code
• Two paragraphs about the best movies you have ever seen.
• A heading for each paragraph.
• A list of all the best movies you have seen
• Paragraphs, DIVs, lists and headings are controlled by an embedded style sheet

Links -

Look on the left side of this page for more techniques - http://www.w3schools.com/css/css_background.asp

This page has some good ideas - http://www.tizag.com/cssT/internal.php

This has a good overview - http://webdesign.about.com/od/beginningcss/a/aa021807.htm