Introduction to Programming
the WWW I
CMSC 10100-1
Summer 2004
Lecture 7
Today’s Topics
• Cascading Style Sheet
2
HTML Forms
• HTML Forms are used to select different kinds of
•
user input, defined with <form> tag
Form contains form elements to allow the user to
enter information





text fields
textarea fields
drop-down menus
radio buttons
checkboxes, etc
• A Web page can contain one or multiple forms
 Identified by id or name attribute
3
What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define extra information about how
to display HTML elements
• Styles are normally stored in Style Sheets
• Multiple style definitions will cascade into
one
4
What is CSS? (cont’d)
• Incorporated in HTML only at 4.0
 Removes formatting from HTML, leaving it to be a
structure/content language
• HTML 1.0 – structure tags only
 HTML tags were originally designed to define the content of a
document
• HTML 2.0/3.2 – structure tags mixed with formatting tags
• HTML 4.0 + CSS – structure tags only in HTML 4.0 and CSS
handles formatting
 Two levels of CSS: CSS1 and CSS2
• Why use CSS? Scalability!
• CSS Demos:
• http://www.w3schools.com/css/demo_default.htm
• http://www.csszengarden.com/ (thanks Carl)
5
Some Important Preliminaries
• Containment
 Examples: containment.html
• <div> tag
 Block-level tag to group the contained elements
together
 Example: div-usage.html
• <span> tag
 Inline version of <div> to group inline elements
 Useful to format tag-less styles
 Example: span example
6
Creating Your Own Style
Rules
• A CSS rule consists:
 Selector
 Declaration: pairs of properties and values
• separated with semicolon
• put quotes around a value if it is multiple words
• Rule examples
H1 {font-family : Arial, sans-serif;}
P {
font-family : “Times new roman", serif;
color : red; text-align: left;
}
• Example: listing1-1.html
7
HTML Element Selectors
• Designate style for one or more HTML tags
h1, h2, h3, h4, h5, h6 {
font-family : arial, sans-serif;
color : blue; text-align: center;
}
• Contextual Selectors
 To combine multiple HTML element selectors
 E.g: making bold text within paragraphs maroon
p b {color : maroon}
 Contextual dependencies can be nested further
div.warning h1 em { color: green; }
• Example:
 listing1-4.html
8
Class Selectors
• Apply styles to several elements on a page
• Class selector begins with a period
 E.g:
.isgreen {color: green}
• Reference the class name in the HTML
 E.g:
<h1 class=“isgreen”>This will appear green.<h1>
• Can also create subclasses for HTML
elements:
 Can define different styles for a same HTML
element
 E.g:
h1.isblue {color: blue}
h1.isred {color: red}
9
ID Selectors
• Applies rules to HTML content by ID
• Class selector begins with a “#”
 E.g:
#silverware {color: silver}
• Reference the ID in the HTML
 E.g:
<h1 id=“silverware ”>This will appear silver.<h1>
• ID selector enables you to identify an element
to be an *unique instance* in a document
 Apply an ID selector to only ONE element
 Useful in JavaScript
10
Pseudo-Classes
• Display the same element differently in various
•
states
Typically used to indicate the state of a link
a:link { color: blue }
a:visited { color: black }
a:active { color: green }
a:hover { color: red }
• HTML selector and its pseudo separated by “:”
• Mix pseudo-classes with regular class
• Example: listing1-4-2.html
11
Pseudo-Elements
• Allow you to set a style on a subpart of an
•
element
Use case:
 The first character of a line
p:first-letter { }
p.dropcap:first-letter { }
 The first line of a paragraph
p.greenstart:first-line { }
• Example:
 Pseudo-element.html
