HTML / CSS Mai Moustafa

Senior Web Designer

eSpace

eSpace

eSpace

Website layers

Behavior (JS)

Presentation (CSS)

Content (HTML)

eSpace

Website Users

Semantic

Disabilities

Normal

Search Engine

HTML

eSpace

eSpace

What is HTML?

Link

Link

Link

Hyper Text Markup Language

eSpace

Tags

eSpace

Nested Tags

eSpace

Basic Structure

Head

eSpace

Preview

eSpace

Body

eSpace

Preview

eSpace

Headers

eSpace

Preview

eSpace

Paragraph

eSpace

Preview

eSpace

Lists

eSpace

Preview

eSpace

Div

eSpace

Preview

eSpace

Block elements

eSpace

Inline elements

eSpace

Preview

eSpace

More Inline elements

eSpace

Preview

eSpace

Attribute

eSpace

Add more info to tag

Preview

eSpace

HTML 5 tags

eSpace

eSpace

Semantic

Content

Text Media

CSS

eSpace

What is CSS?

eSpace

Styles1 Styles2 Styles3

Cascading Style Sheets

How to use it?

eSpace

Rules

eSpace

Selectors

eSpace

p

.name

#name

Element

Class

Id

Element Selector

eSpace

Preview

eSpace

Class Selector

eSpace

Preview

eSpace

ID Selector

eSpace

Preview

eSpace

2 Rules

eSpace

Preview

eSpace

Specificity

eSpace

1

10

100

Element

Class

Id

Class VS ID

eSpace

Class

•Use a lot

•Lower specificity

ID

•Use once

•Higher specificity

Descendent Selector

eSpace

Preview

eSpace

Naming

eSpace

Box Model (Block)

eSpace

Box Model (Block)

eSpace

Box Model (Block)

eSpace

Preview

eSpace

Margin collapse

eSpace

Margin collapse

eSpace

Box Model (Inline)

eSpace

Box Model (Inline)

eSpace

Preview

eSpace

Relative Position

eSpace

Absolute Position

eSpace

Fixed Position

eSpace

Float

eSpace

Float

eSpace

Assignment

eSpace

eSpace

Thanks