CSS Workshop: Writing CSS

CSS Workshop:Writing CSS

Session 2: right now Fundamentals of coding CSS Session 3: Jan 10, 10:30 - SF (Green room) Text formatting Colors Backgrounds Session 4: Jan 10, 1:00 - SF (Green room) Margins, padding, and borders CSS page layout techniques Workshop Overview

Tools Basic vocabulary Rules, selectors, properties, and values Grouping Inheritance Classes & IDs Other types of selectors Adding CSS to HTML Intro to XHTML The cascade Media types Browser support Session Overview

Manual coding HomeSite (TopLite) NotePad BBEdit Anything that outputs simple text files (like HTML) WYSIWYG Dreamweaver Style Master (westciv.com) Tools for Writing CSS

BASIC CSS VOCABULARY • Show me the code! • (Assumption: Basic knowledge of HTML)

HTML <p>All hail the death of the <em>font</em> tag!</p> <p>CSS is here at last.</p> CSS p {background: yellow; color: red; font-family: Georgia;} And the user sees... All hail the death of the font tag! CSS is here at last. HTML for Structure, CSS for Presentation

A CSS “rule” consists of: p {font-family: Georgia;} Selector Property Value Declaration Selector: Any HTML tag you want to attach style to — <p>, <li>, <td>, <img />, <div>, <span>, etc.Make sure to close your tags (<p></p>) so the style has an “end” Property: The aspect of style you want to change Value: What you want to change it to Some CSS Jargon

Group CSS rules for less code p {background: yellow;} p {color: red;} p {font-family: Georgia;} is the same as p {background: yellow; color: red; font-family: Georgia;} Separate with semicolon You can group selectors too p {font-family: Georgia;} h1 {font-family: Georgia;} div {font-family: Georgia;} is the same as p, h1, div {font-family: Georgia;} Separate with comma Grouping

HTML <p>All hail the death of the <em>font</em> tag!</p> CSS p {font-family: Georgia;} HTML tags “inherit” the styles from their “parent” tags or any previously opened tags font appears in Georgia because <em> uses <p>’s styles Follows markup structure, so make sure your code is clean Styles applied to <body> will be applied to entire page Problems with inheritance and HTML tables Inheritance: The “Cascade” of CSS

Use classes when you want to style just some <p>s, not all of them <p class="nav"><a href="default.htm">Home</a></p> <p class="main">Blah blah text goes here...</p> <p class="main">Another paragraph goes here...</p> p.nav {font-family: Georgia;} p.main {font-family: Verdana;} Works with any selector Classes can be named anything you want Don’t begin with a number Capitalization matters: mainbodyText vs. mainBodyText Always use a period in the CSS Use classes without a selector to be flexible .main {font-family: Verdana;} Display any HTML tag with class="main" using Verdana Classes

Like classes, but used when there’s only one unique usage per page <p id="headline">Man cuts off own head and lives!</p> p#headline {font-family: Georgia;} Only one <p> has id="headline" on this page Classes can have multiple uses on same page You can use IDs without a selector too #headline {font-family: Georgia;} Display any HTML tag with id="headline" using Georgia IDs not used very often, but some uses are: Entire navigation bar component A column Entire footer component Any other large block of content IDs

Descendant (contextual) selectors For styling tags that are associated with other tags <div> <p>All hail the death of the <em>font</em> tag!</p> </div> div em {color: orange;} When <em> is nested within <div>, use orange Works in any depth and with classes and IDsdiv#main p .caption {color: orange;}Translation: “Color text orange when it appears within any element with a class of caption, which in turn is inside a paragraph tag, which in turn is inside a div with an ID of main.” Other Types of Selectors

Link pseudo class selectors For styling links in different states Normal links: a:link {color: blue;} Visited links: a:visited {color: purple;} Links on rollover: a:hover {color: red;} (not in Netscape 4.x) Links on click: a:active {color: yellow;} No change to standard <a> tag in HTML Can use with classes and IDs: a.nav:hover {color: red;} Pseudo element selectors The first line of a particular element: p:first-line {color: blue;} The first letter of a particular element: p:first-letter {color: orange;} Only in Win IE 5.5+, Mac IE 5+, N 6+ Example use: A table where you don’t want the first border of a row to show up Other Types of Selectors

