CSS-RoadMap

CSS3 RoadMap

Resources to follow

  1. Frontend Roadmap
  2. CSS Cheatsheet
  3. Repository you can take reference
  4. Additional Cheatsheets

CSS3

  1. Selectors
    It represents how the html elements can be selected in a css file
Examples
* {

} Universal Selector: It selects all the elements

#id_name{

} Id selector: It selects only the elements with ID

.class_name{

} Class selector: It selects only element with Class name

Also,

<textbox type="text">
<textbox type="password">

Here, if we want to select only password attribute then

textbox[type="password"]{

}

a:first-child{

}     It selects the first a tag (~ a:last-child)

a:nth-child(2n){

}     Select even numbered anchor tag i.e. 2,4,6...
  1. Cascade
  2. Box Model
    BoxModel-cheatsheet ``` It is all about arrangement of layouts in web page example:

Heading

In this above element: Content is Heading And after content there is padding which is transparent gap between content and border Then comes border whose thickness can be changed by css shorthand property border And finally comes margin which is the gap outside the border to other element

4. [Specificity](https://blog.webdevsimplified.com/2020-02/css-specificity/)

It means what CSS styles will be applied or override in case of multiple styles on same element In layman’s term: !important > Inline CSS > #id > .class > element example: h1 { color: blue !important; } h1 { color: green; } Here, blue will be applied on h1 ```

  1. Position
  2. Display
  3. Flexbox
  4. Grid
  5. Float
  6. Calc
  7. Pseudo Elements
  8. Pseudo Classes
  9. Custom Properties
  10. Media Queries
  11. Animations

Projects

1.Easy

2.Medium

3.Hard