Apply multiple CSS classes + write notes with code comments

Multiple CSS classes can be applied to one element. See how. Plus learn how to write notes within your code with CSS code comments.

  • Beginner
  • 3 min
View demo ↗Download source code ↗
Course overview

Course content

71 lessons
  1. 1Tools you need for the HTML/CSS course1:59
  2. 2Overview of the VS Code Text Editor4:57
  3. 3Code your first webpage3:59
  4. 4What is HTML Really?3:16
  5. 5What does HTML look like?2:46
  6. 6HTML Elements7:20
  7. 7HTML Elements - Continued3:36
  8. 8Common HTML Elements (Cheatsheet included)3:26
  9. 9HTML is a forgiving language3:47
  10. 10Basic Markup of HTML5:18
  11. 11The <h1>...<h6>, <i> and <strong> elements5:18
  12. 12Learn to link webpages via the anchor <a> element4:04
  13. 13Relative vs Absolute Paths - linking continued5:50
  14. 14<div> and <span> elements6:36
  15. 15Making lists in HTML via <ul>, <ol> and <li> elements5:36
  16. 16Making nested lists + Homework4:31
  17. 17Adding special characters in your webpage5:50
  18. 18Emmet shortcuts and code comments3:37
  19. 19<meta> elements and what they are about3:19
  20. 20<meta> description and keyword elements for SEO3:33
  21. 21<blockquote> and <pre> elements for special text formatting5:43
  22. 22Adding images with the <img> element5:11
  23. 23Using <video> and <audio> elements5:56
  24. 24Semantic Elements + Homework4:26
  25. 25Intro to CSS - Making the webpages beautiful4:22
  26. 26Intro to CSS continued4:10
  27. 27<style> element & using CSS selectors5:38
  28. 28Organize your CSS is its own file4:55
  29. 29CSS id selector (# hash sign)4:20
  30. 30CSS class selector (. dot sign)3:52
  31. 31Select all elements with asterisk (*) selector0:58
  32. 32Using multiple selectors together (using comma and more)4:40
  33. 33CSS Combinators selectors (~ + > etc.)7:50
  34. 34Pseudo Selectors (:visited: :hover :active :focus)6:04
  35. 35Chrome Developer Tools - Intro6:43
  36. 36Colors in CSS3:19
  37. 37Apply multiple CSS classes + write notes with code comments2:59
  38. 38Fonts: Change & add custom fonts6:20
  39. 39Background CSS Property. Change color, images and more7:39
  40. 40Common CSS Units - (px, em, rem, %)7:01
  41. 41Common CSS Units - (rem)2:39
  42. 42CSS Margin and Padding9:49
  43. 43CSS border property4:00
  44. 44CSS border style2:05
  45. 45Size elements with 'width' and 'height' property3:21
  46. 46Use 'box-sizing' for more control on element sizing3:43
  47. 47'border-radius' Curve borders and make custom shapes.7:58
  48. 48<div> vs <span> the real difference4:36
  49. 49Using 'display' property of CSS & 'inline-block'3:19
  50. 50'float' & 'clear' property - Moving elements around.4:38
  51. 51Hide content with `overflow`, `visibility` and `display` property3:36
  52. 52Clearfix: Hack to fix webpage spacing issue3:51
  53. 53Project: Blog Design - Create beautiful looking website5:20
  54. 54Project: Blog Design (Part 2/7) - Layout the HTML9:09
  55. 55Project: Blog Design (Part 3/7) - Styling the header4:01
  56. 56Project: Blog Design (Part 4/7) - Styling main and footer area4:02
  57. 57Project: Blog Design (Part 5/7) - Styling sidebar3:10
  58. 58Project: Blog Design (Part 6/7) - Styling articles2:17
  59. 59Project: Blog Design (Part 7/7) - Additional Pages5:13
  60. 60'position' - Control element position within your page8:10
  61. 61Project: Coupon (using `absolute` & `relative` position)5:21
  62. 62CSS Flexbox & CSS Grid - More layout methods3:02
  63. 63CSS Priority Order6:04
  64. 64Additional Resources - Codepen + HTML Cheatsheet5:18
  65. 65<table> Making tables in HTML5:32
  66. 66<table> Making tables in HTML continued2:41
  67. 67<iframe> Embedding other webpages in your webpage4:16
  68. 68Creating forms and understanding how they work11:17
  69. 69Creating form - continued6:41
  70. 70Using external CSS libraries in your projects6:42
  71. 71Conclusion and next steps3:28

CSS Cheatsheet

HTML Cheatsheet

HTML CSS Cheatsheet thumb