Cascading Style Sheets II

1
Cascading Style Sheets II

• Robin Burke
• ECT 270

2
Outline

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

3
Midterm solution
4
Style

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

5
Cascading Style Sheets

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

6
CSS Syntax

• selector attributevalue
• Example
• h1 font-colorblue
• Multiple attribute/values pairs possible

7
Fonts

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

8
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

9
Selectors

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

10
Types of selectors

• element names
• h1 font-family Courier, monospace
• element containment
• table tr th a font-decoration none
• pseudo-classes
• avisited color blue
• not widely-available
• gt, , attribute"value"

11
Pseudo-elements

• pseudo-elements
• selectors ? HTML elements
• still logical structure
• Example
• pfirst-letter color red
• Not widely available
• before, after

12
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

13
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

14
Id

• Also a selector
• but unique to a single element
• Example
• sidebar background-color grey

15
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

16
Examples
17
Positioning

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

18
Box model
Block-level element
padding
margin
border
19
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

20
Layering

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

21
Examples

• layering with margins
• layering with absolute positioning

22
Frames

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

23
Example

• Frame

24
Exercise
25
Elements
bullet.gif
confetti.gif
picture7.gif
circlesbg.gif
26
Final Project

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

27
Final Project Milestones

• 5/12
• Proposal destination / team members
• 5/26
• Last day for design review
• 6/9
• Presentations (845 am)
• Must all be present