Commenting your CSS is a good idea /*--- Navigation styles ---*/ .nav {background: orange;} a:link {color: black;} a:visited {color: gray;} /* Body styles */ p {font-family: Verdana; color: purple;} . . . Comments

ADDING CSS TO HTML • 4 methods: • Linking • Importing • Embedding • Inline

HTML file links to separate CSS file Most flexible and powerful method True separation of content and presentation One CSS file can affect multiple HTML files/pages Multiple CSS files can affect one HTML file(the “cascade”) Linking CSS file HTML file Rendered page linked CSS HTML HTML HTML CSS CSS CSS HTML Page Page Page Page

Use <link> within <head> of HTML code <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> type specifies the type of stylesheet (CSS, not XSL or other) media (optional) covered later href can be full URL or relative CSS file Consists of CSS rules only Any file name, but use .css extension Linking: Code p, li {color: red; font-family: Georgia;} .main {color: black; font-family: Verdana;} a:link {color: blue;} a:visited {color: purple;}

HTML file links to separate CSS file, which in turn imports another CSS file Multiple CSS files can be imported into one CSS file Not supported in Netscape 4.x Useful for serving certain styles to all browsers except this one Wired News: styled version to 5 and above, unstyled to Netscape 4.x Importing CSS file CSS file HTML file Rendered page imported linked

Use @importwithin CSS code Place first, before any other CSS rules Full URL or relative URL Browsers that don’t support @import will still use the other styles below it Importing: Code @import url(example.css); p, li {color: red; font-family: Georgia;} .main {color: black; font-family: Verdana;} a:link {color: blue;} a:visited {color: purple;}

CSS code appears within HTML file Only for specialized uses - we’re not using this at Terra Lycos CSS affects only the one page Doesn’t take advantage of power of separating content and presentation Use for overriding global styles for one particular page Embedding CSS HTML Rendered page

Use <style>within <head> of HTML code <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css" media="screen">  </style> </head> <body> . . . Comment code helps older browsers ignore CSS code You can combine embedding with linking and importing as shown Embedding: Code

CSS code appears within HTML file, alongside HTML tags Try to avoid this method CSS affects only the one HTML tag Content and presentation all mixed together, like yucky old <font> tags Inline ......... .....…. ......... Rendered page

Use styleattribute on any HTML tag <p style="color: red; font-family: Georgia">Paragraph text</p> You can combine with linking, importing, and embedding You can also combine with old-style HTML attributes:<p size="-1" style="color: red; font-family: Georgia">Paragraph text</p> Must also include code in <head>:<meta http-equiv="Content-Style-Type" content="text/css"> Inline: Code

INTRO TO XHTML • HTML is dead! • It’s time to bury it and move on.

New standard replacing HTML All sites moving toward XHTML Cleaner, more logical code for document structure Increased interoperability and accessibility (mobile devices, screen readers, etc.) Works in all browsers (old and new), so no reason not to start coding in XHTML now! CSS works best with XHTML Made to work together Better support and fewer problems in current and future browsers Valid CSS + valid XHTML = fewer headaches for everyone XHTML Is the Future

A few key things to change from old HTML Doctypes Code tells browser how strictly your page follows standards Very first lines of code “Standards” mode: browser displays page following specs exactly<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> “Quirks” mode: browser is more forgiving of invalid/older code (better support for IE 4 and N 4)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> Good News: Moving to XHTML Is Easy

Write everything in lowercase Tags and attributes (Class and ID names can be mixed case) <P CLASS="subNav"> becomes <p class="subNav"> Quote all attribute values height="40", not height=40 Close all tags Every tag must close Bad: <p>Paragraph text and <li>List text Good: <p>Paragraph text</p> and <li>List text</li> Close “empty” tags using slash / with space before it: <br /> and <img src="example.gif" alt="Home Page" /> Write comments with two dashes per side <!- - text here - - > Moving to XHTML

Think about content structure when coding Don’t use <p> or <div> for everything <h1>Headline text</h1> <p>Paragraph text</p> Use the right tag for the right job: If it’s structurally a list (even without bullets or laid out horizontally), use <ul> Don’t cheat to make your layout easier Avoid presentational tags or attributes No more <font> or align Use <strong> instead of <b> Use <em> instead of <i> Moving to XHTML

