Don’t Forget CSS

Fundamentals
Margin
Border
Padding
The Box Model Content

Specificity
MOST LEAST
SPECIFIC SPECIFIC

Inline Styles Ids Classes Elements

[ ! ] You can override specificity with

!important But try to avoid using this

Sizing
Pixels

px Good for consistent designs,

however not responsive.

Fixed size no matter what

REM

default is 16px Multiply base font size by

rem, ex, 2rem = 32px.

Relative to base font size

Percent

% Responsive, yet respects

hierarchy.

Relative to parent container

View Width, Height

vw, vh Responsive, but does not

respect hierarchy.

A percentage

Colors
Color words:
black
cadetblue Not the best colors, but fast to
write. Useful to test things, but
orangered not much else
parchment

Hex codes:
#00 00 00 black
Each 2 digits represents red,
R G B green, and blue with values 0-f

#ff ff ff white

R G B

#00 ff 00 pure green

R G B

RGB function

rgb( 0, 0, 0 ) black
Same as hex, but with RGB
rgb(255, 255, 255) white values represented as 0-255.
rgb(255, 0, 0 ) pure red

RGBA codes

rgba(0, 0, 0, 1) pure black

Same as RGB, but with an
rgba(0, 0, 0, .5) 50% opaque black additional value for opacity (0-1)
rgba(0, 0, 0, 0) transparent

Selectors

Basics
HTML Elements

h1 {
Simply the name of the element
}

Classes

.secondary {
Use the dot prefix
}

Ids

#name {
Use the hash prefix
}

Combining Selectors
Comma

h1, h2, h3 {
To select multiple
}

Carrot is direct child

ol > li {
All li directly inside ol
}

Space is all descendants

.hero p {
All p inside hero class
}

Advanced Selectors
Pseudo classes

