Skip to content

topic 🐞 general structuring blocks of CCS styles

Notifications You must be signed in to change notification settings

SKindij/CSS-reference-book

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

89 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CCS style blocks

1. positioning

  • { display: }
    • none (hide from the page)
    • block (block mapping)
    • inline (line display)
    • inline-block (behaves externally as a row, and internally as a block)
    • flex
      • flex-direction
      • flex-wrap
      • justify-content
      • align-items
      • align-content
    • grid
      • grid-template-columns
      • grid-template-rows
      • fr (fraction)
      • justify-items
      • align-items
      • grid-template-areas
  • { position: }
    • static
    • relative
    • absolute
    • fixed
    • sticky
    • inherit
  • { float: }
    • left
    • right
  • { z-index: }

2. block model and sizes

  • { width: }
  • { height: }
  • { box-sizing: }
    • content-box
    • border-box
  • { margin: }
    • 0 auto
    • N (all sides)
    • N N (top-bottom | left-right)
    • N N N (top | left-right | bottom)
    • N N N N (top | right | bottom | left)
  • { border: }
    • -color
    • -style
      • solid
      • dotted
      • dashed
      • double
  • { padding: }
    • -top
    • -right
    • -bottom
    • -left

3. typography (text properties)

  • { font-family: }
    • serif (Times)
    • sans-serif (Arial)
    • monospace (Courier)
    • cursive (italic)
    • fantasy
  • { font-size: }
  • { color: }
  • { letter-spacing: }
  • { line-height: }
  • { text-align: }
    • left
    • center
    • right
    • justify
  • { font-weight: }
    • 100 (thin, hairline)
    • 400 (normal, regular, book)
    • 600 (semi bold, demi bold)
    • 800 (extra bold, ultra bold)
  • { text-decoration: }
  • { white-space: }
  • { text-overflow: }
  • { text-shadow: }

4. display (design)

  • { overflow: }
    • visible
    • hidden
    • scroll
    • auto
    • initial
    • inherit
  • { opacity: }
    • 0
    • 0.5
    • 1
  • { visibility: }
    • visible
    • hidden
  • { background-color: }
  • { background-image: }
    • linear-gradient ()
    • radial-gradient ()
    • background-position
    • background-size
    • background-repeat
    • background-attachment
  • { box-shadow: }
    • Х
    • У
    • blur
    • spread
    • color

5. animation

  • @media:
    • mobile first
    • desktop first
  • @keyframes animationName {...}
    • animation-name: animationName;
    • animation-duration
    • animation-iteration-count
    • animation-direction
    • animation-timing-function
    • animation-delay
    • animation-play-state

6. other

About

topic 🐞 general structuring blocks of CCS styles

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published