think of every HTML element like a box. The content is in the middle and is surrounded by padding, border and a margin. in that order from closest to furthest.
the amount of space used by every area can be specified with pixel values or responsive values that are relative to the parent element. or a % of the viewport itself.

tools like flex layout and grid layout control how elements flow together in a sophisticated way.

css can also detect user interaction with pseudo selectors like hover button:hover{}

can add logic to code with variables or custom properties and by making media queries that can apply styles conditionally based on the size and type of device.

can do complex animation with transitions and keyframes.

Css in 5 mins


Try to Keep slectors simple

pseudo classes for selection like :

  1. n where n is a positive integer
  2. even and odd
  3. An + B where A is int step size and B is int offset
  4. of <selector> example :nth-child(-n + 3 of li.important) selects the frist 3 list items that that have class="important" set
    instead of li.important:nth-child(-n + 3) { that selects the list items that have class="important" in the first 3 list items

But keep it simpler than this whenever possible


Are applied from top to bottom of the css file

When styles collide, the more specific selectors override the others


Id > class > element

2 main categories of attributes: color and layout and a bunch of random ones.


Properties: color , background-color

size units




Every element is made of a box.
Each content box is wrapped inside of
Width and heigth are the size of the content, and are best set as % of the parent container.

The padding attr cna be set with 1 (all 4 sides), 2(top and bottom, left and right) or 4 (top, right, bottom, left)

I can chage the position of things in the content with text-aling: <left,center,right>

Can also set attributes individually like padding-top, margin-left

An elements background color will apply to the padding as well but not the border and margin

Can set layout values with absolute pixel value or with REM (relative measurement, to font size). If you change the font size it will the space of everything. Ex: padding: 2rem. Can be useful for responsive designs

Has a 3 part syntax
99% of the time you use solid type.

Works the same 1,2,4 syntax as padding


position: static|relative|fixed|absolute|sticky property specifies the type of positioning method used for an element
position allows to take elements out of normal document flow and make them behave differently.

default is static.
Position is accompanied by top|right|bottom|left|z-index attributes

static: Static positioned elements are not affected by the top|bottom|left|right properties. is not positioned in any special way, it is always positioned according to the normal flow of the page.

relative: is positioned relative to its normal positoin. other content will not be adjusted to fit into any gap by the element.

fixed: elements are positioned relative to the viewport, meaning it always stays in the same place even if the page is scrolled. top|bottom|left|right are used to position the element.
works the same as absolute but instead of fixing relative to the parent element it usually places relative to visible portion of the viewport (an exception is if one of the elements ancestors is a fixed containing block bc it's transform prop has a value other than 'none'(so if ancestor has a set transform, fixed won't place the element relative to viewport)) .
This prop is useful for UI elements that are fixed in place like nav menus that are always visible no matter how much the page scrolls.

absolute: positioned relative to the nearest positioned ancestor. However, if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
absolute positioned elements are removed from the normal flow, and can overlap elements.

[0,0] is placed on the top left corner of the parent element. an absolutely positioned element no longer exists in the normal document flow. so other elements act as if the element no longer exists and is next to them. useful for isolated layouts that don't interfere with other elements on the page like popup boxes, controle menus, rollover panes, drag n' drop UI features... (modals as well?)

sticky: is positioned based on the user's scroll position.
a sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport. then it 'sticks' in place.

hybrid between relative and fixed. positioned element acts like it's relative until it's scrolled to a certain threshold (e.g, 10px from the top of the viewport), after which it becomes fixed. can be used to cause a navigation bar or an index to scroll with the page until a certian point and then stick to the top of the page.


this prop specifies the display behavior (the type of rendering box) of an element.
display: none|inline|block|inline-block;
default is inline

inline: for things to stay on one continuous line.
displays an element as an inline element (like ) any height and width props will have no effect

block to space things out.
displays elements as a block element (like <p>). starts on a new line and takes the whole width,

inline-block to get benefits of both, like setting the margin of top and bottom but still at the same line.
contents: makes the container disappear, making the child elements the next level up in the DOM.

flex and grid displays an element as a block-level flex or grid container.

inline-flex, inline-grid inline-table display an element as an inline-level container.

Grid display:grid;

allows to specify the exact grid, which is great for building based on a design or ux wireframe.

grid template

grid-template-rows:: the same as columns but for rows.
grid-template-columns: %|px|em|fr|auto|repeat(n, %)|min-content|max-content|minmax(min,max); defines how many columns the grid has, and the sizing (width) of each individual cell.
the auto value take the width of the entire parent element (similar to how 1fr does it), if there are 2 elements with auto they will divide the space equally. the difference between 1fr and auto is that auto automatically sets the size of the columns to the size of the container or the size of the contents of the elements in the column, depending on the situation.
min-content keyword value means it will expand the minimum necessary to view the content. for text it will take every softwrapping opportunity, so it would take width of the longest word of the text.
max-content represents the maximum width of the content. for text this means that the content will not wrap at all, even if it causes overflows.


grid-template-areas: <grid-area-name>|.|none *n^2: defines a grid (that must be rectangular, not T or L shapes) by referencing names of the grid area which are specified with the grid-area property. I can name the areas whatever I want.
other values can be . which signifies an empty cell and
none that means no areas are defined.
Pasted image 20230917215335.png

