Cascading Style Sheets II Robin Burke ECT 270

Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final project

Midterm solution

Style aspects of the page that describe its appearance, but not its logical structure Examples fonts colors positioning alignment

Cascading Style Sheets Separate style from HTML content Different ways to use in-line embedded linked Linked style most flexible

CSS Syntax selector { attribute:value; } Example h1 { font-color:blue; } Multiple attribute/values pairs possible

Fonts Typical styles for fonts font-family color font-weight background-color font-style font-decoration

Colors / Backgrounds Can use colors and backgrounds in more ways than possible in HTML background of any item Can specify color using rgb directly without hex triplet Can control tiling of background

Selectors CSS properties and values provide features to be controlled Selectors specify where in the document those styles will be applied

Types of selectors element names h1 { font-family: Courier, monospace; } element containment table tr th a { font-decoration: none; } pseudo-classes a:visited { color: blue; } not widely-available >, +, [attribute="value"]

Pseudo-elements pseudo-elements selectors ≠ HTML elements still = logical structure Example p:first-letter { color: red; } Not widely available :before, :after

Classes Selectors with user-defined behavior usually in conjunction with HTML element Inside HTML element class attribute In CSS selector = element_name.class_name Also.class_name for same class in different elements Example yes/no list items

Classes While writing HTML Identify different areas of page requiring different treatment Come up with descriptive class names for each Insert class attribute in HTML elements While writing CSS create styles for each class associate with appropriate class selector

Id Also a selector but unique to a single element Example #sidebar { background-color: grey; }

Generic blocks How to identify a chunk of content that is not an HTML element already Two options paragraph-like? Use "div" block format word-like? Use "span" in-line format

Examples

Positioning With CSS, we can control where an element appears Tables for layout not necessary in theory

Box model padding border margin Block-level element

Positioning Options normal blocks stacked vertically in-line arranged horizontally with wrapping relative calculate where the block should have been and apply offset absolute put block at a precise position float make block independent and wrap other content around it

Layering Boxes can overlap each other transparent regions will show through To achieve negative margin absolute or relative position on top

Examples layering with margins layering with absolute positioning

Frames We can get "frame-like" appearance with absolute positioning

Example Frame

Exercise

Elements bullet.gif picture7.gif circlesbg.gif confetti.gif

Final Project Tourism site Requirements (9 pages total) Home page Order form Slide show Presentation 6/9 Must use CSS Javascript

Final Project Milestones 5/12 Proposal: destination / team members 5/26 Last day for design review 6/9 Presentations (8:45 am) Must all be present