Computer Science 302:

Web Development

Gregory M. Kapfhammer

Up right corner flickr photo by vincentag shared under a Creative Commons (BY-NC-ND) license

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

flickr photo by SaurabhChatterjee shared under a Creative Commons (BY-NC-ND) license

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook


Find CSS in past assignment

Benefits of CSS

Browser adoption

CSS Syntax

CSS Syntax

Selectors: tag to modify

Properties: characteristic of tag

Values: how to modify the property

Relative and absolute units

What is a pixel?

What is an em unit?

Strategy: adjust and check

See Table 4.3 for more details

Where do I place the styles?

Inline styles

Embedded style sheet

External style sheet

Which used in past assignments?

Different ways to apply CSS rules

Use Developer Tools to see which applies

Which CSS rule applies?

How Styles Interact




Bounding Boxes in Web Sites

Use Developer Tools to see the boxes

Styling Boxes






Margins? Padding? Huh?

Margins add spacing around elements

Padding adds spacing within elements

What if content overflows the box?

Absolute or percentage sizing

Text styling

What are ways in which we can style the text?

Text styling

Font family

Font size

Web fonts

Paragraph properties

"A vital component of modern web sites"

Any questions about CSS basics?