cascading style sheets ii robin burke ect 270. outline midterm solution css review css selection...
TRANSCRIPT
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
Examplesfontscolorspositioningalignment
Cascading Style Sheets
Separate style from HTML content Different ways to use
in-lineembeddedlinked
Linked style most flexible
CSS Syntax
selector { attribute:value; } Example
h1 { font-color:blue; } Multiple attribute/values pairs possible
Fonts
Typical styles for fontsfont-familycolorfont-weightbackground-colorfont-stylefont-decoration
Colors / Backgrounds
Can use colors and backgrounds in more ways than possible in HTMLbackground 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 namesh1 { font-family: Courier, monospace; }
element containmenttable tr th a { font-decoration: none; }
pseudo-classesa:visited { color: blue; }
not widely-available>, +, [attribute="value"]
Pseudo-elements
pseudo-elementsselectors ≠ HTML elementsstill = logical structure
Examplep: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 selectorbut unique to a single element
Example#sidebar { background-color: grey; }
Generic blocks
How to identify a chunk of contentthat is not an HTML element already
Two optionsparagraph-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 necessaryin 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 othertransparent regions will show through
To achievenegative marginabsolute or relative position on top
Examples
layering with margins layering with absolute positioning
Frames
We can get "frame-like" appearancewith 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/12Proposal: destination / team members
5/26Last day for design review
6/9Presentations (8:45 am)Must all be present