CSS Basics
What is CSS?
Types of CSS (Inline, Internal, External)
CSS Syntax
Selectors
Element selector
Class selector
ID selector
Grouping selectors
Universal selector
Colors (rgb, rgba, hex, hsl)
Backgrounds
Borders
Margins
Padding
Height & Width
Box Model
- CSS Text & Font Styling
Text align, transform, decoration
Line-height, letter-spacing
Font-size, font-family
@font-face
Google fonts
- CSS Display & Position
Display: block, inline, inline-block
Visibility
Overflow
Position
static
relative
absolute
fixed
sticky
Z-index
- CSS Layout Systems
Flexbox
Flex container
flex-direction
justify-content
align-items
align-content
flex-wrap
gap
flex-grow, flex-shrink, flex-basis
CSS Grid
Grid container
Columns & rows
grid-template
gap
grid-area
Auto-fit & auto-fill
- Responsive Web Design
Mobile-first concept
Media Queries
Viewport meta tag
Units:
px
%
em, rem
vh, vw
Responsive images
Responsive typography
- CSS Advanced Selectors
Attribute selectors
Pseudo-classes (:hover, :focus, :nth-child)
Pseudo-elements (::before, ::after)
- CSS Effects
Shadows
text-shadow
box-shadow
Gradients
linear-gradient
radial-gradient
Filter effects
Opacity
Blend modes
- CSS Transitions & Animations
Transitions
transition-property
transition-duration
transition-timing-function
Animations
@keyframes
animation-duration
animation-delay
animation-iteration-count
animation-direction
- CSS Transform
rotate
scale
skew
translate
transform-origin
- CSS Variables (Custom Properties)
Defining variables
Using variables
Theme switching
- SASS / SCSS (Optional Advanced)
Variables
Nesting
Mixins
Functions
Partials
Imports
Extend / Inheritance
Condition & Loops
- CSS Frameworks
Bootstrap basics
Tailwind basics
Material UI concepts
- CSS Architecture
BEM (Block, Element, Modifier)
OOCSS
SMACSS
Utility-first design (Tailwind concept)
- CSS Performance Optimization
Minification
Critical CSS
Avoiding heavy selectors
Optimizing animations
- CSS Best Practices
Clean code structure
Using comments
Folder structure
Reusable classes
Naming conventions
Top comments (0)