Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 7

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; }


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">



</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)


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)


• 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



• 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



• 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



• 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))

Documents

Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 7