Computer Science 103:

Web Development

Gregory M. Kapfhammer

Keep in Touch!

Course Web Site

Office Hours

Teaching Assistants

Slack Communication

Relevant Tweets

Email Communication

Color Scheme

Key Concept

Corresponding Diagram

In-Class Discussion

In-Class Activity

Details in the Textbook

CSS

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

Inheritance

Specificity

Location

Bounding Boxes in Web Sites

Use Developer Tools to see the boxes

Styling Boxes

Background

Borders

Margins

Padding

Dimensions

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?