Skip to main content

Roadmaps

CSS Syllabus for Beginners

A beginner CSS syllabus from selectors and the box model through flexbox, grid, responsive layout, and habits that keep a stylesheet maintainable.

TechWebster2 min readDiscussion on DEV (opens in a new tab)

1. Introduction to CSS

  • What is CSS?
  • Why CSS is needed
  • HTML vs CSS
  • How browsers render styles
  • Benefits of CSS

2. Adding CSS to HTML

Inline CSS

  • style attribute

Internal CSS

  • style tag

External CSS

  • css file
  • link tag

Priority Order

  • Inline vs Internal vs External

3. CSS Syntax

  • Selectors
  • Properties
  • Values
  • Declaration blocks
  • CSS comments

4. CSS Selectors

Basic Selectors

  • Element selector
  • ID selector
  • Class selector

Advanced Selectors

  • Group selector
  • Universal selector

5. Colors

  • Color names
  • HEX
  • RGB
  • RGBA
  • HSL

6. Backgrounds

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size

7. Borders

  • border
  • border-width
  • border-style
  • border-color
  • border-radius

8. Margin

  • What is margin?
  • Individual margins
  • Shorthand margin

9. Padding

  • What is padding?
  • Individual padding
  • Shorthand padding

10. Box Model

The CSS box model: margin, border, padding, and content, revealed from the outside in.marginborderpaddingcontent

  • Content
  • Padding
  • Border
  • Margin
  • box-sizing

11. Width & Height

  • width
  • height
  • min-width
  • max-width
  • min-height
  • max-height

12. Text Styling

  • color
  • text-align
  • text-decoration
  • text-transform
  • line-height
  • letter-spacing
  • word-spacing

13. Fonts

  • font-family
  • font-size
  • font-weight
  • font-style
  • Google Fonts

14. Links Styling

  • :link
  • :visited
  • :hover
  • :active

15. Lists Styling

  • list-style-type
  • list-style-position
  • custom list styles

16. Tables Styling

  • border-collapse
  • spacing
  • striped tables
  • hover effects

17. Display Property

  • block
  • inline
  • inline-block
  • none

18. Positioning

  • static
  • relative
  • absolute
  • fixed
  • sticky

19. Overflow

  • visible
  • hidden
  • scroll
  • auto

20. Float & Clear

  • float
  • clear
  • common use cases
  • limitations

21. Flexbox

Flex Container

  • display:flex

Main Axis

  • justify-content

Cross Axis

  • align-items

Flex Items

  • flex-grow
  • flex-shrink
  • flex-basis

22. CSS Grid

Grid Container

  • display:grid

Grid Properties

  • grid-template-columns
  • grid-template-rows
  • gap

23. Pseudo Classes

  • :hover
  • :focus
  • :active
  • :first-child
  • :last-child
  • :nth-child()

24. Pseudo Elements

  • ::before
  • ::after
  • ::first-letter
  • ::first-line

25. Transitions

  • transition
  • duration
  • timing function

26. Transform

  • translate
  • rotate
  • scale
  • skew

27. Animations

  • @keyframes
  • animation-name
  • animation-duration
  • animation-iteration-count

28. Responsive Design

Viewport

Media Queries

Mobile First Design

29. CSS Variables

  • Creating variables
  • Using variables
  • Theme colors

30. CSS Best Practices

  • Naming conventions
  • Organizing CSS
  • Reusable classes
  • Avoiding duplicate code

Keep reading

Build with us

Need this shipped, not just studied?

TechWebster designs and builds websites and web apps, with the markup, performance, and search setup included from the first commit.

Start a projectWeb development