1 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs 2003-04

1 WDMD 170 – UW Stevens Point

WDMD 170 Internet Languages

eLesson:

CSS Introduction to Style Sheets(NON-audio version)

© Dr. David C. Gibbs

2003-04


Objectives

• Recognize the purpose for using style sheets.

• Identify the three methods for using styles in an HTML document.

• Create inline, embedded, and external styles.

• Understand the “cascade” in CSS.


WHY use Style Sheets?• Allow web authors to separate structure from content

– Structure – provided by descriptive “rules” dictated by the styles • Layout• Design

– Content – provided by the HTML document

• Increases consistency between various pages of a website

• Allows you to reduce typing– Using one style sheet for multiple pages– Specifying information once rather than for each instance of an

object

• Increases the versatility of web pages


Three methods of supplying styles

Inline: adding style where it is needed.

Embedded: in a <style>…</style> block in the <head> section.

External: in a separate file.


CSS Terminology• Selector: The element you have decided to

modify• Property: Names a characteristic of a selector• Value: Describes how you want to modify a

particular property• Declaration: a combination of a property and a

value• Syntax

h1 {color: blue;}

selector property value

declaration


Methods of using CSS in your pages

inline style <h1 style="font-size: 36pt; color: blue;">

Heading 1 using an inline style</h1>

embedded style<head>

<style type="text/css"><h1 font-size: 12pt; color: red;></style></head>

external style sheet<head>

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


CSS: Inline method

Styles are added within an HTML tag<html>

<head>

</head>

<body>

<p>here is some regular text without style</p>

<p style="font-size: 20pt">regular text in 20 pt</i>

<h1 style="font-size: 30pt; color: #0000FF; font-family: verdana">

h1 text in 30 pt Verdana – inline style.</h1>

</body>

</html>

Code sample: inlineCSS.htm inlineCSS.txt


CSS: Inline method

First, a paragraph is defined without style (line 5).A paragraph is defined in which the font-size is specified in “points”

(line 6).Text within the h1 header is defined with an altered font-size, a color,

and a different typeface (line 7).The color name works as well. <h1 style="color: blue">

1. <html>

2. <head>

3. </head>

4. <body>

5. <p>here is some regular text without style</p>

6. <p style="font-size: 20pt">regular text in 20 pt</p>

7. <h1 style="font-size: 30pt; color: #0000FF; font-family: verdana"> h1 text in 30 pt Verdana – inline style.</h1>

8. </body>

9. </html>


CSS: Inline method

Styles apply only within the delimiting tags.

Quotes are used because it’s HTML: attrib=“value” style=“<element specifiers>”.

Multiple styles concatenated using a semicolon “;”.

<p style="font-size: 20pt">regular text in 20 pt</p>

<h1 style="font-size: 30pt; color: #0000FF; font-family: verdana">

h1 text in 30 pt Verdana – inline style.</h1>


eTask 1: Inline styles

1. Create an HTML document using inline styles.

2. Use the <h1> tag, the <p> tag, and any other appropriate tags to illustrate inline styles.

3. Write the document so it explains and demonstrates how inline styles work.

4. Save your document as InlineStyles.htm in your CSS_I folder (that’s “css roman numeral one” folder).


Styles are added within the <style>…</style> tag in the <head> section of the HTML document

<html>

<head>

<style type="text/css">

h1 {color: green}

em {background-color: red; color: white}

p {font-size: 18pt}

