Heading 1-6

Paragraph

/* Also commenting stuff out */
Italizied text Bold text
Title
alternative description diagram of the layout of a website
Adds caption to a figure element
Text to link

Adding the attribute target="_blank" will open the page in a new tab
element { property: value; } Can also use #id instead of element Can also also use .class Use seperate styles.css file then link to it .class, .class, element { propery: value; } .container::after { content: ""; width: 860px; } img { width: max(250px, 25vw); } element 1 > element 2 { } element:visted element:hover element:active background-color: color; background-image: url(); box-shadow: offsetX offsetY blurRadius spreadRadius color; higher blurRadius = greater blurring cursor: pointer; list-style: circle/none; scroll-behavior: smooth; ::after :not(element to exclude) :first-of-type h1 .flex span:first-of-type :last-of-type :nth-of-type () text-align: center/left/right; font-family: font, backup font; font-style: italic/bold; font-size: px; text-transform: uppercase; color: color; font-weight: number, bold, normal; letter-spacing: px; text-align: center, right; text-decoration: none; width: px; or % of parent element margin-left/right/top/bottom: auto/px auto/px; values are top, horizontal, vertical, bottom also top, right, bottom, left display: inline-block/block; padding-left/right/top/bottom: px; max-width: px; height: px; vh = viewport height ex. 100vh gap: row/column-gap; box-sizing: border-box; position: sticky/absolute/relative; z-index: number; top: number; left: number; border-color: color; border-width: px; border-style: solid/dotted/dashed/double; border-left/right: width style color; border-radius: px; top-left bottom-right top-right bottom-left border: none; border-collapse: collapse filter: blur(px); transform: rotate(deg); - for counter clockwise object-fit: cover; cover = cropping to fit img container, maintains aspect ratio aspect-ratio: something/something; box-sizing: content-box/border-box; Browsers includes border and padding when determining size unless using border-box display: flex; flex-direction: row/row reverse/column/column-reverse; row = default, horizontal with flex items from left to right row-reverse = horizontal right to left column = vertical top to bottom column-reverse = vertical bottom to top flex-wrap: wrap/nowrap; wrap moves to the next row or column justify-content: center/space-between/flex-end/space-between; align-items: center/flex-end; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; @media (feature: value) { selector { styles } } span[class~="sr-only"] { border: 0 clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; position: absolute; padding: 0; margin: -1px; } blur(px); rotate(deg) calc( ) !important element .class-name #id element[class~="class-name"] #id element[class] element[attribute="value"] differs from element.class that selects only with classes whereas this is selects element and including classes Color rgb(0, 0, 0) max 255 #hex rrggbb 0-9, A-F hsl(0-360, 1-100%, 1-100%) hue saturation lightness linear-gradient(gradientDirection, color1 point%, color2 point%, ...); gradient direction should be angledeg opacity: 0-1.0 0 = transparent, 1.0 = opaque alpha value to hsl, hex, or rgb for opacity Can use * for everything rem unit = root em, relative to the font size of html