Cascading Style Sheets (New Horizons)

"Cascading Style Sheets", New Horizons' Taurus Wright, July 25-26, 2005.

Style sheet is "any rule or sequence of rules that affect appearance of a document". Cascading Style Sheet (CSS) is "core technology of HTML".


Types: inline rarely used, applied to specific elements, appropriate for overriding linked CSS when necessary. More common are embedded (controlling a single page) and linked (controlling several pages). Imported CSS only recently supported in Firefox and Netscape, creates secondary link to another external stylesheet.

Syntax:

Each statement is a "rule", which includes a "selector" and a "declaration"

For the rule "P {font-size: 10pt; color: blue}", 'p' is the Selector; 'font-size' and 'color' are properties; '10pt' and 'blue' are values.

In Dreamweaver, F12 to preview.

Manual p. 5: group elements together using comma. Spaces within css rule syntax don't matter. Semicolons only matter when separating values (but OK to leave in).

Consult w3schools.com for css elements and tutorials.

Separate style sheet contains only rules, no "style" tag. HTML document points to it like this:

• [link rel="stylesheet" type="text/css" href="IlluminatiStyles.css"]

Font shorthand, p. 54;

Lesson 2: Designing with the Cascade

To solve conflicts between styles:

• Top to Bottom


• Specificity: weight of given style to determine its importance over another style (see table p. 66)

Elements: 1 point
Classes: 10 points
IDs: 100 points

• Inheritence --> way css properties flow from parent to child elements.

Class Selectors: 2 types ...