grid-template: rows / columns is shorthand for grid-template-row and column
grid-template: <grid-template-areas> <grid-template-rows> / <grid-template-columns>;

grid: none|<grid-template-rows> / 
<grid-template-columns>|<grid-template-areas>|<grid-template-rows> / 
<[grid-auto-flow] <rid-auto-columns>|<[grid-auto-flow] grid-auto-rows> /

auto placement of elements

grid-auto-flow: row | column; This prop controls the auto-placement algorithm. row fills each row in turn, adding new rows as necessary. column fills each column in turn, adding new columsn as necessary.
default is row

grid element positioning:


this works the same as flexbox
justify-items: start|end|center|stretch;
align-items: start|end|center|stretch;
place-items: <align-items> <justify-items>; shorthand

for single item positioning:
place-self: <align-self> <justify-self>; shorthand


Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container.


implicit grid

when there are more grid items than cells in a grid, or when a grid item is placed outside of the grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid + these additional implicit lines forms the implicit grid.
the widhts and height of the implicit tracks are set automatically. They are only big enough to fit the placed grid items, to change their default behaviour:

gives control over the implicit tracks. they accept the same values a grid-template-columns; except the function repeat()


column-gap: %|px|; sets the size of the gap between grid columns.
row-gap: %|px; the same as column-gap but for rows.
gap: <row-gap> / <column-gap>; shorthand for row-gap and row-column. or if only one value is given, it sets that value for both rows and columns.

grid area / selection

grid-column-start: n | span n : defines where the selection starts. It is counted by lines starting the count from 1. e.g a 2x2 grid has 3 lines that go from top to bottom
grid-column-end: n | span n
grid-column: n|span n / n|span n: shorthand syntax for grid-column-end and grid-column-start.
don't add the () and note the slash separating the values.

grid-row:: the same as grid-column but in the row direction.
grid-area: row-start / column-start / row-end / column-end: shorthand for both column and row.


order: n: if grid items aren't explicitly placed with grid-area, they are placed auto in the order of the source code.
default is 0
z : n: similar to order but for the z axis.

Flex display:flex

For general purposes and spacing as you go

also look into space-evenly and gap props that have been added not so long ago.

flex-basis is a starting point, describes the sizing of things if there was enough space to contain every element. if they don't have space, they don't complain.
auto falls back to the with prop.
flex-shink: 0; means the element won't shrink past it's flex-basis value
flex basis is a hypothetical size before any growing or shrinking begins.

You can set custom positions as well by setting position:relative; and absolute on the child, the we set the top,right,bottom,left values to pixel or % values

difference between justify-content, justify-items and justify-self



Which are specified with a semicolon :. Ex button:hover{}
Inside pseudo classes you can specify transition (as in time it takes to transition from one state to another) and transform(changing position) properties which animate the effect.


font-family: list of fonts to be used, usually has more than one font, in case the 1st fails.
font-size: typically don't want to set absolute px value bc they won't change if the user changes their browser font setting, instead use em or rem values
color: ;: sets font color


background-color, background-image,
-repeat, -size, -position,
Can use backgroundshorthand syntax to put everything in one line

Box and drop shadow

Css generator cssmatic.co.

Vendor prefixes

-webkit- , -moz-
Are for new and experimental attributes that get added to css and backwards compatibility w older browsers


Google the animation u want lol
Also has shorthand syntax animation like background

Media Queries

Allow to style for mobile and different screen sizes

Breakpoints are kinda like if statement that check the screen size.


Like Sass
Add more syntax, variables, nested props
Doesn't do anything normal css can't.

In franeworks like react you will see css in js, which is called a styled component pattern.


You can write a global css file, but doesn't scale with bigger apps and naming gets difficult. You can use naming conventions but they are hard to get right.

In Next.js you can write css module files which are scoped to the module so naming doesn't conflict. You can also share properties within modules so you don't have to rewrite everything


sass less stylus

Allows to write non css syntax that get compiled i to actual css
Scss (sass) adds features like variables, functions and mixins. This is great but is an entire different language, new features to learn, overhead, etc...

You can also write css in js like the styled components lib in React. Or natively with Svelte.
Benefits are doing programmatic stuff, creating dynamic styles (that change depending on app state) and scoped styles

One way to make web apps actually look good is by adding utilitiy libs like tailwind and windicss.
Big collection of utilitiy classes.
With tailwind you can write styles in an elements class attribute. Which tends to be faster since you write the style on the fly with lsp autocomplete.

Not everyone likes the utility class approach. Doesn't provide pre built components

Css frameworks

Like bootstrap or volma
Provides pre built styled components like buttons and cards.
To add to a project npm install it, import the bootstrap css styles file and start referencing the classes in the components, inside the className attr.

If only using the bootstrap style sheet you may want to wrap styles in a components in a way that can be efficiently used by other components.
Ex: u can have a bootstrap button component to avoid having to write the className references everytime.
Bootstrap ends up with a large bundle size mc of many unused styles.

Components libraries

In react it is recommended to use components libraries.
React Bootstrap, Mantine, ant, material design, chakra, tamagui