Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-1
Summer 2004
Lecture 7
2
Today’s TopicsToday’s Topics
• Cascading Style Sheet
3
HTML FormsHTML 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
4
What is CSS?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
5
What is CSS? (cont’d)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)
6
Some Important PreliminariesSome 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
7
Creating Your Own Style Rules
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 examplesH1 {font-family : Arial, sans-serif;}P { font-family : “Times new roman", serif; color : red; text-align: left;
}
• Example: listing1-1.html
8
HTML Element SelectorsHTML 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
9
Class SelectorsClass 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}
10
ID SelectorsID 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
11
Pseudo-ClassesPseudo-Classes
• Display the same element differently in various states
• Typically used to indicate the state of a linka: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
12
Pseudo-ElementsPseudo-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 paragraphp.greenstart:first-line { }
• Example: Pseudo-element.html
13
CSS CommentsCSS 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
}
14
Placing Style Sheets 1Placing 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
15
Placing Style Sheets 2Placing 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>
16
External Style SheetsExternal 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
17
Style Cascading OrderStyle Cascading Order
• What style will be used when there is more than one style specified for an HTML element?
Inline Style (inside HTML element)
Internal Style Sheet (inside the <head> tag)
External Style Sheet
Browser default
High Priority
Low Priority
18
What can CSS control?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
19
CSS1 Properties Specification
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
20
CSS1 Properties Specification (cont’d)
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
21
CSS Formatting ModelCSS 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
22
CSS1 Properties Specification (cont’d)
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
23
CSS1 Properties Specification (cont’d)
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
24
CSS1 Properties Specification (cont’d)
CSS1 Properties Specification (cont’d)
• Classification Properties Display Whitespace List Style Type List Style Image List Style Position List Style
• List examples
25
More CSS1 stuffMore 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
26
CSS2CSS2
• 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
27
CSS2 approachCSS2 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
28
The Position PropertyThe 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
29
The Visibility PropertyThe Visibility Property
• Use visibility property to hide element set the visibility property to hidden
• Example: visibility.html
30
The Overflow PropertyThe 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
31
The Clip PropertyThe 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
32
CSS Differences between IE and Mozilla
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))