Transcript Cascading Style Sheets - School of Information

Cascading Style Sheets
CSS Benefits
•
•
•
•
•
•
•
•
Separates content from presentation
Global presentation changes from one file
Conserves bandwidth
Simpler code is easier to update
Increasingly browser friendly
Better accessibility
Cures the common cold
Great on sandwiches
CSS Anatomy
• Selector p
• Declaration {color: yellow;}
- Property: Value
• Multiple declarations {color: yellow;
background: transparent;}
• Grouped Selectors p, li {color: yellow}
• Inherited Properties body {font-family: sansserif}
- Override inheritance with specific property
- Contextual: can override coding in content
Object Identifiers
• Use as a “style” for content when content is
identified with that id
• Make an element id “mainpoint”
- #mainpoint p {font-style: strong; text-align: center;
margin-bottom: 1em;}
• Use the element id
- <p class =“majorpoint”>This will be on the
test.</p>
• Use in combination with Contextual Selectors
to manipulate presentation in combinations
• It’s like using programming logic!
Calling and Referencing CSS
• <link rel=“StyleSheet” href=“/styles/style1.css”
type=“text/css” media=“all” />
• <style type=“text/css” media=“all”>
@import url(“/styles/style1.css”);</style>
• @import only works in 5.0+ browsers: useful for
customizing for newer browsers
• You could link to styles on other sites (url)
• Embedding styles in a document not recommended
- Less flexibility
- More coding (there’s always another page or another version
of the same page)
• Inline styles in the tag <h2 style=“color: blue”>
CSS Flexibility
• Different style sheets for different uses
- Browsing
• Versions and platforms
- Printing
• 8.5 x 11
• PDA-sized with text breaks
- Searching ?
• Highlighting query term
• Abstracted elements from document –
“id=abstract”
• Relative style file locations might be used for
advanced style logic
Document Styles – Body Tags
-
Margins
spacing (padding)
Indenting
colors (backgrounds and text)
Images
Fonts
Line height (double-spaced Web papers)
Headers
Footers
What else?
Page Divisions
• Content Divs
• Sidebars (Columns)
• Navigation (and Site)
-
Bars
Tabs
Link sets
Rollovers
• “You are Here” effect
- a:visited
- Colors
- Graphics
Styles and App Design
• Content should match style
• Users (their browsers) should be able to perform all
user stories (tests)
• Applications may use styles differently than pages
with just text
- Forms
- Styling for Navigation – Menus
• See Designing CSS Web Pages
- Code Samples
- Web Resources
• DOCTYPES
• Templates for different styles of documents
Setting Up Styles
• Examine existing style sheets (if any)
• Look at page(s) with & without styles
• Types of style selectors:
- Generic - HTML
- Descendants - associated elements
• Child - inherited
• Adjacent Sibling - similar, but specific
- Universal - all elements
- Class- “class” attribute
- ID - “if” attribute
Calling and Referencing CSS
• iSchool
- <link rel="stylesheet" href="/ischool.css"
type="text/css">
• <link rel=“StyleSheet”
href=“/styles/style1.css” type=“text/css”
media=“all” />
• <style type=“text/css” media=“all”>
@import url(“/styles/style1.css”);</style>
• @import only works in 5.0+ browsers: useful
for customizing for newer browsers
• You could link to styles on other sites (url)
iSchool.css
.nav { color: #6699CC; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
.nav:hover { color: #FF9933; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline}
.nav_selected { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #FF9933; font-size: 12px; textdecoration: none}
.external_link { font-style: italic }
h1 { font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; color: #FF9933}
h2 { font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: normal}
h3 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold}
h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold}
a { color: #6699CC }
a:hover { color: #FF9933 }
.external { font-style: italic }
td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
th { font-family: Arial, Helvetica, sans-serif; font-size: 12px}
p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
.page_title { font-size: 22px; color: #FF9933; font-family: Arial, Helvetica, sans-serif}
.title {font-size: 22px; color: #6699CC; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
.title:hover {font-size: 22px; color: #FF9933; font-family: Arial, Helvetica, sans-serif; text-decoration: none}
ul { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333 }
ol { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333 }
li { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333}
How do we want to cascade?
• Multiple css?
• Per page type?
• How many columns?
- What design style?
- No tables at all?
• Printing for reference vs. viewing online
• Validating styles and markup
CSS Tools
•
•
•
•
CSS Edit
Dreamweaver
StyleMaster (Win & Mac)
Text editors
Dynamic HTML
• What interactivity do we need?
• Marking sites, ecommerce sites vs. informational
sites
• Integrating JavaScript into the design
-
Menus
Forms
Sorting course listings
Site Maps
What Else?
CSS Beyond the Screen
• Making a printable Web page
<link href=“screen.css” rel=“stylesheet”
type=“text/css” media=“screen”>
<link href=“print.css” rel=“stylesheet”
type=“text/css” media=“print”>
- Set each type of style (there are others too) to use
the elements that are appropriate for each
• Footers, navigation, sidebars, breadcrumbs
- Change text characteristics to suit
• Font style, font size, italics/underlines
• Make headings more unique in print
• Margins for reading vs. ease of printing
Printing with links
• A { color:#000; (this is black)
• Font-weight: bold;
• Text-decoration: none;}
• #content p a:after, .info ul li a:after
• {content: “a<“ attr(href) “>”; }
• See p 169
Proofing CSS
• Not all CSS features work perfectly on all browsers
- Ensure compatibility with IE 6.x & Mozilla 1.x or Firefox 1.x
- Verify with alternate font sets (internationalization issues)
• 508 compliance with CSS too
- Use true headings and formatting, not styles
- Use “alt” or “longdesc” for elements
- Use good naming conventions
• Not “red” for required fields or “go” for input buttons
- Keep form fields in order
CSS for Mobiles
• Another simple application of styles for
specific devices
- Not all mobiles are created equal
• <link rel="stylesheet" type="text/css"
media="handheld" href="mobile.css" />
• Mobile CSS first steps
• CSS Mobile Profile 2.0
• Mobile Profile and CSS
Projects
• Design Project (design & managing)
- Review & analyze comparable Web sites
- Plan project work & associated project deliverables and
timelines
- Use a methodology as a process framework
- Design Web pages per user stories.
- Build lightweight prototypes
• Main Project (building & testing)
-
Prototyping site structures
Creating user stories
Building navigation systems
Architecting lightweight information taxonomies
Functionality testing
Consulting