LIST OF CSS TOPICS AND SUBTOPICS

1. **Basics of CSS**
- Syntax and Selectors
- Applying CSS (Inline, Internal, External)
- Specificity and Inheritance
- Comments in CSS

2. **CSS Selectors**
- Basic Selectors (Type, Class, ID)
- Attribute Selectors
- Pseudo-classes (:hover, :focus, :nth-child)
- Pseudo-elements (::before, ::after)
- Combinators (Descendant, Child, Sibling)

3. **CSS Box Model**

- Content, Padding, Border, Margin (padding, border, margin, box-sizing)
- Box-sizing (box-sizing)
- Outline vs Border (outline, border)
- Display Property (display: block, inline, inline-block, none)

4. **Styling Text**
- Font Properties (font-family, font-size, font-style, font-weight)
- Text Alignment (text-align), Decoration (text-decoration), Transform (text-
transform), Indentation (text-indent)
 - Line Height (line-height) and Letter Spacing (letter-spacing)
- Text Shadow (text-shadow)

5. **Color and Backgrounds**

- Color Units (color, background-color)
- Background Properties (background-color, background-image, background-
repeat, background-position, background-size, background-attachment)
- Gradients (linear-gradient, radial-gradient)

6. **CSS Layout**
- Normal Flow
- Positioning (position: static, relative, absolute, fixed, sticky; top, right,
bottom, left, z-index)
- Float and Clear (float, clear)
- Flexbox
- Flex Container Properties (display: flex, flex-direction, justify-content,
align-items, align-content, flex-wrap)
- Flex Item Properties (order, flex-grow, flex-shrink, flex-basis, align-self)
- Grid Layout
- Grid Container Properties (display: grid, grid-template-columns, grid-
template-rows, grid-template-areas, grid-gap, justify-items, align-items,
justify-content, align-content)
- Grid Item Properties (grid-column, grid-row, grid-area, justify-self, align-
self)
7. **Responsive Design**
- Media Queries (@media)
- Responsive Units (vw, vh, %, em, rem)
- Mobile First Design
- Responsive Images (max-width, height, object-fit)

8. **CSS Transitions and Animations**

- Transitions (transition-property, transition-duration, transition-timing-
function, transition-delay)
- Keyframes (@keyframes)
- Animation Properties (animation-name, animation-duration, animation-
timing-function, animation-delay, animation-iteration-count, animation-
direction, animation-fill-mode)

9. **Advanced CSS Techniques**

- CSS Variables (Custom Properties) (--variable-name)
- Calc() Function (calc())
- CSS Functions (rotate(), translate(), scale(), etc.)
- Blend Modes and Filters (mix-blend-mode, filter: blur, brightness, contrast,
etc.)

10. **Preprocessors**
- Introduction to CSS Preprocessors (Sass, LESS, Stylus)
- Variables, Nesting, Partials, Mixins, Inheritance in Preprocessors
- Compiling CSS from Preprocessors
11. **CSS Frameworks**
- Introduction to Frameworks (Bootstrap, Foundation, Bulma, etc.)
- Using Grid Systems in Frameworks
- Customizing Frameworks
- Advantages and Drawbacks of Using Frameworks

12. **CSS Methodologies**

- BEM (Block, Element, Modifier)
- OOCSS (Object-Oriented CSS)
- SMACSS (Scalable and Modular Architecture for CSS)
- Atomic CSS

13. **Browser Developer Tools**

- Inspecting and Modifying CSS
- Debugging CSS Issues
- Performance Analysis

14. **Performance Optimization**

- Minification and Compression
- Critical CSS
- Reducing Repaints and Reflows
- Using CSS Shorthand Properties (padding, margin, font, background,
border)

15. **Cross-Browser Compatibility**

 - Vendor Prefixes (-webkit-, -moz-, -ms-, -o-)
- Feature Detection and Polyfills
- Dealing with Browser Quirks

16. **CSS for Accessibility**

- Using CSS for Better Accessibility (outline, contrast ratios)
- High Contrast Modes
- Focus Styles (:focus, outline)

17. **CSS Grid and Flexbox Deep Dive**

- Advanced Layout Techniques
- Combining Flexbox and Grid
- Practical Use Cases and Examples

18. **CSS Tools and Libraries**

- PostCSS
- Autoprefixer
- Stylelint

19. **Modern CSS Features**

- CSS Modules
- Shadow DOM
- CSS-in-JS (Styled Components, Emotion, etc.)
20. **Practical Projects**
 - Building Responsive Websites