Tools HTML Tidy (free) converts HTML to XHTML Note: Dreamweaver 4 doesn’t product valid XHTML (tweak it) Validate your XHTML at validator.w3.org Validating CSS is a good idea too Errors could affect behavior and design of page in various browsers XHTML resources NYPL Style Guide Webmonkey Moving to XHTML

1. Strip all tags from current HTML and start from scratch with raw content 2. Mark up content accurately using XHTML with no styling Great time to add accessibility features such as “skip links” 3. Validate code regularly against XHTML Transitional 4. Start adding CSS once XHTML is complete and validated Test first in IE 6, N 7, and IE 5 Mac Then in IE 5.x and N 4.x Quick Steps to Converting Pages

THE CASCADE • CSS rules fight it out

When multiple CSS rules apply to the same element, which one wins? <link rel="stylesheet" type="text/css" media="screen" href="ex.css" /> <style type="text/css" media="screen">  </style> . . . <p class="nav" style="color: brown"> Which color <em style="color: orange">wins</em>? </p> The Battle @import url(import.css); p {color: red;} em {color: purple;} p {color: yellow;} em {color: pink;} wins

Set of rules to determine the winner In priority order... 1. Most specific rule (e.g., styles on <em> vs. <p>) A. Inline CSS B. Embedded CSS C. Linked CSS (Imported CSS has priority depending on where it’s imported) 2. Inherited ID selectors 3. Inherited class selectors 4. Inherited tag selectors 5. All else being equal, whatever comes last in CSS code wins A, B, C appear under each number Multiple selectors (p em) have more priority than single selectors within B and C Can get complicated; test thoroughly Cascading Set of Rules

Using ! important with a declaration gives it the most weight in the cascading order p {color: blue; font-family: Verdana ! important;} Color has normal priority, but font style has greater priority Will override everything on previous slide Use cautiously Can be difficult to keep track of interaction of many rules Adding Importance

MEDIA TYPES • Different styles for different viewers

Target CSS using @media rule @media screen { body {color: white; background: blue;} } @media print { body {color: black; background: white;} } Types: screen: computer monitors print: printing to page (or print preview) handheld: small devices (poor support) projection: projectors or printing to transparencies (no support) aural:speech synthesizers (no support) all Separate multiple media types with commas: @media print, screen @media works in IE Win 5.5+, IE Mac 5+, N 6+ Customizing Presentation by Media

Same media control with <link> <link rel="stylesheet" type="text/css" media="print" href="print.css" /> CSS file used only when printing Same media control with @import @import url(print.css) print; CSS file used only when printing Benefit: Browser won’t even download CSS unless relevant Linking and Importing Based on Media

BROWSER SUPPORT • And now for the bad news...

Browsers support CSS to varying degrees Basic vocabulary Properties and values Even some different interpretations of the same rules Overview of support IE 6 IE 5 IE 4 IE 3 N 7 N 6 N 4 WinHH MLHHM MacHMLH HM We’ll mention important bugs throughout the sessions Test your code thoroughly Theory vs. Practice

Some CSS “hacks” exist to deal with bugs Sort of like browser detects without scripting Target IE 4+ and N 6+ @import url("mystyles.css"); N 4.x doesn’t support @import Target browsers with best CSS support <link rel="stylesheet" type="text/css" href="highpassfilter.css" /> highpassfilter.css file: @import "null?\"\{"; @import url("mystyles.css"); mystyles.css will be used only by Win IE 6+, Mac IE 5+, and N 6+ Read more about the “High Pass Filter” Working Around Browser Bugs

Serve custom CSS to Win IE 5.x p { color: red; voice-family: "\"}\""; voice-family: inherit; color: blue; } Win IE 5.x will use red, other browsers will use blue Hack for correcting major issue: boxes size differently in IE 5.x Read more about the “Box Model Hack” Browser bug resources Website Tips: CSS: Solutions to Bugs Box Lessons glish Layout Techniques: Hacks Working Around Browser Bugs

Good all-around sites House of Style: CSS Guide - thorough reference Web Design Group A List Apart - developer magazine W3C official specs Website Tips: CSS - tons of links Steal code! View source on Wired News and HotBot General CSS Resources

CSS Workshop: Writing CSS