kylenrich24 / css-helper

🚀 CSS personal docs/cheat sheet

CSS

Background

background:   pink

background:   url(image)

background-repeat:   no-repeat

background-size:   cover

Border

border:   5px     solid    purple

Box Model

Every element has a box around it

• Element - width/height:  200px        can also use % of the parent element
• Padding - padding:  10px        sets 10px of padding all around
• Margin - margin:  10px        sets 10px of margin all around, we can also do 0 auto which will set top and bottom to 0 and left and right to auto(center)
• Border - border:  2px solid blue

CSS COLORS

Hex

color:  #RRGGBB

RGB

color:  rgb(0,255,0)

RGBA (A is transparency)

color:   rgb(0,255,0, .5)

CSS Colours - https://colours.neilorangepeel.com/

Float

Takes the elements out of the normal flow. For instance, we have 2 divs which are block elements, float would overwrite this.

float:   left    the div's orientation/flow would be changed to floating always to the left

Fonts and Texts

• font-family: "Arial"
• font-size: 200px
• em - control the size base on the parent element. For instance, we have a p and we set one sentence in it to 2 em, the sentence will be doubled the size of p. Another example would be setting an h2 to 5 em, it will be 5 times bigger than the body since this is its parent element.
• font-weight:  bold    (100-800)
• line-height:  2    double-spaced
• text-align:  center
• text-decoration:  underline
• text-transform:  uppercase

Available fonts in CSS -  https://www.cssfontstack.com/
Google Fonts -   https://fonts.google.com/

Selectors

• Element/Type
• Class     .class
• ID     #id
• Descendant   li a          selects every a in an li
• Adjacent   h4 + li          selects all li that comes after h4
• Nth of Type   ul:nth-of-type(3)          selects third ul

Specificity

An element can be targeted by multiple styles/selectors. The style that is closest/most specific to the element will be applied by CSS.
ID > Class > Element/Type