bullet list of css tips

css-tips.md

Margin

• default margin on the top and bottom of text elements (headings, paragraphs, lists), is equal to the font-size.
  • (for h1 it's actually a little bit smaller, but it's close enough)
• Whenever two margins touch each other, they will collapse into one single margin instead of two of them which push against one another
• To center something horizontally on the screen use auto margin, like section { margin: 0 auto; }

Selectors

• Select multiple elements with comma
  • h1, h3, p { margin-top: 0; }
• Last selector wins, so p font-size would be 20px in this example:

  p {
    font-size: 10px;
  }
  
  p {
    font-size: 20px;
  }

Padding

Block elements

• Always start a new line of content
• Default width: 100%
• Defauly height is 0, but it will grow to fit the contenti inside it

Inline elements

• Do not start new lines (goes with the flow of contenta around it)
• Does not accept width, height, or margin top and bottom
• Padding top and bottom can cause overlapping issues

span

• Used to add style within a heading or a paragraph. It works much like the em and strong elements, but without any default styling or meaning attatched to it. Because they are generic, like a div, we'll often use a class on them.

links

• The different link states:
  • a:link - the default, normal state of a link
  • a:visited - a link to a page/site that you've already visited
  • a:focus - when someone selects a link without clicking on it (usually with keyboard navigation)
  • a:hover - when you "hover" the mouse cursor over a link
  • a:active - when someone is actively clicking on a link
• Order matters
  • A link often meets the requirements for 2 or more of the above states at any given time, so the order you put them in your CSS really matters. In general, it should follow the order like you see in the above list.
• easier to just use a without a pseudo-class to set all pseudo-states at once
• style links so people know it's obvious they are links
• change the color on hover and focus (like this a:hover,a:focus{ })
• leave text-decoration on, or if you turn it off then make sure it's still obviously a link
• include styles for :focus

Button Styling

.button {
  display: inline-block;
  background-color: var(--accent);
  padding: 15px 30px;
  text-align: center;
  border-radius: 15px;
  color: var(--primary-bg-color);
  border: 1px solid var(--primary-bg-color);
}

.button:hover {
    background: var(--accent-80-pct);
}

<a class="button" href="/about">About</a>

Add this at some point

scroll-behavior: smooth;

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
* {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }