Exercise 8 Demo: Part B : CSS
CSS Cascading Style Sheets : Internal or Document Level Styles
Reviewing the Styles Concept
With Document on Internal Level Styles, you define the style only once between the <style> </style> tags inside the head tags of the document. The style can then be applied anywhere within that document. Write once, use many times. The power of styles! We have been playing with Document Styles beginning in Exercise 2.
Lets review our example from Part A:
Example: Make a line of text larger than the default body text, it should be Arial, and it should be purple.
This is some text which should be 12px, arial, bold, and purple.
Document Level Styles : The Code
Here is the code you can use to experiment with a few possibilities using document level styles. Refer to the lecture for more specific explanations. This is the code used in the style tags in the head of this document.
<html>
<head>
<title>Doc Level Styles</title>
<style type="text/css" media="screen">
p {font-size: 12px;
font-family: arial, helvetica;
font-weight: bold;
color: purple}
h1 {font-family: Comic Sans MS, helvetica, arial;
color:blue}
code {font-size: 11px;
font-family: helvetica, arial, sans-serif;
letter-spacing: 2;
color: red;}
a {text-decoration: none}
a:hover {text-decoration: underline; color: red}
</style>
</head>
Document Level Styles : The Results
This is what you get when you use the tags which are bound to the styles.
The first thing we identified as a style was the <p> tag to make a line of text larger, purple and arial. Lets use it here:
<p>Now everytime I use the <p> tag I'm going to get this purple text.</p>
<h1>When I use the <h1> tag it makes big blue text.</h1>
So what if you don't want all your paragraph text to be big and purple? You can use inline styles instead.
On to Part 3!
Ready for Inline Styles? Go to Part C of Demo 8.
Review External Style Sheets go to Part A of Demo 8.
See a demo of DIVs and CSS Navigation
Go to the Exercise 8 page.
© Claudia Faulk. Created in 2008. Updated 1.10