Font Styles
font-family |
Use to declare multiple fonts, if first font doesn't exists other ones will be declared |
font-size |
Text size (e.g. 30px) |
font-weight |
Text thickness (bold, semibold) |
font-style |
Style of font (e.g. italic) |
font-variant |
Variation of font (e.g. small-caps) |
Colors
Predefined Color Names |
red, blue, green |
RGB (Red, Green, Blue) |
Red: rgb(255,0,0) |
HEX (Hue, Saturated, Lightness) |
Red: hsl(0, 100%, 50%) |
RGBA (Red, Green, Blue, Alpha) |
rgba(255, 0, 0, 0.5) (50% transparent red) |
HSLA (Hue, Saturated, Lightness, Alpha) |
hsla(0, 100%, 50%, 0.5) (50% transparent red) |
Note:
The 'Alpha' value ranges from 0 (completely transparent) to 1 (completely opaque).
Text Styles
text-color |
Set the color of text |
text-align |
Arrangement of text (e.g. left, right, center) |
text-decoration |
(e.g. underline) |
letter-spacing |
Spacing between each letter |
word-spacing |
Spacing between each word |
Background
background-color |
background-image |
background-size |
background-position |
background-repeat |
Transitions
transition-property |
Specifies CSS property (e.g. width) |
transition-timing-function |
Specifies speed curve of transition effect |
transition-delay |
Specifies a delay (in seconds) for transition effect. |
transition-duration |
Specifies the transition effect duration (in seconds) |
|
|
Table
Table border |
boarder-collapse |
Sets whether the table borders should be collapsed into a single border |
Table size |
width, height |
Sets width and height of table |
Table alignment |
text-align |
Sets the horizontal alignment (left, right, or center) of the content in table |
Position
static |
Not affected by the top, bottom, left, and right properties |
relative |
Positioned relative to its normal position |
fixed |
Always stays in the same place even if the page is scrolled |
absolute |
Positioned relative to the nearest positioned ancestor |
sticky |
Positioned based on the user's scroll position |
Box Model Explanation
Content |
Place for text and images appear |
Padding |
Around the content where is transparent |
Border |
Goes around the padding and content |
Margins |
An area outside the border where is transparent |
Margins & Padding
Margins |
Padding |
margin-top |
padding-top |
margin-right |
padding-right |
margin-left |
padding-left |
margin-bottom |
padding-bottom |
EXTRA! (same concept for padding)
margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
margin: 25px;
- all margins are 25px
Border Style
border-style |
(e.g. dotted, dashed, solid) |
border-width |
Set border width |
border-radius |
Set rounded border |
border-color |
Set color of border |
Display Property
inline |
Displays an element as an inline element |
block |
Displays an element as a block element |
inline-block |
Displays an element as an inline-level block container |
flex |
Displays an element as a block-level flex container |
grid |
Displays an element as a block-level grid container |
|
