Scribd
Upload
59 views

CSS Roadmap

This document provides a roadmap of CSS concepts organized into sections including display, colors, background, box model, position, text, icons, flexbox, grid, media queries, and animation. It introduces key CSS properties, values, and selectors for layout and styling web pages. The roadmap acts as a guide to learning CSS and compares different front-end frameworks that can be used to simplify CSS development.

Uploaded by

unixisfun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

CSS Roadmap

This document provides a roadmap of CSS concepts organized into sections including display, colors, background, box model, position, text, icons, flexbox, grid, media queries, and animation. It introduces key CSS properties, values, and selectors for layout and styling web pages. The roadmap acts as a guide to learning CSS and compares different front-end frameworks that can be used to simplify CSS development.

Uploaded by

unixisfun
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

ss

Roadmap
CSS Roadmap
Introduction Display

Basic Syntax display-none


Style Sheet Insertion display-inline
Selectors display-inline block

display-flex
with dot i.e class
display-grid
with hash i.e Id

universal selector display-unset

element selector

Colors

RGB

HEX

HSl

Background

background-color

background-repeat

background-image

background-position

Box Model Ravishankar kushwah


CSS Roadmap
max-width & min-width Combinators

Position space

static >

relative +

fixed -

absolute ~

sticky
Pseudo-class

Z-index Pseudo-element
Text Opacity

background-color

background-repeat List Style Type

background-image Overflow
Align
Icons
calc(), max(), min()
Units
!important
em

ex

ch

rem
vmin
vmax
Ravishankar kushwah
CSS Roadmap
Flexbox Justify-content

Flex-direction flex-start

row flex-end

column center

row-reverse space-between

column-reverse space-around

space-evenly
Align-content
Align-self
flex-start
flex-start
flex-end flex-end
center
stretch
space-between
space-around

Order
flex-shrink, flex-grow,
flex-basis
Align-items

flex-start

flex-end

center
stretch
baseline
Ravishankar kushwah
CSS Roadmap
Grid grid-area
grid-template-rows Justify-items
grid-template-columns
start
grid-column
grid-row end

gap center
Justify-content stretch

flex-start Align-items
flex-end
start
center
end
stretch
center
space-between
stretch
space-around
space-evenly
Align-self

Align-items start

flex-start end

flex-end center

center stretch

stretch
baseline

Ravishankar kushwah
CSS Roadmap

Media Query
Animation

keyframes

animation-name
What's next?
animation-duration
animation-delay Bootstrap OR Bulma
animation-iteration count SASS or SCSS
animation-direction
Tailwind CSS
animation-timing function
animation-fill-mode
animation

Ravishankar kushwah
Do you find it helpful?
Let me know down in the comments !

Ravishankar kushwah
@coderavii
coderavi

You might also like