Programming the Web using XHTML and JavaScript Chapter 3 Cascading Style Sheets
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
I’ll bet centered red h2 headings would look nice
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>
Nah, they need to be left justified and blue!
Example: Need to go back and change all the code inside the <h2> tags There must be a better (read that easier) way!
CSS to the rescue! There is! Cascading Style Sheets Will solve this problem AND have a lot of other uses too!
CSS Three ways to do styles: Internal Local External
Internal Style Sheets
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
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
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
Internal Style Sheets <head> <style type=“text/css”> </style> <head> </head> <title>Red Mountain Consulting Group</title> h2 {color:red}
Internal Style Sheets h2 { color:red } Style definition Name of tag Property Value
Internal Style Sheets h2 { color:#D61130 }
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
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: #000000 black #FFFFFF white #FF0000 brightest red #008000 half bright green #000010 very dim blue
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 http://www.w3schools.com/tags/ref_colornames.asp
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}
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
Uh, oh. I need bigger section headings
Formatting Fonts Using Styles Could find & replace all <h2> with <h1> Why not? What if some <h2> had been used for other things?
Formatting Fonts Using Styles Use font-size property: <style type=“text/css”> </style> h2 {… font-size:24pt …} Ch03-Ex-00d.html
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
Formatting Fonts Using Styles Use font-style property: Also: normal, bold <style type=“text/css”> </style> h2 {… font-style:italic …}
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
Formatting Fonts Using Styles Note that browser defaults are used until an explicit tag is used Ch03-Ex-01.html
Formatting Fonts Using Styles Paragraph styles Only effects content enclosed within <p> elements <style type=“text/css”> p {font-size:14pt} </style>
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>
Formatting Fonts Using Styles Font Families What if not installed on user’s browser? <style type=“text/css”> p {font-family:”Lucida”} </style>
Formatting Fonts Using Styles Include more than one font families: <style type=“text/css”> p {font-family:”Lucida”,”Arial”} </style>
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
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>
Do all paragraphs have to be the same?
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}
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>
Local Styles
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
No existing tag is quite right. Now what?
Custom Tags Can create entirely new elements Generic tags: <div> (block level) <span> (inline)
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
Custom Tags Classes may be defined for custom tags <style type=“text/css”> span.red {color:red} </style>
I’m going to get tired of entering identical style definitions into all my web pages.
External Style Sheets
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
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
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
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>
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
Assignment See Assignments Web Page