• Element classes (e.g., div.header {property: value; }


• Independent classes, more flexible (e.g., .author {property: value;}

Class Selectors (cont.)

Why use ID Selectors? functions more as an anchor (for hyperlinks, etc.) than classes. Oftentimes, an ID will already be in document functioning as bookmark (formerly handled by 'a', now 'id'), and this same tag can also carry formatting information through the ID selector (=#). Also: IDs are unique per page, while classes are repeatable.


e.g., at footer, [div id="footer"] (with angle brackets though) toward bottom of HTML body.

In new rule on style sheet: #footer {color: white; letter-spacing: 2px; font-size: 10px; font-weight: bold; }

Contextual & Attribute Selectors

Contextual selector: p b {color: red} means find bold text within any p tag, and make it red. (just p space b)

Attribute selector: e.g., identifying table by its width, to be formatted differently. Not supported by IE.

table [align] {font-family: Georgia, serif; } = "find the table that has the align attribute in it, and change font to Georgia"

The Cascade II

• Cascading --> hierarchical order in which styles are applied when there is a conflict
• General--> Specific


• Types of Style Sheets:
  

• In-line,
  
• Embedded,
  
• Linked/External

• Order of Appearance
• Modularity--> placing a style in the most approproate location:
  
• Better organization;
  
• More design options

Imported Styel Sheets

• An external style sheet linked within another style sheet

• No braces
• Needs terminating semi0colon
• 2 syntax options:
• @import url(styles/stylesheet.css);
• @import "styles/stylesheet.css";
• Must be first rule in Style Sheet
• Inherits its priority in the cascade from style sheet that imports it (i.e., where it is typed)

Designing with the Cascade

• Create Cass Styles
• Create ID Styles
• Create Contextual Selectors
• Target Specific Attributes
• Style Sheets that Cascade
• Import Style SHeets
• Create Inlline Styles

Designing Content Sections

• Control Margins and Padding
• Create Borders
• Control Element Dimensions
• Floating Elements
• Control Content Overflow

Formatting with the Box Model

• Box Model: elements consist of a box which includes the element itself and its optional padding, border, and margin (concentric squares, from center: element->padding-->border-->margin-> Window edge)
  
• Box properties are not inherited (they won't appear around individual child items by default)
  

Margins and Padding

• Margin
• Padding
  
• Shorthand examples
• {margin: 10px;} = all four sides
  
• {padding: 5px 8px}=top/bottom, left/right

Borders

• Border: lines that display on the edge of the box
  
• Properties - (-top, -right, -bottom, -left)
  
• Borders around tables and lists can be buggy
• Not all border values are supported at all, or the same ones in the same browsers

To create beveled-look (3D): "border: white outset 2px;"

To create horizontal dashes (and other heading attributes):
h1, h2 { color: #366;
background-color: #cff;
text-transform: capitalize;
letter-spacing: 4px;
font-size: 18px;
font-weight: 900;
font-variant: small-caps;
border-top: 1px dashed #699;
border-bottom: 1px dashed #699;
width: 300px; }

Floating
Float property: to wrap text around picture or other object
Floating allows elements to arrange on page by defining

• e.g.: #main img {float: left; padding-right: 5px}
  

Clear prevents wrapping around an element (can only be used on floated elements)

Overflow

• Ensures that browser will know what to do with content that exceeds their allotted space. Fixed problem of overlapping divs in Firefox (IE had been more forgiving); generated scroll bar when height attribute in #main was jacked up


• Property


• Overflow Values


• Scroll


• Hidden


• Visible


• Auto


• Inherit


• Scrollable Content




• Use [div] to apply the overflow property

Day 2

Content Overview

• Introduction to Style Sheets


• Controlling Color and Typography


• Using the Cascade


• Designing Boxes


• CSS Positioning


• Enhancing Elements


• Alternate Style Sheets


• Extras

Lesson 4: Positioning

• Types of Positioning:
  
• declare preciely where you want certain elements to appear on page
• Position property- to choose type of positioning
• Absolute- from parent element
• Relative- from its normal position
• Fixed- from top-left corner of viewport
• Static- removes postioining, same as 'none'
• Coordinates of positioin controlled by 2 propoerties
• Top- vertical coordinate
• Left- horizontal coordinate
  


• Absolute Positioning
• Abosolutely positioined elements are independent of other elements
  


• Fixed Layouts


• Fluid Layouts


• Will reposition with browser size
• Can be used with fixed layouts


• Use the 'right' and 'bottom' properties
  


• Relative Positioning
  


• Position elements without disturbing other elements in document
• Elements that follow a relatively positioned itme not distrubed
• Positioned according to [its own] default position in HTML doc
  
• Will re-flow and change position with browser resizing
  
• Use position: relative, and the left, right, top, or bottom
  
• Use neg values to move elements up
  
• [cf: activity 4-6]
  


• Layered Elements
  
• Z-Index
  


• Positioning creates layers
  
• To control stacking order of overlapping items
  
• By default, last element in doc appears at top of stack
  
• Older Navigator->all items must use z-index in order for browser to recognize property
• Use positive numbers
  


• Fixed Positioining
  


• Not supported by IE--ignored


• To fix element to browser window (aka viewport)


• Allows you to keep object visible at all times


• Element revmoved from doc flow


• Fixed item won't scroll with rest of pageUse z-index property to control ...
• ....

Enhancing Design

• Scrollbars
• Microsoft scrollbar color tool; good for testing out scrollbar colors
• Cursors
  


• element: {cursor: keword;}


• element: {cursor: url("filename.cur");}


• Must be image with a .cur extension


• Not supported by Netscape, or Explrer pre-6.x


• element: {cursor: url("filename.cur"), keyword;}, ex.: a.help {cursor:url("mycursor.cur"), help;}


• Appendix E p. 233


• [cf.: Activity 5-1-,5-2]

• Link Pseudo-Classes

• Color hyperlinks at various stages

• a:link--not yet used

• a:visited--clicked links

• a:hover--when moused over

• a:active--when mouse button is down

• Should be listed in the above order to avoid browser confusion

Background Images

• Background-repeat:
  
• repeat repeat-x repeat-y no-repeat

...

Generated content

• Not supported in Explorer [but unnumbered list can achieve much the same thing in both browsers]
  
• Content specified from sytle sheet that is not specified in HTML
  
• Display text before or after an element
  
• Display image beofre or after element
• 2 pseudo-elements
  
• before and after
• Content Property
  
• element:before {content: url(filename.jpg);}
  
• element:before {content: open-quote;}
  
• element: after {content:"string of text"}
  
• ...

Enhancing Elements

• See Appendix A :first line :first letter


• Script Styleswitcher creates cookie on users harddrive. See example on CD-ROM (or snippets in book?)


• Accessiblity tools: bobby.watchfire.com


• Manipulate display properties, can change text and menu display in Windows menus, including high-contast (for color-blind) and variations in type, size, color of font, etc.

Print Styles

• Style sheet to control way page looks when printed


• use absolute measureements


• set background-color to white or shade not requireng lots of ink


• set font color to black or dark color


• link [rel="stylesheet" type="text/css" href="filename.css" media="print"] (where square brackets should be angular]

Use display: and visibility: properties to control layout and hide unnecessary items (Display removes page from flow of document, whereas visibilitiy is just what it says, where empty space replaces images or blocks ordinarily on screen)

Integrated Learning Manager:
my.newhorizons.com
TW99-BXEW3-3JGC

• Spoil date--> 8/24/05


• 6 months


• Disable Popup blocker


• AOL--> Internet Explorer