CSS SECTION!!!

selectors

how css functions is that you make lil boxes (selectors) with curly brackets for each thing you wanna style

how to reference each thing:

• for all elements, literally just say the name
• id's are referenced with an # before the id name
• class is denoted with . before the class name
• you can reference an element with a certain id or class by just slapping on the same referencing scheme after the element name
• [*] references all the elements in the html
• you can also use commas to refer to a couple different elements

colors and background:

• color, background-color
• use rgba, it lets you set alpha values
• you can set opacity seperately too
• background-image:url(photo.png), background-repeat is also an option
• you can fix images into places in the background with background-position and background-attachement
• shorthand it with background: color picture repeat position

borders/making fake boxes

• borders have a shorthand, border:10px solid red and you can do stuff like border-left
• padding is space between the text and border, just use padding:2% or smth and also do padding-top
• margin is the space around the border, most stuff that apply to borders also apply to margins
• also outlines also exist, they're on borders

text

• use text-decoration for styling the text like you would on docs, there are self explanitory variations of this
• line-height, word-spacing, and letter-spacing all can utilize a negative integer
• white-space:nowrap can also prevent your text from wrapping, thus following the whitespace
• text-shadow exists
• by adding multiple fonts on your font family style, you put backup fonts in place

links

there are 4 states in which a link can be in:

• a:link - unvisited
• a:visited - explanitory
• a:hover - active when the user hovers over the link
• a:active - activated when the user clicks the link
• when styling, you must put the styles in that order

the display property

as you know, inline elements take up as much space as needed whereas block elements will take up full width

display:none removes stuff from the page entirely while visibility:none simply hides it but still takes space