.blue {color: #0000FF}

</style> <title>Embedded Styles</title>

</head>

<!– CONTINUED ON NEXT SLIDE -->

CSS: Embedded method

Code sample: embeddedCSS.htm embeddedCSS.txt


CSS: Embedded method• Styles have been added within the <style>…</style> tag

<!– CONTINUED FROM PREVIOUS SLIDE -->

<body>

<h1>Heading (using h1 and its default size)</h1>

<h1 class="blue">Heading (using h1 with blue "class")</h1>

<p>paragraph text (within the paragraph tag - 18 pt)</p>

<p class="blue">more paragraph text but making use of the blue class</p>

<em>more Text in italics, making use of em</em> more Text <em>italic text again</em></body>

</html>

Code sample: embeddedCSS.htm embeddedCSS.txt


eTask 2: Embedded styles

1. Create an HTML document using embedded styles.

2. Use (minimally) the <h1> tag, the <p> tag, and any other appropriate tags to illustrate embedded styles.

3. Write the document so it explains and demonstrates how embedded styles work.

4. Save your document as EmbeddedStyles.htm in your CSS_I folder.


CSS: External methodStyles are written in a file saved with a .css extension

FILENAME: external.CSS

h1 {font-family: Arial}

a {text-decoration:none}

a:hover{text-decoration:underline; color:red; background-color: #CCFFCC}

li em {color:red; font-weight: bold}

ul {margin-left: 2cm}

ul ul {text-decoration: line-through; margin-left: .5cm}

NOTE: This file must be somehow “included” by the document!


CSS: External method1. <html>2. <head>3. <link rel="stylesheet" type="text/css" href="external.css">4. <title>External Styles</title>5. </head>6. <body>7. <h1>Shopping list for <em>Monday</em></h1>8. <ul>9. <li>Milk</li>10. <li>Bread 11. <ul>12. <li>Pita bread</li>13. <li>Black bread</li>14. <li>French baguettes</li>15. </ul>16. </li>17. <li>Rice</li>18. <li>Potatoes</li>19. <li>Pizza <em>with pepperoni</em></li>20. </ul>21. <a href="http://www.groceryonline">Order here</a>22. </body>23. </html>

Code sample: externalCSS.htm externalCSS.txt


CSS: External method

Code sample: externalCSS.htm externalCSS.txt

Lots of questions emerge from this style sheet! See how many you can track down!

1. Why is the header in Arial font?

2. Why are some list items displayed as “strikeout” while others are not?

3. How did “with pepperoni” get red while “Monday” did not?

4. “Order here” is actually a link (view the page and try it).

a. Where did the underline go?

b. “Hover” over the text and watch what happens!


eTask 3: External styles

1. Create an HTML document that makes use of external styles.

2. Use the <h1> tag, the <p> tag, and any other appropriate tags to illustrate external styles.

3. Write the document so it explains and demonstrates how external styles work.

4. Save your document as ExternalStyles.htm in your CSS_I folder.


The “Cascade”

• A set of rules which determines the order in which multiple style sheets are applied to an HTML document.

• In other words, which style prevails if inline, embedded, and external styles all exist for a specific selector?


Cascading OrderWhich style will be used when there is more than one style

specified for an HTML selector?

The simplest answer is given by “proximity”; the style closer to the selector is used.

From these options,• browser default • external style sheet • internal style sheet (inside the <head> tag) • inline style (inside HTML element)

… an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).


Cascading Order• You can demonstrate the cascade by using all

three methods in the same document, impacting the same selector.

• In fact, examine the use of <h1> in the three examples given in this eLesson. [Print or view each of inlineCSS.htm, embeddedCSS.htm, and externalCSS.htm so you can see each of their uses.]

• If you use all three in the same document, you can see how the priorities are established.


Assignment: Cascading styles

1. Create an HTML document making use of all three methods: inline, embedded, and external styles.

2. The <h1> tag is a good choice to demonstrate the “cascade”, and you may copy in the styles from this eLesson.

3. The content of the document should describe how the “cascade” works.

4. Save your document as cascadeExample.htm in your CSS_I folder.


Assignment: Implement an external style sheet in your e-Folio.

1. Add a very simple external style sheet to the index file of your e-Folio.

2. For example, a. Create myStyleSht.CSS, containing the line

body {font-family: verdana}

b. Add these lines to the <head> of your index.htm file:<link rel="stylesheet" type="text/css" href="myStyleSht.css">

c. Make sure the css file is in the same directory as your index.htm file.

3. This should display your document in a new font!


Summary

• Styles may be applied– Inline– Embedded– External

• The “cascade” of styles can be determined by proximity to the selector.


End of eLesson

• Jump to the Beginning of this eLesson

• WDMD 170 Course Schedule

• D2L Courseware Site

Documents

1 WDMD 170 – UW Stevens Point WDMD 170 Internet Languages eLesson: CSS Introduction to Style Sheets (NON-audio version) © Dr. David C. Gibbs 2003-04