Upload
merryl-walton
View
214
Download
0
Embed Size (px)
Citation preview
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
2 WDMD 170 – UW Stevens Point
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.
3 WDMD 170 – UW Stevens Point
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
4 WDMD 170 – UW Stevens Point
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.
5 WDMD 170 – UW Stevens Point
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
6 WDMD 170 – UW Stevens Point
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>
7 WDMD 170 – UW Stevens Point
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
8 WDMD 170 – UW Stevens Point
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>
9 WDMD 170 – UW Stevens Point
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>
10 WDMD 170 – UW Stevens Point
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).
11 WDMD 170 – UW Stevens Point
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
12 WDMD 170 – UW Stevens Point
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
13 WDMD 170 – UW Stevens Point
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.
14 WDMD 170 – UW Stevens Point
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!
15 WDMD 170 – UW Stevens Point
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
16 WDMD 170 – UW Stevens Point
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!
17 WDMD 170 – UW Stevens Point
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.
18 WDMD 170 – UW Stevens Point
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?
19 WDMD 170 – UW Stevens Point
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).
20 WDMD 170 – UW Stevens Point
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.
21 WDMD 170 – UW Stevens Point
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.
22 WDMD 170 – UW Stevens Point
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!
23 WDMD 170 – UW Stevens Point
Summary
• Styles may be applied– Inline– Embedded– External
• The “cascade” of styles can be determined by proximity to the selector.