12
CSS Comments
• A CSS comment begins with "/*", and ends
with "*/"
• Example:
/* This is a comment */
p{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
13
Placing Style Sheets 1
• Inline Style Sheets
 Applies to a single element
<p style="color : silver">some text goes
here.</p>
 Discouraged by the W3C
 Example: listing1-7.html
14
Placing Style Sheets 2
• Internal Style Sheets
 Placed in the HTML head element using <style> tag
• Set type attribute to “text/css” for <style> tag
 Applies to a single page
 Example: listing1-4-1.html
<head>
<style type="text/css">
<!-h1, h2, h3, h4, h5, h6 {
font-family : arial, sans-serif;
color : blue; text-align: center; }
p b {color : maroon;}
.isgreen {color : green;}
-->
</style>
</head>
15
External Style Sheets
• Store style rules in an external plain text file (CSS file)
• Reference the external file using a <link> tag in HTML head
element
 Syntax
<link rel=“stylesheet” type=“text/css” href=“location_of_stylesheet”>
 The alternative: using @import declaration in <style> tag
• Syntax:
<style>
@import url(location_of_stylesheet)
</style>
 A single HTML page can refer to multiple external style sheets
• Great for consistent styling on large sites
• Example: listing1-5.html using myfirststyle.css
16
Style Cascading Order
• What style will be used when there is
more than one style specified for an
HTML element?
High Priority
Inline Style (inside HTML element)
Internal Style Sheet (inside the <head> tag)
External Style Sheet
Browser default
Low Priority
17
What can CSS control?
• Fonts (color, size, caps, font, etc)
• Background (image, color, tiling properties)
• Text (spacing, line-height, alignment, decoration,
•
•
•
•
word-spacing)
Box properties (border, margin, padding)
List properties (image for bullets)
Links (visited, hover, active, link)
Example: listing1-6.html
18
CSS1 Properties
Specification
• Units




Length Units
Percentage Units
Color Units
URLs
• Units references
• Units examples
• Font Properties






Font Family
Font Style
Font Variant
Font Weight
Font Size
Font
• Font examples
19
CSS1 Properties
Specification (cont’d)
• Color and Background
Properties







Color
Background Color
Background Image
Background Repeat
Background Attachment
Background Position
Background
• Color examples
• Background examples
• Text Properties








Word Spacing
Letter Spacing
Text Decoration
Vertical Alignment
Text Transformation
Text Alignment
Text Indentation
Line Height
• Text examples
20
CSS Formatting Model
• Each element in CSS is considered to be
bounded by a box
• The content of the element is surrounded
by a padding, border, and margin
• The margin and padding are transparent,
but the borders may be given a style and
color
• css-fmt.html
21
CSS1 Properties
Specification (cont’d)
• Border Properties








Top Border Width
Bottom Border Width
Left Border Width
Right Border Width
Top Border
Bottom Border
Left Border
•
Right Border




Border Width
Border Color
Border Style
Border
Border examples
22
CSS1 Properties
Specification (cont’d)
• Margin Properties





Top Margin
Right Margin
Bottom Margin
Left Margin
Margin
• Margin examples
• Padding Properties





Top Padding
Right Padding
Bottom Padding
Left Padding
Padding
• Padding examples
23
CSS1 Properties
Specification (cont’d)
• Classification
Properties






Display
Whitespace
List Style Type
List Style Image
List Style Position
List Style
• List examples
24
More CSS1 stuff
• Online CSS resources
 http://www.w3c.org/Style/CSS
• Check W3C’s CSS1 document
 A more detailed overview from Dave Raggett
 See CNET builder.com’s reference for details
• CSS validation service
 http://jigsaw.w3.org/css-validator/validator-uri.html
• You can point your browser to CSS files to look
at what’s going on
25
CSS2
• CSS2 is an extension of CSS1
 Adds content positioning:
• absolute (and fixed) vs. relative
• specify coordinates (relative to top left of box)
• z-index: for saying what’s on top when things are
stacked
 Bigger value has higher priority
 The clip, overflow, visibility properties
26
CSS2 approach
• Make each section of the page a separate
<div> with an ID
• Use positioning for ID selectors,
background colors, etc (exact control)
• Only need to include HTML, not formatting
information on each page
27
The Position Property
• Content positioning
 Old solution: graphics version of the content
• CSS2 solution is more efficient
 Example: listing2-1.html
 1.9K/0.3sec vs. 40K/8sec
• Absolute positioning & Relative positioning
 Example: listing2-3.html
• More examples at w3school.com
28
The Visibility Property
• Use visibility property to hide element
 set the visibility property to hidden
• Example: visibility.html
29
The Overflow Property
• CSS2 enable customizing the size of the
bounding box of any block-level element
• Overflow content is handled by overflow
property
visible, hidden, scroll, auto
• Example: overflow.html
30
The Clip Property
• CSS2 permits cropping an image or other
element
 Example:
img
{
clip: rect(10px, 5px, 10px, 5px);/*top,right,bottom,left*/
}
• Applied only to absolutely positioned elements
• Examples:
 cliporiginal.html
 clipcropped.html
31
CSS Differences between IE
and Mozilla
• Your homework will be evaluated in both
IE and Mozilla residing at the Mac
Machines in MacLab
• Different browser may show different
effects for the same style sheet
• Example:
 css2.html (open in both IE and Mozilla (NN))
32