- Creating Web Components
- Theming and Skinning Web Applications

LIST OF CSS PROPERTIES

A
- `align-content`
- `align-items`
- `align-self`
- `all`
- `animation`
- `animation-delay`
- `animation-direction`
- `animation-duration`
- `animation-fill-mode`
- `animation-iteration-count`
- `animation-name`
- `animation-play-state`
- `animation-timing-function`
- `appearance`
B
- `backdrop-filter`
- `backface-visibility`
- `background`
- `background-attachment`
- `background-blend-mode`
- `background-clip`
- `background-color`
- `background-image`
- `background-origin`
- `background-position`
- `background-repeat`
- `background-size`
- `block-size`
- `border`
- `border-block`
- `border-block-color`
- `border-block-end`
- `border-block-end-color`
- `border-block-end-style`
- `border-block-end-width`
- `border-block-start`
- `border-block-start-color`
- `border-block-start-style`
- `border-block-start-width`
- `border-block-style`
- `border-block-width`
- `border-bottom`
- `border-bottom-color`
- `border-bottom-left-radius`
- `border-bottom-right-radius`
- `border-bottom-style`
- `border-bottom-width`
- `border-collapse`
- `border-color`
- `border-end-end-radius`
- `border-end-start-radius`
- `border-image`
- `border-image-outset`
- `border-image-repeat`
- `border-image-slice`
- `border-image-source`
- `border-image-width`
- `border-inline`
- `border-inline-color`
- `border-inline-end`
- `border-inline-end-color`
- `border-inline-end-style`
- `border-inline-end-width`
- `border-inline-start`
- `border-inline-start-color`
- `border-inline-start-style`
- `border-inline-start-width`
- `border-inline-style`
- `border-inline-width`
- `border-left`
- `border-left-color`
- `border-left-style`
- `border-left-width`
- `border-radius`
- `border-right`
- `border-right-color`
- `border-right-style`
- `border-right-width`
- `border-spacing`
- `border-start-end-radius`
- `border-start-start-radius`
- `border-style`
- `border-top`
- `border-top-color`
- `border-top-left-radius`
- `border-top-right-radius`
- `border-top-style`
- `border-top-width`
- `border-width`
- `bottom`
- `box-decoration-break`
- `box-shadow`
- `box-sizing`
- `break-after`
- `break-before`
- `break-inside`

C
- `caption-side`
- `caret-color`
- `clear`
- `clip`
- `clip-path`
- `color`
- `column-count`
- `column-fill`
- `column-gap`
- `column-rule`
- `column-rule-color`
- `column-rule-style`
- `column-rule-width`
- `column-span`
- `column-width`
- `columns`
- `content`
- `counter-increment`
- `counter-reset`
- `counter-set`
- `cursor`

D
- `direction`
- `display`

E
- `empty-cells`

F
- `filter`
- `flex`
- `flex-basis`
- `flex-direction`
- `flex-flow`
- `flex-grow`
- `flex-shrink`
- `flex-wrap`
- `float`
- `font`
- `font-family`
- `font-feature-settings`
- `font-kerning`
- `font-language-override`
- `font-optical-sizing`
- `font-size`
- `font-size-adjust`
- `font-stretch`
- `font-style`
- `font-synthesis`
- `font-variant`
- `font-variant-alternates`
- `font-variant-caps`
- `font-variant-east-asian`
- `font-variant-ligatures`
- `font-variant-numeric`
- `font-variant-position`
- `font-weight`
G
- `gap`
- `grid`
- `grid-area`
- `grid-auto-columns`
- `grid-auto-flow`
- `grid-auto-rows`
- `grid-column`
- `grid-column-end`
- `grid-column-gap`
- `grid-column-start`
- `grid-gap`
- `grid-row`
- `grid-row-end`
- `grid-row-gap`
- `grid-row-start`
- `grid-template`
- `grid-template-areas`
- `grid-template-columns`
- `grid-template-rows`
H
- `hanging-punctuation`
- `height`
- `hyphens`

I
- `image-orientation`
- `image-rendering`
- `image-resolution`
- `ime-mode`
- `inline-size`
- `inset`
- `inset-block`
- `inset-block-end`
- `inset-block-start`
- `inset-inline`
- `inset-inline-end`
- `inset-inline-start`
- `isolation`

J
- `justify-content`
- `justify-items`
- `justify-self`
L
- `left`
- `letter-spacing`
- `line-break`
- `line-height`
- `list-style`
- `list-style-image`
- `list-style-position`
- `list-style-type`

