Download presentation
Presentation is loading. Please wait.
1
Programming the Web using XHTML and JavaScript
Chapter 3 Cascading Style Sheets
2
The Power of Styles Structure and content do NOT equal presentation!
Presentation is not meant to be determined by HTML elements All tags have defaults – per browser <h1> = 24-pt, bold, Times Roman Reason: Not all Web pages display in PC browser windows or the same window size
3
I’ll bet centered red h2 headings would look nice
4
Example: All <h2>’s have additional tags added make the headers red and centered: use the color attribute on <font> to change it <h2> <center> <font color=“red”> head stuff </font> </center> </h2> …a bunch of stuff… <h2> <center> <font color=“red”> head stuff </font> </center> </h2> …some more stuff… <h2> <center> <font color=“red”> head stuff </font> </center> </h2>
5
Nah, they need to be left justified and blue!
6
Example: Need to go back and change all the code inside the <h2> tags There must be a better (read that easier) way!
7
CSS to the rescue! There is! Cascading Style Sheets
Will solve this problem AND have a lot of other uses too!
8
CSS Three ways to do styles: Internal Local External
9
Internal Style Sheets
10
Internal Style Sheets Redefines the presentation rule (style) for certain elements For the current page “Internal” because contained within the HTML source document itself Styles may be defined using different style sheet languages so … … the language used must be specified
11
Internal Style Sheets <style> element in <head> section
<style type=“text/css”> … </style> The style sheet instructions in this elements are: Written in plain text format Using the cascading style sheet language
12
Internal Style Sheets Also specify default style sheet language for entire HTML document: <meta http-equiv=“Content-Style-Type” content=“text/css” /> <meta> elements go in the <head> section Note: although the <meta> tag is “required”, a default is assumed if one is not specified
13
Internal Style Sheets <head>
<style type=“text/css”> </style> <head> </head> <title>Red Mountain Consulting Group</title> h2 {color:red}
14
Internal Style Sheets h2 { color:red } Style definition Name of tag
Property Value
15
Internal Style Sheets h2 { color:#D61130 }
16
Sidebar: What is #FFFFFF all about?
Hexadecimal (hex) 4 bits (one nybble) can represent 16 numbers 0 – 15 in decimal 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F in hex 8 bits (one byte) can represent 256 numbers 0 – 255 in decimal 0 – FF in hex # indicates the following characters represent a hex number
17
Sidebar: What is #FFFFFF all about?
Monitor colors: Red, Green, Blue (RGB) One byte used for each color #FFFFFF 256 shades for each color 16,777,216 colors total For each color 00 Completely off FF Completely on Colors combined: # black #FFFFFF white #FF0000 brightest red # half bright green # very dim blue
18
Sidebar 2: do you need to know #FFFFFF?
16 Standard (guaranteed) colors See table 3.1 p. 59 for list 200+ de facto colors Supported by most browsers
19
Internal Style Sheets Alignment <style type=“text/css”>
Text-align options are: left, center, right, justify <style type=“text/css”> </style> h2 {color:red; text-align:center}
20
Example Original header idea using tags to format
Ch03-Ex-00a.html Original header idea using css Ch03-Ex-00b.html Changed headers using css Ch03-Ex-00c.html
21
Uh, oh. I need bigger section headings
22
Formatting Fonts Using Styles
Could find & replace all <h2> with <h1> Why not? What if some <h2> had been used for other things?
23
Formatting Fonts Using Styles
Use font-size property: <style type=“text/css”> </style> h2 {… font-size:24pt …} Ch03-Ex-00d.html
24
Formatting Fonts Using Styles
Other choices for font-size value: A percentage 150%, 75% Predefined smaller small, x-small, xx-small Predefined larger large, x-large, xx-large
25
Formatting Fonts Using Styles
Use font-style property: Also: normal, bold <style type=“text/css”> </style> h2 {… font-style:italic …}
26
Formatting Fonts Using Styles
Other properties text-decoration underline, overline, line-through, blink, none text-transform capitalize, uppercase, lowercase, none font-variant small-caps, none background-color
27
Formatting Fonts Using Styles
Note that browser defaults are used until an explicit tag is used Ch03-Ex-01.html
28
Formatting Fonts Using Styles
Paragraph styles Only effects content enclosed within <p> elements <style type=“text/css”> p {font-size:14pt} </style>
29
Formatting Fonts Using Styles
Indent and line spacing: <style type=“text/css”> p {text-indent:25pt; line-height:24pt} </style> <style type=“text/css”> p {text-indent:12%; line-height:150%} </style>
30
Formatting Fonts Using Styles
Font Families What if not installed on user’s browser? <style type=“text/css”> p {font-family:”Lucida”} </style>
31
Formatting Fonts Using Styles
Include more than one font families: <style type=“text/css”> p {font-family:”Lucida”,”Arial”} </style>
32
Formatting Fonts Using Styles
Warning: multiple fonts may not have the impact you intend User’s display may not include the fonts you specified Common fonts may be the best choice overall
33
Formatting Fonts Using Styles
Can compress definition <style type=“text/css”> p {font: italic 500 small-caps 14pt/24pt ”Lucida”,”Arial”} </style> <style type=“text/css”> p {font-style:italic; font-weight:500; font-variant:small-caps; font-size:14pt; line-height:24pt; font-family:”Lucida”,”Arial”} </style>
34
Do all paragraphs have to be the same?
35
Tags with Multiple Styles
The same type of element can have multiple definitions called “classes” <style type=“text/css”> p {text-align:justify; font-weight:bold} </style> p.intro {text-align:center; color:red} p.intro {text-align:center; color:red}
36
Tags with Multiple Styles
The p.intro class includes the styles of the p class but changes those styles How is this class invoked? Explains why “none” is an option Ch03-Ex-02.html <p class=“intro”> … </p>
37
Local Styles
38
Local Styles <p>The text in this paragraph will be normal colored</p> <p style=“color:red”>The text in this paragraph will be red</p> Local styles take precedence over other style definitions Ch03-Ex-03.html
39
No existing tag is quite right. Now what?
40
Custom Tags Can create entirely new elements Generic tags:
<div> (block level) <span> (inline)
41
Custom Tags Ch03-Ex-04.html <style type=“text/css”>
span {font-size:18pt} </style> Let me make something <span>perfectly</span> clear. Produces: Let me make something perfectly clear. Ch03-Ex-04.html
42
Custom Tags Classes may be defined for custom tags
<style type=“text/css”> span.red {color:red} </style>
43
I’m going to get tired of entering identical style definitions into all my web pages.
44
External Style Sheets
45
External Style Sheets Text-only file Contains style definitions only
h2 {color:red} h1 {font-size:24pt} p {text-align:center} p.small {font-size:10pt} No <style> tags needed
46
External Style Sheets Save in a file with a .css extension
css = cascading style sheets Local, internal and external may be present in the same document Local overrides internal Internal overrides external
47
External Style Sheets How to specify external style sheets?
Add <link> tag in <head> section <link rel=“stylesheet” type=“text/css” href=“my_styles.css”> Ch03-Ex-05.html
48
External Style Sheets Problem: older versions of browsers might not recognize style definitions Could use comments: <style type=“text/css”> <!-- p {text-indent:25pt; line-height:24pt} --> </style>
49
External Style Sheets MORE problems: XHTML may not recognize this use of comments Solution: use <link> method to make the style sheet external If older version of browser does not recognize this tag it will ignore it
50
Assignment See Assignments Web Page
Similar presentations
