cascading style sheets ii robin burke ect 270. outline midterm solution css review css selection...
TRANSCRIPT
![Page 1: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/1.jpg)
Cascading Style Sheets II
Robin Burke
ECT 270
![Page 2: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/2.jpg)
Outline
Midterm solution CSS review CSS selection
selectors pseudo-classes classes, ids div and span
Final project
![Page 3: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/3.jpg)
Midterm solution
![Page 4: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/4.jpg)
Style
aspects of the page that describe its appearance, but not its logical structure
Examplesfontscolorspositioningalignment
![Page 5: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/5.jpg)
Cascading Style Sheets
Separate style from HTML content Different ways to use
in-lineembeddedlinked
Linked style most flexible
![Page 6: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/6.jpg)
CSS Syntax
selector { attribute:value; } Example
h1 { font-color:blue; } Multiple attribute/values pairs possible
![Page 7: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/7.jpg)
Fonts
Typical styles for fontsfont-familycolorfont-weightbackground-colorfont-stylefont-decoration
![Page 8: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/8.jpg)
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
![Page 9: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/9.jpg)
Selectors
CSS properties and values provide features to be controlled
Selectors specify where in the document those styles will be applied
![Page 10: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/10.jpg)
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"]
![Page 11: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/11.jpg)
Pseudo-elements
pseudo-elementsselectors ≠ HTML elementsstill = logical structure
Examplep:first-letter { color: red; }
Not widely available:before, :after
![Page 12: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/12.jpg)
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
![Page 13: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/13.jpg)
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
![Page 14: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/14.jpg)
Id
Also a selectorbut unique to a single element
Example#sidebar { background-color: grey; }
![Page 15: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/15.jpg)
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
![Page 16: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/16.jpg)
Examples
![Page 17: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/17.jpg)
Positioning
With CSS, we can control where an element appears
Tables for layout not necessaryin theory
![Page 18: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/18.jpg)
Box model
padding
border
margin
Block-level element
![Page 19: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/19.jpg)
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
![Page 20: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/20.jpg)
Layering
Boxes can overlap each othertransparent regions will show through
To achievenegative marginabsolute or relative position on top
![Page 21: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/21.jpg)
Examples
layering with margins layering with absolute positioning
![Page 22: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/22.jpg)
Frames
We can get "frame-like" appearancewith absolute positioning
![Page 23: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/23.jpg)
Example
Frame
![Page 24: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/24.jpg)
Exercise
![Page 25: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/25.jpg)
Elements
bullet.gif
picture7.gif
circlesbg.gif
confetti.gif
![Page 26: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/26.jpg)
Final Project
Tourism site Requirements (9 pages total)
Home page Order form Slide show
Presentation 6/9 Must use
CSS Javascript
![Page 27: Cascading Style Sheets II Robin Burke ECT 270. Outline Midterm solution CSS review CSS selection selectors pseudo-classes classes, ids div and span Final](https://reader031.vdocument.in/reader031/viewer/2022012402/56649f065503460f94c1bd27/html5/thumbnails/27.jpg)
Final Project Milestones
5/12Proposal: destination / team members
5/26Last day for design review
6/9Presentations (8:45 am)Must all be present