Cascading Style Sheets: Basics I450 Technology Seminar Copyright 2003, Matt Hottell
What is CSS? A set of rules for displaying markup content
What is CSS? A set of rules for displaying markup content Cascading: Display rules “cascade” down The most specific rule is used
What is CSS? A set of rules for displaying markup content Cascading: Display rules “cascade” down The most specific rule is used Styles Sheet: Rules are created as styles
The Need for CSS Fixing kludges in HTML
The Need for CSS Fixing kludges in HTML Separation of content and display
The Need for CSS Fixing kludges in HTML Separation of content and display More options for displaying content
The Need for CSS Fixing kludges in HTML Separation of content and display More options for displaying content Efficiency
CSS Example http://www.csszengarden.com/
Visual Display in HTML <h1><font color=‘red’ face=“Georgia, Times New Roman, Times, serif”> This will be a heading 1 in red Georgia font</font></h1> Every time I want my text to look the same, I have to retype or cut and paste all of this markup</font></h1>
Style Rules CSS style rules look like this: Selector { property0:value0; property1:value1; propertyZ:valueZ }
CSS Reference http://www.w3schools.com/css/css_reference.asp
Inline Style Sheet Using a Style Attribute <h1 style=“color:red; font-family: Georgia, Times New Roman, Times, serif”> This also shows up as heading 1 in red Georgia font. I don’t have to use the font tag any more. </h1> However, I still have to retype or cut and paste the markup every time I want to use the same style.</h1> Notice that we switch from the attribute “face” for the “font” element to the property “font-family” in CSS. Names of attributes in HTML do not necessarily exactly match the names of properties in style rules.
Inline Style Sheet Using a Style Attribute In-Class exercise: Create an inline stylesheet that makes all paragraph text black, centered, and 12 pixels in size.
Inline Style Sheet In-Class exercise: Create an inline stylesheet that makes all paragraph text black, centered, and 12 pixels in size. <html> <head><title>black, centered, 12px text</title></head> <body> <p style=“color:black; text-align:center; font-size:12px”> This is black, 12px, centered text.</p> </body> </html>
Embedded Style Sheet Using a Style Element <html> <head><title>Embedded style sheet</title> <style type=“text/css”> h1 {color:red; font-family: Georgia, Times New Roman, Times, serif;} </style> </head><body> <h1>This will also appear as a heading 1 in red Georgia font. In the head of this document, I declared an embedded style sheet that will make all h1 tags in this document red with Georgia font</h1> <p>But how do I make some h1 tags use this style and others look different? </p>
Embedded Style Sheet Using a Style Element In-Class exercise: Create an embedded stylesheet that makes all paragraph text blue, background-color #777777, and 14 pixels in size.
Embedded Style Sheet Using a Style Element In-Class exercise: Create an embedded stylesheet that makes all paragraph text blue, background-color #777777, and 14 pixels in size. <html> <head><title>Embedded style sheet</title> <style type=“text/css”> p {color:blue; background-color:#777777; font-size:14px;} </style> </head><body> <p>This should be blue with gray background and size 14</p> </body></html>
Class Selectors <html> <head><title>Embedded style sheet</title> <style type=“text/css”> .red {color:red; font-family: Georgia, Times New Roman, Times, serif;} </style> </head><body> <h1 class=“red”>This will also appear as a heading 1 in red Georgia font. In the inline style sheet I declared a generic class style that applies red Georgia to ANY element declared as class red. I simply change a value in the style element in the head and all elements using that style will change to match</h1> <p class=“red”> This will also be in red Georgia font. Now I can be very specific when I apply styles, but I still have to add the same markup in the HEAD to each of my pages. How do I make all my pages use the same styles without copying markup to each page? </p>
Linked Style Sheets <html> <head><title>Linked style sheet</title> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”> </head><body> <h1 class=“red”>This will also appear as a heading 1 in red Georgia font. In the head of this document I declared a link to an outside stylesheet named “mystyle.css”. In that external stylesheet I place all of the style declarations I was using in my inline stylesheet</h1> <p> Now I can change the way all of my pages display simply by modifying a value in my single external stylesheet. How efficient! </p>
Example External Stylesheet h1.redH1 { color:red; font-family: Georgia, Times New Roman, Times, serif } body { background-color: #333333; .blueback { background-color: blue; color: white p { font-size: 12px; text-align: center;
Linked Style Sheet Using an External Stylesheet In-Class exercise: Create an external stylesheet that defines a new style named phunky that makes text pink, centered, and bold. The sheet should also make the background color of the page ”antiquewhite”
Linked Style Sheet Using an External Stylesheet In-Class exercise: Create an external stylesheet that defines a new style named phunky that makes text pink, centered, and bold. The sheet should also make the background color of the page ”antiquewhite” .phunky { color:pink; text-align: center; font-weight: bold; } body{ background-color: antiquewhite
Cascading revisited When using multiple styles that conflict, which will be displayed?
Cascading revisited When using multiple styles that conflict, which will be displayed? Order: Inline style sheet Embedded style sheet External style sheet Browser default
Style Rule Values Colors: Names for some: Hexadecimal RGB RGB% blue, red, green, pink Hexadecimal #0000FF, #FF0000, #00FF00, #FF3399 RGB rgb(0,0,255), rgb(255,0,0), rgb(0,255,0) RGB% rgb(0%,0%,100%), rgb(100%,0%,0%)
Style Rule Values Font size: px for pixels (a dot on the screen) pt for point (1/72 of an inch) font-size: 12pt pc for pica (12 points) font-size: 2pc
Modifying Hyperlinks We can modify the way hyperlinks appear by creating style rules modifying the <a> tag with the following “pseudo-classes”: link visited hover active
Modifying Hyperlinks a:link {color:#0000ff} a:visited {color: #00ff00} a:hover {color:fuschia; font-weight:bold} a:active {font-size:30pt} Order here is important!
Modifying Hyperlinks You can also combine a class selector with a pseudo-class: a.outsidelink:link {color:#0000ff} a.insidelink:visited {color: #00ff00} a.fun:hover {color:fuschia; font-weight:bold}
Span and Div <span> and <div> are tags that let you select a group of elements and apply styles to them <span> is an inline tag no breaks are added before or after <span></span> <div> is a block tag a break is usually added by the browser before and after the <div></div> tags
Span and Div <html> <head><title>Span and Div</title> <style type=“text/css”> .red {color:red; font-family: Georgia; font-weight:bold;} </style> </head><body> <p>This will also appear as normal paragraph text except <span class=“red”>here because I made the text red,bold, and Georgia font without breaking up the paragraph.</span> Now I am back to normal... </p> <p> I start off as normal paragraph text here as well. However, when I use a div tag to apply a style, my paragraph is broken like <div class=“red”>this. You can see that the browser sets off this text from the text before and </div> after it. Now I am back to normal again. </p> </body></html>
Putting it all together In-class exercise: Create a web page with an external style sheet that does the following: All paragraph text is white with a blue background and centered. All links get bigger and change colors when hovered over Background color is “aliceblue” Creates a style “redstyle” that makes text 16px red Garamond. All h1 text is centered and underlined.