Manuscript for HTML Tutorial #11

Listed below is the manuscript of all textual instructions used in HTML Tutorial #11 - Controlling Presentation with Internal Style Sheets. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #11 - Controlling Presentation with Internal Style Sheets

Lesson #11: Internal Style Sheets. Click the play button to begin the tutorial.
In our last lesson, we saw how to add style inline with certain tags. Now we're going to see how to include an Internal Style Sheet in our document.
We're going to place our internal style sheet inside our document's head section.
We'll start with the opening <style> tag.
Don't confuse the style element used in this tag with the style attribute from the last lesson.
This time we are actually creating a style tag, instead of just affecting another tag's properties with an attribute.
Although we will be adding an attribute to this tag: the type attribute.
For the value we will use text/css.
CSS stands for Cascading Style Sheets.
Basically, we're just specifying the particular style sheet language that we'll be using.
OK, a little further down we'll type in the closing </style> tag.
We will use this area between the style tags, to enter our style rules.
A style rule takes on this basic format.
Let's use the p (paragraph) element as our selector.
What we're saying here is that we want to affect the style of every <p> tag in our document.
For the property we will use color...
...and this time let's set its value to blue.
The property and value must be separated by a colon...
...and the entire declaration enclosed in curly braces.
OK, let's check it out in a browser.
Well, look at that, some of our text is blue, and some is still red.
Also, the copyright notice is still the default color of black.
Here's what happened, this paragraph is still being affected by the style attribute from our last lesson.
Inline style overrides internal style sheets. So if we want this paragraph to be blue we'll have to remove the inline style.
We'll just leave the inline style of red for this italic text.
Now, our copyright notice is not inside of a paragraph, so it remains unaffected by the style rule for paragraphs.
To apply this rule to our copyright notice also, we could change our selector to an element that contains all of our text.
Since all of our text is inside of the document's body, it is now all blue, except for the red text still being affected by inline style.
There are a couple more things we should add to our internal style sheet.
These are known as comments. We put them in just in case someone views our page with a really old web browser.
Ancient web browsers do not understand style rules, and may actually put the text from our style sheet on the web page.
Using comments in our style sheet will prevent that from happening.
Internal style sheets are good for affecting the properties of multiple items. Next, in Lesson #12, we will see how to affect multiple items on more than one web page, using external style sheets.

<<<Tutorial #10

Tutorial #12>>>