COMS 359: Interactive Media
Agenda
• Prototype (Ex #4)
• Review
• Text & HTML5 Layout
• Preview
Review
• CSS for lists
– list-style-type
– Image bullet point
• list-style-image:url(“image.jpg”)
<ul>
none
disc (default)
circle
square
<ol>
1 2 3 decimal (default)
01 02 03 decimal-leading-zero
a b c lower-alpha
A B C upper-alpha
i ii iii lower-roman
I II III upper-roman
Review
• CSS for color / 4 Methods1. Hexidecimal – #66cdaa
2. RGB values – rgb(102,205,170)
3. Color names – Aquamarine
4. HSV – Hue, Saturation, Brightness
Range = 00 to ff
Range = 0 to 255
Range = 147 options
Hue = 0 to 360°
S&B = 0 to 100%
Review – CSS for Images
• Image Size
– width & height
• Box properties
– border-style | border-width | border-color
– border-radius:15px
– margin:10px | padding:4px
• Alignment
– float:left / float:right
– Center: display:block; margin:auto
Review – Background Image
• background-image
– url(“wlogo.png”)
• background-repeat
– repeat | no-repeat | repeat-x | repeat-y
• background-attachment
– fixed | scroll
• background-position
– top center bottom | left center right
– % | px
http://gunkelweb.com/coms359/exercise/wlogo.png
Exercise #5
background-repeat: repeat background-repeat: no-repeat
background-repeat: repeat-y background-repeat: repeat-x
background-attachment: scroll
background-attachment: fixed
background-position: 220px 200px
background-position: bottom bottom
background-position: 10% 55%
Background Images
• CSS3 Gradient
– Apply a color gradient to any
CSS box background
– New feature = limited
browser support
– Syntax
Text
• Typeface Terminology
serif sans-serif monospace
im im im
Text
• Typeface Terminology
weight style stretch
light
medium
bold
Normal
Italic
Oblique
Condensed
Regular
E x t e n d e d
Text
• Three Methods for Typeface
Web-safe Font
- Good support
- Limited options
- OS dependent
Download Font
- More options
- Not directly
supported
- © / open source
Images
- Many options
- Image based
- No semantic
data (ALT)
Arial
Times RomanCourier
Bauhaus
Script
Colonna
Text
• Web-Safe Font
– font-family
serif
GeorgiaTimes Roman
sans-serif
Arial
Helvetica
Verdana
monospace
Courier
Courier New
cursive
Comic Sans MSMonotype Corsiva
fantasy
Impact
Haettenschweiler
Text
• font-family
– Basic
– Font-stack
Exercise #1
http://gunkelweb.com/coms359/exercise/css_color.html
http://gunkelweb.com/coms359/exercise/css_color.html
http://gunkelweb.com/coms359/exercise/css_color.html
http://gunkelweb.com/coms359/exercise/css_color.html
Text• text-align
– left | center | right | justify
– p {text-align: center}
• font-style
– normal | italic | oblique
– p {font-style: italic}
• font-weight
– normal | bold
– h1 {font-weight: bold}
• font-variant
– normal | small-caps
Text
• font-size
– Absolute size = points (pt), pixels (px), cm, ems
• p {font-size: 30pt}
• p {font-size: 30ems}
• p {font-size: 18px}
– Relative sizes = % Percentage
• default font-size is 16px
• 150% is 1½ times larger than the default
• 50% is ½ smaller than the default
• p {font-size: 150%}
Exercise #2
Text
• font-stretch
– normal | condensed | expanded
– h1 {font-stretch: condensed}
• text-transform
– uppercase | lowercase | capitalize
– h1 {text-transform:uppercase}
• text-decoration
– None | underline | overline | line-through | blink
– h2 {text-decoration:underline}
Text
• text-indent
– px | ems | cm
• text-shadow– horizontal offset, vertical offset, blur value, color
– h1 {text-shadow: 2px 2px 0px #333333}
• line-height
– px | ems | cm
• letter-spacing, word-spacing
– px | ems | cm
Exercise #3
Text
• :first-letter & :first-line
– Specify different values for the first letter and first line
of text inside an element
– Example
Exercise #4
Text
• @font-face
– Expanded font options
– Properties
• font-family = name of the font
• src = the URL or path to the font file
• format = specifies the format of the font file
– Sources
• http://www.fontsquirrel.com (open access)
• http://fontex.org (open access)
• http://typekit.com (proprietary)
1. Download and install font package
2. Write CSS to use this font
Text
http://www.google.com/fonts
Google Fonts- Alternative approach
- Link to a Google stylesheet
- Free to use; easy to code
<link> element to
add to your HTML
css code to add to
your stylesheet
Exercise #5
Modify the href of the first <link>
element to a new value – fontstyle2.css
Exercise #5
Copy and paste a second <link> element
from the Google Fonts website.
Exercise #5
Write the stylesheet; copy and paste the
css code from the Google Fonts website
Exercise #5
Text
• Selecting Font
– Readability
– Character of the content
– Functionality
Text
Hypertext
• Pseudo classes for styling hypertext
– :link
– :visited
– :active
– :hover
Exercise #6
Exercise #6
HTML5 Layout
• Page Layout with CSS
– Use <div> tags to identify
different parts of the html
document
– Apply style to these <div>
elements in the stylesheet by
creating different classes
– Position the <div> elements
by using positioning
<body>
<div class=“header”>
<div class=“navigation”>
<div class=“content”>
<div class=“footer”>
<body>
<div class=“header”>
<div class=“navigation”>
<div class=“content”>
<div class=“footer”>
HTML5 Layout
• New Elements
– <header>
– <article>
– <nav>
– <footer>
Purpose/Benefit• Structure the html document
without having to use multiple
<div> tags
• Semantic data useful for web 2.0
applications like data mashups
and content aggregators
• <div> is content neutral and
generic; the new HTML 5 tags
designate not only structural page
elements but their meaning within
the page content.
<body>
<header>
<nav>
<article>
<footer>
Preview
• Meta-Information & Search Engine Optimization
– Duckett - ch. 8: Extra Markup (pp. 176-198)
– Duckett - ch. 19: Practical Information (pp. 476-492)
– Miller - ch. 8: Search Engine Optimization (pp. 200-217)
– Miller - ch. 10: Analysis (pp. 248-255)
– Google - Search Engine Optimization Starter Guide