Get Started. It's Free
or sign up with your email address
CSS by Mind Map: CSS

1. insert css in html

1.1. inline

1.2. internal

1.3. external

2. style text

2.1. font-size

2.2. font-weight

2.3. text-decoration

2.4. text-tranform

2.5. text-alight

2.6. text-indent

2.7. text-justify

2.8. text-shadow

2.8.1. X

2.8.2. Y

2.8.3. X Y #color

3. 5 use to hidden element

3.1. visibility

3.1.1. hidden

3.1.2. visible

3.2. opacity

3.2.1. 0

3.2.2. 1

3.3. display

3.3.1. none

3.3.2. block,...

3.4. position

3.4.1. position: absolute; top: -9999px; left: -9999px;

3.5. clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

4. padding

5. shadow

5.1. box-shadow

5.2. text-shadow

6. flex

6.1. display: flex;

6.1.1. flex-direction

6.1.1.1. row

6.1.1.2. column

6.1.1.3. row-reverse

6.1.1.4. column-reverse

6.1.2. justify-content

6.1.2.1. flex-start

6.1.2.2. flex-end

6.1.2.3. center

6.1.2.4. space-between

6.1.2.5. space-around

6.1.2.6. space-evenly

6.1.3. alight-items

6.1.3.1. the same justify-content

6.1.4. alight-content

6.1.4.1. the same

6.1.4.2. stretch (default)

6.2. (for child flex)

6.2.1. flex-grow

6.2.2. flex-basis

6.2.3. flex-shrink

7. position

7.1. relative

7.2. absolute

7.3. fixed

7.4. static

7.5. sticky

8. background

8.1. background-color

8.1.1. color

8.1.2. rgb()

8.1.3. # code-color

8.1.4. rgba()

8.2. background-image

8.2.1. url()

8.3. background-repeat

8.3.1. repeat X

8.3.2. repeat Y

8.3.3. repeat (X, Y)

8.3.4. no-repeat

8.4. background-position

8.4.1. top

8.4.2. right

8.4.3. bottom

8.4.4. left

8.4.5. %

8.4.6. px

8.4.7. center

8.5. background-size

8.5.1. cover

8.5.2. contain

8.5.3. length: %, px,...

8.6. background-attackment

8.6.1. :fixed

8.6.2. :scroll

8.7. background

9. css selector

9.1. class

9.2. id

9.3. attribute

9.4. element

10. border

11. margin

12. box-sizing

12.1. border-box

12.2. content-box

13. float

13.1. left

13.2. right

13.3. clear: float*;

13.3.1. both

13.3.2. left

13.3.3. right

14. Grid

14.1. display: grid

14.1.1. grid

14.1.2. inline grid

14.2. grid-template-column

14.2.1. track-size

14.2.1.1. fr unit

14.2.2. line-name

14.2.3. auto

14.2.4. repeat (3, 20px[col-start]) (if you want repeat value three time)

14.3. grid-template-row

14.3.1. the same column

14.4. grid-template-areas

14.4.1. ex: grid-areas: "header header header header" "sidebar . main main" " footer X 4" ;

14.5. grid-column-gap: <line-size>; grid-row-gap: <line-size>; // grid-gap: column row;

14.6. justify-items (doc)

14.6.1. start

14.6.2. end

14.6.3. center

14.6.4. stretch

14.7. alight-items (ngang)

14.7.1. the same justify-items

14.8. place-items : <alight-items> <justify-items>

14.9. justify-content

14.9.1. the same flex <justify-content>

14.10. alight-content

14.10.1. the same flex

14.11. place-content: <align-content> / <justify-content>

14.12. grid-auto-columns grid-auto-rows

14.12.1. value <track-size> <track-size>

14.12.2. use make item