Joshua Lin (@konekoya)

Let's talk about CSS

Cascading Style Sheets

  • CSS is the code you use to style your webpage.
  • Like HTML, CSS is not really a programming language.
  • it is a style sheet language.
  • It lets you apply styles selectively to elements in HTML documents.

 

p {
  color: red;
}

Select all paragraph elements from the DOM and apply the text color

CSS selectors

  • Type: div, li, p, a
  • ID: #myEl. (You normally won't reach to this...)
  • Class: .myEl, li.myEl or .first.second.third
  • Universal: *
  • Attributes: a[href], div[class="myEl"]
  • Pseudo: :visit, :hover, :focus

 

https://codepen.io/JoshuaMilton/pen/mdJKmJX?editors=1100

CSS Box model

Inline and block elements

Inline:

  1. respect left & right margins and paddings, but not top & bottom
  2. cannot have a width and height set
  3. allow other elements to sit to their left and right.
  4. see very important side notes on this here.

​Block:

  1. respect all of those
  2. force a line break after the block element
  3. acquires full-width if width not defined

CSS Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

Before we go...

  • Debugging tips
  • CSS, SASS, SCSS and CSS-in-JS?
  • Can I use

Thank you 🙂

Made with Slides.com