button:hover {
Add to the end of your selector
with a colon, these allow you to
} select an element by its 'state'
( ex :hover ), or position within
the document tree ( ex :nth-of-
div:nth-of-type(2) { type(2) )"

Pseudo elements
Lets you style a specific part of
::before { an element, and in certain cases
add cosmetic content (ex ::before
} to change bullet points

Compound selectors
Chain together as many selectors,
.container > div:hover { and pseudo classes as you want
to get extremely specific. You can
} always see the specificity by
hovering over in VS code

Properties
Some of the most common properties.
Remember, key names separated by hyphen, values without
quotations, end lines with semicolon.

Text
Font size

h1 {
font-size: 20px; Can use any size value
}

Color

h2 {
color: white; Is just “color” (not text-color)
}

Font family

h3 {
Can be a single name, or comma
font-family: Helvetica, separated priority list.
sans-serif;
}

Font weight

h4 {
font-weight: bold; Can take a word, or a value 1-900
font-weight: 400;
}

Text decoration, Font style

h5 {
Used for underlining text, and
text-decoration: underline; italicizing text, in most cases
font-style: italic;
}

Line height, Letter spacing

h6 { Used for horizontal spacing of

line-height: 10px letters, and vertical spacing of
text lines, respectively
letter-spacing : 5px;
}

Font shorthand

p {
Combine multiple font properties
font: italic 1.2em "Fira Sans", into a single line
serif;
}

Spacing

Width and Height

.box {
Can use any size value, but
width: 100%; percentages are recommended
height: 20%;
}

Max-Width, Max-Height, Min-Width, Min-Height

.box { Fixed values that supersede

max-width: 1000px; width & height. Good for setting
min-width: 200px; constraints on responsive designs.
max-height: 400px;
min-height: 50px;
}

Margin and Padding

.container {
Can use (1) single values, (2)
margin-left: 20px; /* (1) */ all 4 side value, (3) top+bottom
padding: 5px; /* (2) */ values, (4) explicit 4 side values
margin: 20px 10px; /*( 3) */
padding: 5px 10px 20px 10px ;/* (4) */ ( ! ) Don't forget
} padding = inside border &
painted by background color
margin = outside border

Border

.block {
Syntax = size, type, color
border: 1px solid grey; (almost always solid)
}

Box-sizing

.shape {
Defines whether padding and
box-sizing: border-box;/* yes */ border are included in width
box-sizing: content-box;/* no */
}

Background

Background Color

.container { Set the fill color -- applies to

background-color : #f1f1f1; /* sets content and padding areas of
content & padding to a light grey */ the box model
}

Background Image

Sets a custom image for the

.container { element background, usually
background-image: needs additional properties
url (”new-york.png”) such as background-position,
} background-repeat, etc

Background shorthand

.container { Combines all the aforementioned

background: #000 properties (color, image, repeat,
position etc...) into a single line.
url(”new-york.png”)
no-repeat right top;
}

Position, Display

Position, Top, Bottom, Left, Right

.container { Use an absolute container

position: relative; within a relative container to
} set a custom position

.item {
position: absolute;
left: 50%;
top: 50%;
}

.nav { Fixed positioning can be used

position: fixed; for something like a sticky navbar
}

Display

.box { block elements stack vertically

display: inline; on the page,
}
inline elements line up
horizontally & cannot set vertical
.box-2 { margin and padding
display: block;
inline-block line up horizontally &
} CAN set vertical margin and
padding
.box-3 {
display: inline-block; Inline default for “inline text elements”,
block default for divs & most other
} elements
Grid can also be used, as well as flex,
which has it's own section

Flexbox

Display flex

.container { Aligns child items of a container

left-to-right (by default), with
display: flex; custom spacing set by flex
} sub-properties below

Justify Content, Align Items

.container { Aligns children horizontally within

display: flex; the container, and vertically,
justify-content: space-between; respectively
align-items: center;
}

center, flex-end, flex-start, Most common values for these

space-between, space-around, properties:
baseline

Flex wrap

.container { Once container is filled, children

display: flex; will go to the next line (assuming
justify-content: space-between; they are a fixed size) - default is
none
flex-wrap: wrap;
}

.box {
width: 30%; /* fixed size = 3
per line, then wrap */
}

Flex Direction

Default is row, changing to

.container {
column means items will align
display: flex; vertically instead.
flex-direction : column;
justify-content : center; /*this Importantly, justify-content and
align-items will now switch
now centers vertical axis */ dimensions (JC vertical, AI
align-items: space-around; /* this horizontal)
applies to horizontal axis */
}

Media Queries

@media only screen and (max-width: Create CSS rules for

responsive designs –
600px) { mobile first is best practice
body {
background-color: lightblue; Set “breakpoints” (or
conditions where styles are
} applied)
}
Generally there will be
@media only screen and (max-width: 3 breakpoints: mobile, tablet,
and desktop.
1000px) {
body { Remember to put media
background-color: blue; queries below your default
styles.
}
}

@media only screen and (min-width:

1000px) {
body {
background-color: black;
}
}

Other special properties

Opacity

.shape { Applies a non-color-specific

opacity: .8 opacity value to entire element,
} with a value between 0-1

Transition

button { Defines transition between

color: red; states, useful for hover. Be sure
transition: 1s ease all; to set on both pseudo class &
base.
}
button:hover { Syntax is (1) time in seconds,
opacity: .9; (2) bezier, (3) properties to set
transition on (or all)
transition: 1s ease all;
transform: scale(1.1)
}

Transform

Modifies various properties on

.container { the element, depending which
transform: translateX(-10%); function(s) are used.
translateY(-10%) scale(1.1);
Should be a space separated
skew(10deg); list if more than one is applied
}

Keyframes & Animation

@keyframes spin { Define animations and then use

them with the animate sub-
from { properties (there are more
transform:rotate(0deg); properties than below).
}
to { You can often just Google what
you want to do and then copy
transform:rotate(360deg); them, ex “spin animation css”
} from Google:
}

.logo {
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count:
infinite;
animation-timing-function:
linear;
}

.logo {
You can also use the animation
animation: spin 5s infinite 1s; shorthand
}

@aaronjack @coding_with_jan
The Freelance Developer Bootcamp