Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Introducing Styles CSCI N241: Fundamentals of Web Design Copyright ©2006 Department of Computer & Information Science Goals By the end of this unit, you should understand … • … how to build a properly formatted style rule. • … how to use an embedded style sheet. • … how to build an external style sheet. • … how to link to an external style sheet. • … how to build & use style classes. • … how to validate your CSS. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science What is a Style? • Remember, HTML is all about structure. As scripting languages for web development evolved, the W3C deprecated the HTML elements that governed design. • In place of the deprecated elements, the W3C devised a model for manipulating design of web pages using Cascading Style Sheets (CSS). N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Cascading What? • Don't worry too much about terminology right now (you'll learn as you progress)! • A style sheet presents us with a way to adjust the design of a web page. • The term "cascading" refers to the ability of the browser to read style rules from multiple sources. • We construct style sheets as series of rules … N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Anatomy of a Rule - Selector • A selector is the element to which you want to apply a new style. It begins a style rule: p { background-color: #FF0000; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Anatomy of a Rule - Braces • After the selector, we use a pair of curly braces to enclose our declaration statements: p { background-color: #FF0000; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Anatomy of a Rule - Declarations • Inside the braces we have declarations. We can have multiple statements, or just one. Each ends with a semi-colon. Each consists of a property and a value: p { background-color: #FF0000; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Anatomy of a Rule - Properties • The first part of a declaration is the element's property that we want to update, background-color below: p { background-color: #FF0000; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Anatomy of a Rule - Values • To update a property, we specify a new value, #FF0000 below: p { background-color: #FF0000; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Rule with Multiple Declarations • We can add more than one declarations per rule: p { background-color: #FF0000; border: 1px solid #808080; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science CSS Property References • HTML Help: http://www.htmlhelp.com/reference/css/properties.h tml • CSS Property Index: http://www.blooberry.com/indexdot/css/propindex/a ll.htm • HTML Dog: http://www.htmldog.com/reference/cssproperties/ • W3 Schools: http://www.w3schools.com/css/css_reference.asp N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science CSS is NOT HTML! • The syntax rules for CSS are different than those for HTML (don't worry – so long as you follow the structure outlined in the previous slides, you're good to go! ). • To include a comment in CSS code, use the following syntax: /* This is a comment for CSS. */ N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Types of Styles • One way that we can categorize styles is where we declare them. • Essentially, there are three categories of styles: – Styles that we apply directly to individual elements only (Inline Styles – we won't use these very much!) – Styles that we apply to elements within a single page (Embedded Styles) – Styles that we apply to multiple pages (External Styles) N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Let's Try One! • Download the file n241IntroStyles_ examples.zip and decompress it. • Edit the file lounge.html to add the styles on the next slide … Now you're stylin'! Just don't touch the hair! N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Let's Try One! • Add the following in your <head>: <style type = "text/css"> p { color: maroon; } </style> N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Keep Goin' … • Now, add the following rules: h1, h2 { font-family: sans-serif; color: gray; border-bottom: 1px solid black; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science What if … ? • … we wanted to specify that only the <h1> element will get a black line? • … we wanted to keep the sans-serif, gray font for both <h1> and <h2>? N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science One Selector, Multiple Rules h1 { border-bottom: 1px solid black; } h1, h2 { font-family: sans-serif; color: gray; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science External Style Sheets • The real power of CSS is using rules to their full potential – by applying rules to multiple pages ("Write once, take anywhere."). • To do this, we need to do a few things: – We need to create a separate file just to store our rules (with a .css extension). – We need to point pages we want to style to that file using the <link> element. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Let's Try One! Groovy! We're all stylin' now! • Create a new file called lounge.css and store that file in the css subdirectory. • Cut the rules we created earlier in lounge.html and paste them in lounge.css. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Keep Goin' … • Now, remove the <style>…</style> from lounge.html and replace it with the following: <link type = "text/css" rel = "stylesheet" href = "css/lounge.css" /> N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Keep Goin' … • Add the following to about/directions.html and to beverages/elixir.html (how would you specify the path to lounge.css?): <link type = "text/css" rel = "stylesheet" href = " /lounge.css" /> N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Examining Inheritance • Edit your rule for the p element in lounge.css so that it looks like this: p { font-family: sans-serif; color: maroon; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Inheritance • When we apply styles, those changes affect not only the element to which we are applying styles, but any elements that element encloses in a nest (consider the <a> and <em> nested inside our first paragraph in lounge.html). • Not every style is inherited. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Mapping Inheritance html body h1 p img p a h2 em p a N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Movin' on Up … • Look closely at your style sheet. Did you notice that we edit the font-family multiple times? • Why not just put this in a new rule for the body, to take advantage of inheritance? body { font-family: sans-serif; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Mapping Inheritance html body h1 p img p a h2 em p a N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Overriding Inheritance • Sometimes, we want to override inherited properties. • We can do this by simply re-writing the declaration for the element that we want to change. Let's add the following rule: em { font-family: serif; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Introducing Classes • By default, when we use a tag/element name as a style rule’s selector, the changes we make to properties apply to all elements that match that element’s type (e.g., all <p>s). • What if we want to apply changes to properties to only some elements of the same type, but not others? • We can solve this problem by developing a class … N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Creating a Class • We can create a class one of two ways: – We can create a class to apply to any type of element. N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Creating Classes for Specific Types of Elements • We can attach a class to a particular element, such that we can apply the class to only elements of that type: We can apply this class to any paragraph, <p>, p.alert that uses the class called greenTea. We { cannot apply this class color:red; to other types of elements. } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Creating Classes for Specific Types of Elements • We can also create a class to apply to any type of element: We can apply this class .alert to any element that uses the class called { greenTea. This type of class code gives us color:red; more flexibility. } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Let’s Try One! • Add the following class to your CSS file: .greenTea { color:green; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Applying a Class • To apply a class to a particular element, we need to use the class attribute, like this: <p class = "alert"> Midterm Exam Today! </p> N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Let’s Try One! • In lounge.html, link the .greenTea class to the paragraph describing green tea: <p class = "greenTea"> N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Keep Goin’ … • Now, let’s add two more classes to your CSS file: .raspberry { color: blue; } .blueberry { color: purple; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Keep Goin’ … • In lounge.html, link the classes you just created to the paragraphs describing the Raspberry Ice Concentration & the Blueberry Bliss Elixir, respectively: <p class = "raspberry"> … <p class = "blueberry"> N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Pseudo-Classes • In addition to allowing for classes, CSS provides support for pseudoclasses. • These classes add special effects to some selectors (like the <a> tag). N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Pseudo-Classes for the <a> • Unvisited Links: a:link { color: #FF0000; } • Visited Links: a:visited { color: #00FF00; } • Mouse Over (Hover) Link: a:hover { color: #FF00FF; } • Selected (Active) Link: a:active { color: #0000FF; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Let's Try One! • Add the following to your CSS file: a:link, a:visited { color:#000080; text-decoration:none; } a:hover, a:active { color:#0000FF; background-color:#E0E0E0; text-decoration:underline; } N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Validation • Just like XHTML, good form requires that we validate our CSS files. We can link to an validation service using the following: http://jigsaw.w3.org/css-validator/ N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science Questions? N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science References • Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: 2006. • Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006. • CSS Pseudo-classes from W3 Schools: http://www.w3schools.com/css/css_pseudo_classes.asp N241: Fundamentals of Web Development Copyright ©2006 Department of Computer & Information Science