MCS 270 HTML and CSS HTML and CSS

MCS 270

HTML and CSS

HTML and CSS

HTML and CSS

CSS

CSS Example

Basic. html

Basic. html

Basic. html

Basic. html

Basic. html

CSS Example

CSS Example

CSS Example

my. Style 2. css body { padding-left: 11 em; color: purple; background-color: #d 8 da 3 d } ul. navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2 em; left: 1 em; width: 9 em }

CSS Example

CSS Example

CSS Basics - Rules

CSS Basics - Rules

CSS Basics - Rules

CSS Basics - Rules

Three ways to add style rules

External Style Sheet

my. Style 2. css body { padding-left: 11 em; color: purple; background-color: #d 8 da 3 d } ul. navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2 em; left: 1 em; width: 9 em }

Anatomy of a CSS Rule

CSS <-> HTML

CSS Color Specifiers

CSS Practice

CSS for Page Layout

Block Level Elements

CSS Default Layout Order

Simple Example – Simple. Divs. html

Working With Ids

Simple Example- with style file

Simple Example – with style file

CSS Measurement Units

What’s a Div? ?

CSS Box Model

Simple Example – Box Model

Simple Example – Box Model

Floats: Positioning CSS Boxes

Simple Example – Float left

Simple Example – Float left

Simple Example – Float left

Simple Example – Float left

Float Values

Simple Example – Clear left

Simple Example – Clear left

CSS Positioning

CSS Positioning: Relative Positioning

CSS Positioning: Relative Positioning

CSS Positioning: Absolute Positioning

CSS Positioning: Absolute Positioning

Simple Example – Positioning

Simple Example – Positioning

Simple Example – Positioning

CSS Page Layout Example

Two Column Page Layout

Two Column Page Layout

When to Use a class vs id

CSS Practice