html css basics
DESCRIPTION
A step by step presentation to HTML and CSSTRANSCRIPT
![Page 1: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/1.jpg)
HTML / CSS Mai Moustafa
Senior Web Designer
eSpace
eSpace
![Page 2: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/2.jpg)
eSpace
Website layers
Behavior (JS)
Presentation (CSS)
Content (HTML)
![Page 3: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/3.jpg)
eSpace
Website Users
Semantic
Disabilities
Normal
Search Engine
![Page 4: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/4.jpg)
HTML
eSpace
![Page 5: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/5.jpg)
eSpace
What is HTML?
Link
Link
Link
Hyper Text Markup Language
![Page 6: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/6.jpg)
eSpace
Tags
![Page 7: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/7.jpg)
eSpace
Nested Tags
![Page 8: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/8.jpg)
eSpace
Basic Structure
![Page 9: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/9.jpg)
Head
eSpace
![Page 10: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/10.jpg)
Preview
eSpace
![Page 11: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/11.jpg)
Body
eSpace
![Page 12: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/12.jpg)
Preview
eSpace
![Page 13: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/13.jpg)
Headers
eSpace
![Page 14: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/14.jpg)
Preview
eSpace
![Page 15: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/15.jpg)
Paragraph
eSpace
![Page 16: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/16.jpg)
Preview
eSpace
![Page 17: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/17.jpg)
Lists
eSpace
![Page 18: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/18.jpg)
Preview
eSpace
![Page 19: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/19.jpg)
Div
eSpace
![Page 20: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/20.jpg)
Preview
eSpace
![Page 21: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/21.jpg)
Block elements
eSpace
![Page 22: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/22.jpg)
Inline elements
eSpace
![Page 23: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/23.jpg)
Preview
eSpace
![Page 24: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/24.jpg)
More Inline elements
eSpace
![Page 25: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/25.jpg)
Preview
eSpace
![Page 26: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/26.jpg)
Attribute
eSpace
Add more info to tag
![Page 27: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/27.jpg)
Preview
eSpace
![Page 28: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/28.jpg)
HTML 5 tags
eSpace
![Page 29: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/29.jpg)
eSpace
Semantic
Content
Text Media
![Page 30: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/30.jpg)
CSS
eSpace
![Page 31: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/31.jpg)
What is CSS?
eSpace
Styles1 Styles2 Styles3
Cascading Style Sheets
![Page 32: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/32.jpg)
How to use it?
eSpace
![Page 33: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/33.jpg)
Rules
eSpace
![Page 34: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/34.jpg)
Selectors
eSpace
p
.name
#name
Element
Class
Id
![Page 35: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/35.jpg)
Element Selector
eSpace
![Page 36: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/36.jpg)
Preview
eSpace
![Page 37: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/37.jpg)
Class Selector
eSpace
![Page 38: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/38.jpg)
Preview
eSpace
![Page 39: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/39.jpg)
ID Selector
eSpace
![Page 40: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/40.jpg)
Preview
eSpace
![Page 41: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/41.jpg)
2 Rules
eSpace
![Page 42: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/42.jpg)
Preview
eSpace
![Page 43: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/43.jpg)
Specificity
eSpace
1
10
100
Element
Class
Id
![Page 44: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/44.jpg)
Class VS ID
eSpace
Class
•Use a lot
•Lower specificity
ID
•Use once
•Higher specificity
![Page 45: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/45.jpg)
Descendent Selector
eSpace
![Page 46: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/46.jpg)
Preview
eSpace
![Page 47: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/47.jpg)
Naming
eSpace
![Page 48: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/48.jpg)
Box Model (Block)
eSpace
![Page 49: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/49.jpg)
Box Model (Block)
eSpace
![Page 50: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/50.jpg)
Box Model (Block)
eSpace
![Page 51: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/51.jpg)
Preview
eSpace
![Page 52: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/52.jpg)
Margin collapse
eSpace
![Page 53: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/53.jpg)
Margin collapse
eSpace
![Page 54: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/54.jpg)
Box Model (Inline)
eSpace
![Page 55: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/55.jpg)
Box Model (Inline)
eSpace
![Page 56: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/56.jpg)
Preview
eSpace
![Page 57: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/57.jpg)
Relative Position
eSpace
![Page 58: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/58.jpg)
Absolute Position
eSpace
![Page 59: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/59.jpg)
Fixed Position
eSpace
![Page 60: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/60.jpg)
Float
eSpace
![Page 61: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/61.jpg)
Float
eSpace
![Page 62: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/62.jpg)
Assignment
eSpace
![Page 63: HTML CSS Basics](https://reader030.vdocuments.site/reader030/viewer/2022013114/54c741184a7959ae048b45ba/html5/thumbnails/63.jpg)
eSpace
Thanks