M
- `margin`
- `margin-block`
- `margin-block-end`
- `margin-block-start`
- `margin-bottom`
- `margin-inline`
- `margin-inline-end`
- `margin-inline-start`
- `margin-left`
- `margin-right`
- `margin-top`
- `mask`
- `mask-border`
- `mask-border-mode`
- `mask-border-outset`
- `mask-border-repeat`
- `mask-border-slice`
- `mask-border-source`
- `mask-border-width`
- `mask-clip`
- `mask-composite`
- `mask-image`
- `mask-mode`
- `mask-origin`
- `mask-position`
- `mask-repeat`
- `mask-size`
- `mask-type`
- `max-block-size`
- `max-height`
- `max-inline-size`
- `max-width`
- `min-block-size`
- `min-height`
- `min-inline-size`
- `min-width`
- `mix-blend-mode`

O
- `object-fit`
- `object-position`
- `offset`
- `offset-anchor`
- `offset-distance`
- `offset-path`
- `offset-position`
- `offset-rotate`
- `opacity`
- `order`
- `orphans`
- `outline`
- `outline-color`
- `outline-offset`
- `outline-style`
- `outline-width`
- `overflow`
- `overflow-anchor`
- `overflow-block`
- `overflow-clip-margin`
- `overflow-inline`
- `overflow-wrap`
- `overflow-x`
- `overflow-y`
- `overscroll-behavior`
- `overscroll-behavior-block`
- `overscroll-behavior-inline`
- `overscroll-behavior-x`
- `overscroll-behavior-y`

P
- `padding`
- `padding-block`
- `padding-block-end`
- `padding-block-start`
- `padding-bottom`
- `padding-inline`
- `padding-inline-end`
- `padding-inline-start`
- `padding-left`
- `padding-right`
- `padding-top`
- `page-break-after`
- `page-break-before`
- `page-break-inside`
- `perspective`
- `perspective-origin`
- `place-content`
- `place-items`
- `place-self`
- `pointer-events`
- `position`
- `print-color-adjust`

Q
- `quotes`

R
- `resize`
- `right`
- `rotate`
- `row-gap`
- `ruby-align`
- `ruby-position`

S
- `scale`
- `scroll-behavior`
- `scroll-margin`
- `scroll-margin-block`
- `scroll-margin-block-end`
- `scroll-margin-block-start`
- `scroll-margin-bottom`
- `scroll-margin-inline`
- `scroll-margin-inline-end`
- `scroll-margin-inline-start`
- `scroll-margin-left`
- `scroll-margin-right`
- `scroll-margin-top`
- `scroll-padding`
- `scroll-padding-block`
- `scroll-padding-block-end`
- `scroll-padding-block-start`
- `scroll-padding-bottom`
- `scroll-padding-inline`
- `scroll-padding-inline-end`
- `scroll-padding-inline-start`
- `scroll-padding-left`
- `scroll-padding-right`
- `scroll-padding-top`
- `scroll-snap-align`
- `scroll-snap-stop`
- `scroll-snap-type`
- `scrollbar-color`
- `scrollbar-gutter`
- `scrollbar-width`
- `shape-image-threshold`
- `shape-margin`
- `shape-outside`

T
- `tab-size`
- `table-layout`
- `text-align`
- `text-align-last`
- `text-combine-upright`
- `text-decoration`
- `text-decoration-color`
- `text-decoration-line`
- `text-decoration-skip-ink`
- `text-decoration-style`
- `text-emphasis`
- `text-emphasis-color`
- `text-emphasis-position`
- `text-emphasis-style`
- `text-indent`
- `text-justify`
- `text-orientation`
- `text-overflow`
- `text-rendering`
- `text-shadow`
- `text-size-adjust`
- `text-transform`
- `text-underline-offset`
- `text-underline-position`
- `top`
- `touch-action`
- `transform`
- `transform-box`
- `transform-origin`
- `transform-style`
- `transition`
- `transition-delay`
- `transition-duration`
- `transition-property`
- `transition-timing-function`

U
- `unicode-bidi`
- `user-select`
V
- `vertical-align`
- `visibility`

W
- `white-space`
- `widows`
- `width`
- `will-change`
- `word-break`
- `word-spacing`
- `word-wrap`
- `writing-mode`

Z
- `z-index`

This list covers most of the CSS properties, though the exact count and
properties may vary with updates and new specifications. For the most current
list, referring to official documentation like MDN Web Docs or the W3C CSS
Specifications is recommended.