• Notion tags
• table of contents

resource links

subpages

CSS gradients

flexbox

CSS grid

general

• when writing your css within the html file, the <style></style> tag goes inside the head
  • this is the same spot where you would put <link rel="stylesheet" href="styles.css">if using an external stylesheet too!
  • btw, if you’re using multiple stylesheet link tags to bring in external resources like fonts, you should list those external ones above your own stylesheet, so that they’re loaded first (not sure how important this is, just a random piece of advice that i forget where i saw)
• use the value unset to cancel out the previous rules for a property
• within a given selector, rules are applied in order from top to bottom. that means that statements lower down in the code block take priority over ones higher up.
  • e.g. if you have border: none on one line and border-bottom: 1px on the next line, you’ll get no borders on the top or sides but have it on the bottom. if you reversed the order of those lines, there would be no borders—the later rule would overwrite the prior.
• inheritance: “I’m just gonna do what my mama’s doing” (to quote Jess)

selectors

• CSS Diner to practice
• type selector is what you call the default way of writing a css rule, the kind that affects every element of that type on the page — where “type” just means what kind of element/tag it is. in other words, p or img or a would be a “type”
• a selector that looks like .class element {} means “all the instances of element found inside a parent element that has this class” – so like, if you assign class to a div, then instead of applying these styles to the div itself, it applies them to every instance of element nested inside of that div.
• a selector like element.class means “all of that element who have that class” instead
• ‣
• pseudo-selectors refer to like, a variation or state of an element?? they look like a:visited { propertyName: propertyValue; }
  • colon in between the element and its variation, no spaces
  • goes on a separate line from any rules for that element’s regular type selector. eg:
  • or they refer to something that doesn’t actually exist in the HTML structure, like the ::before and ::after pseudo-selectors, which append something new to the start or end of an element

measurements and units

• when you’re setting a measurement to 0, you don’t need to use units

• if you give a unitless number for a property like length, it will interpret that number as being in px by default

• relative units

layout

• when specifying a width property in terms of percent, that refers to percent of the parent element’s width
  • it’s calculated after cutting out any padding on the parent