![Page 1: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/1.jpg)
Cascading Style Sheets
Robin Burke
ECT 270
![Page 2: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/2.jpg)
Outline
Midterm The Layout Debate CSS properties
Fonts Alignment Color
CSS selection selectors pseudo-classes classes, ids div and span
![Page 3: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/3.jpg)
Midterm
10/20 5:45 pm
closed-bookHTML/CSS handout distributed
![Page 4: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/4.jpg)
Group exercise
Part A
![Page 5: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/5.jpg)
The Great Layout Debate
PuristW3C
Pragmatistweb designers
![Page 6: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/6.jpg)
A solution
A separate standard for defining style Styles can be defined at different
placesdocumentsitelocal device or clientuser preference
![Page 7: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/7.jpg)
What is a style?
An association between a set of display propertiesa logical unit of HTML content
Notdocument content
Some exceptionsnumbered lists, captions, etc.
![Page 8: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/8.jpg)
Result
HTML goes back to defining structure Layout and display decisions encoded
in the stylesheet Designer can easily change page
format without affecting HTML
![Page 9: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/9.jpg)
Cascading
Author User Client Also possible to label styles as
"important"
![Page 10: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/10.jpg)
Inheritance
Elements inherit their stylessetting a style for the "body" element
changes the whole document
![Page 11: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/11.jpg)
In-line styles
part of individual tags plus
benefits of new CSS attributesstyle declared where it is used
minusdoesn't separate content from displayglobal changes not simplified
![Page 12: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/12.jpg)
Embedded style
style is declared within a given page plus
style information centralized minus
can't be reused on other pages
![Page 13: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/13.jpg)
External
a separate document "style sheet" is useddocuments link to the style sheet
plusstyle can be shared across pages
minusanother document to manage &
distribute
![Page 14: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/14.jpg)
Structure of CSS
selector { attribute:value; } Example
h1 { font-color:blue; } Multiple attribute/values pairs possible
![Page 15: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/15.jpg)
Examples
in-line style embedded style linked style
![Page 16: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/16.jpg)
CSS Rules: Fonts
Fonts are very complex platform-specific copyrighted different standards
Multi-dimensional size weight style ornament family
![Page 17: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/17.jpg)
Font families
Categories serif sans-serif monospace cursive
Specific fonts Times Roman Arial Courier
![Page 18: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/18.jpg)
font-family styles
Best practicePC font, Mac font, generic font;
Examplefont-family: Arial, Helvetica, sans-serif;
![Page 19: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/19.jpg)
Font sizes
Options Relative Absolute Units
• in, px, em, pt, pc Examples
font-size: larger font-size: 12 pt font-size: 50 px font-size: small
![Page 20: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/20.jpg)
Spacing
Can control letter and line spacingletter-spacingword-spacingline-height
![Page 21: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/21.jpg)
Alignment
text-alignhorizontal alignmentlike "align" attribute
vertical-alignlike "valign" attributebut more possibilities
![Page 22: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/22.jpg)
Other font style choices
text-weight controls boldness
text-decoration underlining, strike-through
text-transform uppercase, lowercase
font-variant small-caps
font-style italic
![Page 23: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/23.jpg)
CSS Rules: Colors
What can be colored?textbackgroundlinks
Optionscolor namesRGB triplets
• hex or decimal
![Page 24: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/24.jpg)
Text and link color
color changes the text color example
• color: rgb(153,102,6)• color: #FFEECC
links can have state-dependent colors link – unvisited visited – visited active – while being clicked hover – while the cursor is there
![Page 25: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/25.jpg)
Link colors
Handled via "pseudo-classes" relative to a elementa:linka:visited
Examplea:link { color: red; }a:visited { color: blue; }
![Page 26: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/26.jpg)
Link color example
a:link { color: red; }
a:visited { color: blue; text-decoration: none; }
a:active { font-weight: bolder; }
a:hover { color: green; }
![Page 27: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/27.jpg)
Background color
Background of any element can be setnot true in HTML
![Page 28: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/28.jpg)
Background images
Background imageslimited in HTML
• either large or tiled
With CSSTotal control over the background
image
![Page 29: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/29.jpg)
Example
Background options
![Page 30: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/30.jpg)
Lists
can choose different kinds of bullets can control nesting behavior Example
![Page 31: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/31.jpg)
CSS Rules: Selectors
any html element name element with particular attribute
td[align="center"] not implemented in IE 6.0
element relationshipsa ba > ba + b
designer-defined classes
![Page 32: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/32.jpg)
CSS Pseudo-elements
Pseudo-elementsa class name that is pre-defined but
isn't an HTML tag Example
first-linefirst-letter
![Page 33: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/33.jpg)
Example
table caption { background-color: blue;
color: white; }
tr td { background-color: yellow; }
th:first-letter { font-size:large; color: red; }
![Page 34: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/34.jpg)
CSS Classes and Ids
A class is a user-defined name identifies certain elements for styling
• li.yes
Another example code in <pre> elements
ID must be unique in document use for identify a single element to have a
particular style #id
![Page 35: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/35.jpg)
CSS Blocks
What if I have a segment that isn't an HTML element?
Examplescaption and program listingemphasized text
![Page 36: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/36.jpg)
Alignment and positioning
padding
border
margin
Block-level element
![Page 37: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/37.jpg)
Layering
Boxes can overlap each othertransparent regions will show throughlayering
• negative margin does this
Boxes can be positioned absolutelyalso causes layering
• position: absolute• specific position on page
![Page 38: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/38.jpg)
Examples
layering with margins layering with absolute positioning
![Page 39: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/39.jpg)
Frames
We can get "frame-like" appearancewith absolute positioning
![Page 40: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/40.jpg)
Example
Frame
![Page 41: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/41.jpg)
Exercise
![Page 42: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/42.jpg)
Elements
bullet.gif
picture7.gif
circlesbg.gif
confetti.gif
![Page 43: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/43.jpg)
Group exercise
Part B
![Page 44: Cascading Style Sheets Robin Burke ECT 270. Outline Midterm The Layout Debate CSS properties Fonts Alignment Color CSS selection selectors pseudo-classes](https://reader035.vdocuments.mx/reader035/viewer/2022070400/56649f145503460f94c29a60/html5/thumbnails/44.jpg)
Next week
Midterm Web design