HTML CSS Basics

9,032 views

Published on

A step by step presentation to HTML and CSS

Published in: Design, Technology
6 Comments
37 Likes
Statistics
Notes
No Downloads
Views
Total views
9,032
On SlideShare
0
From Embeds
0
Number of Embeds
302
Actions
Shares
0
Downloads
1,679
Comments
6
Likes
37
Embeds 0
No embeds

No notes for slide

HTML CSS Basics

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

×