Scribd
Upload
8 views5 pages

CSS Properties Revision Sheet

This document is a comprehensive revision sheet for CSS properties, categorized into basic, intermediate, and advanced levels. It covers essential topics such as the box model, colors, text, positioning, layout systems, animations, and responsive design. Additionally, it includes bonus concepts like specificity and responsive units that are crucial for effective CSS usage.

Uploaded by

tamimahmed67961
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views5 pages

CSS Properties Revision Sheet

This document is a comprehensive revision sheet for CSS properties, categorized into basic, intermediate, and advanced levels. It covers essential topics such as the box model, colors, text, positioning, layout systems, animations, and responsive design. Additionally, it includes bonus concepts like specificity and responsive units that are crucial for effective CSS usage.

Uploaded by

tamimahmed67961
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Properties Revision Sheet

Basic Level CSS Properties (Foundation)


1. Box Model:
• width
• height
• padding
• margin
• border
• box-sizing
• display (block, inline, inline-block)
2. Colors & Background:
• color

• background-color

• background-image

• background-size

• background-position

• background-repeat

3. Text & Font:


• font-family

• font-size
• font-weight

• line-height

• text-align

• text-decoration

• letter-spacing, word-spacing

4. Links:
• :hover, :visited, :active
• text-decoration

5. Positioning Basics
• position (static, relative)
• top, right, bottom, left

6. Misc
• overflow

• visibility

• z-index

• cursor

Intermediate Level CSS Properties (Layout & Effects)

7. Advanced Box Model & Display


• display: flex, inline-flex

• flex, flex-direction, justify-content, align-items, flex-wrap, gap

• display: grid, grid-template-columns, grid-template-rows, grid-gap, place-items

8. Advanced Positioning
• position: absolute, fixed, sticky

9. Advanced Background & Borders


• background-clip, background-blend-mode

• border-radius
• box-shadow

• opacity

10. Transitions & Animations


• transition

• transition-duration, transition-timing-function

• animation, @keyframes, animation-duration, animation-delay

11. Responsive Design


• media queries

• max-width, min-width

• object-fit
• aspect-ratio

12. Pseudo Classes & Elements


• :first-child, :last-child, :nth-child()

• ::before, ::after

Advanced Level CSS Properties (Pro Skills)

13. CSS Variables & Custom Props


• --primary-color: #000;
• var(--primary-color)

14. Layout Systems


• grid-auto-flow, grid-auto-rows, grid-area, place-self

• subgrid

• clamp(), min(), max() for fluid typography/layout

15. Advanced Effects & Animation


• transform: translate / rotate / scale / skew

• filter: blur / grayscale / brightness / contrast

• backdrop-filter

• mix-blend-mode

16. Advanced Selectors


• :not(), :is(), :has() (has is very new)

• :focus-within, :focus-visible

17. Typography & Layout Tweaks


• hyphens, white-space, text-overflow

• writing-mode, direction

18. Interaction
• scroll-behavior

• pointer-events
• touch-action

19. Container Queries (New & Powerful)


• @container

• container-type, container-name

20. Other Advanced


• will-change

• contain

• isolation

• accent-color

Bonus: CSS Concepts You Should Know


• Specificity
• Cascade
• Inheritance
• Shorthand vs Longhand
• Responsive Units: em, rem, %, vw, vh
• BEM Naming convention

You might also like