Skip to content

Latest commit

 

History

History
52 lines (48 loc) · 3.04 KB

scribbles.md

File metadata and controls

52 lines (48 loc) · 3.04 KB

Unsorted pointers, code, scribbles

  • There is a lot of overriding that happens in css, and most of the time it has to do with typography.

    • basics should be kept in mind to avoid unintended behaviours.

  • chrome debugger shows the user agent stylesheets which makes it easy to see if any browser defaults are being applied

  • firefox's debugger has a more clean debugger imo also good for reading inherited and overriding styles

  • line-height one of the few unitless properties

    • line-height: 0.9 means 0.9 is relative to the font-size, or like 0.9em

  • For majority of the smaller text line-height of 1.5, 1.6 looks good so setting in head saves efforts.

    • For large headers overriding it to between 0.9 to 1.2 appears a good fit
    • all caps title 0.8 to 0.9
    • subtitle 1.2 or 1.4 between (title and body)

  • setting temporary background: anyColor helps in setting layout

  • Try

    • colors #414141 in body, #7d7d7d for subtitle, #ca5e10 for a or links
    • font-family "PT Serif", serif; for body, "Cinzel", serif for h1
    • margin for header 6rem 0, and h1 0 with font weight 900
    • to avoid title or subtitle spreading to the screen width for larger screens set in header max-width: 75rem with margins: 6rem auto and padding: 0 2rem
      • the auto centers the text by setting side margins automatically on both sides
      • the 2rem in padding will keep a gap between the edge of screen and the text

  • online tool to check and compare specificity

  • selecting vs inheriting property

  • descendant selector

    • .card .button {background: red}

.button--light {background: yellow}

<html><div class=card><div class="button button--light"> Hello </div></div></div></html>
      in the example above, the "Hello" will have red backgroung istead of yellow because of the descendant selector (.card .button) having higher specificity
      • works on any level of descendant, child, grand-child
      • for direct descendant use .card > .button

  • more on this

  • inline-block >> the padding set to such items do not add to the total in the box model // rough pointers

    • .button{display: block} vs display: inline-block >> block will stretch the content to the whole width where as inline-block will stretch as much as the content only

  • inline elements span, links, em, strong

    • go one next to another instead of on over the other like a stack(depending on the writing mode)

  • block level elements can have either block elements or inline elements, not both.

  • html creates anonymous boxes around things that are not explicitly defined as block on inline

    • <html>
  <div>
  This is some text
  <p> followed by some more text </p>
  and more and more text
  </div>
</html>
      In this example the first line and the second line are wrapped around an anonymous box by the browser and the 3 lines act as separate blocks.

  • elements inside a block formatting context will go on top of one another (even if there is room on the side)