CSS Power-ups

Why get better at CSS?

  • Consistent styles = better UX = more revenue
  • More efficiency = more work done = more revenue
  • Faster CSS = better UX = more revenue
  • We're awesome and we are proud of our craft
  • CSS is a primary component of our tech stack
  • Writing CSS is way better now than it used to be

Topics of this course

Selectors

The cascade and specificity

The box model and positioning

Property categories and CSS3 modules

Responsive CSS

CSS preprocessors

Performance and Chrome's rendering cycle

Frameworks and architecture paradigms

Selectors

(W3C Specification)

CSS is in charge of all the visual styling of an HTML document.

It works by "targeting" specific HTML elements and applying styles to those elements.

This "targeting" is achieved by selectors.

Anatomy lesson

What is a selector?


/* The "p" here is a selector. */
p {

  /* The declaration block is made up of property-value pairs. */
  color: red;

}

The whole thing is called a rule.

Basic selectors

Selector type CSS English version
Type p All paragraphs
Class .warning Elements that have warning class
ID #title Element that has ID of title

Attribute selectors

CSS English
button[disabled] Buttons that have the disabled attribute
input[type="text"] Inputs whose type attribute is equal to text
a[href*="wiki"] Inputs whose href attribute contains wiki

Pseudo-classes

CSS English
:first-child Elements that are the first child of their parent
:last-child Elements that are the last child of their parent
:nth-child(3) Elements that are the third child of their parent
:hover Elements that are currently under the mouse cursor
:active Elements that are currently being clicked
:empty Elements that have no children or text
:not(.summary) Elements that do not have the summary class

Sequences of simple selectors

CSS English
h1#title The h1 heading that has ID of title
p.intro.headline[title]:hover Paragraphs that have both the intro and headline classes and that have a title attribute and that are currently being "hovered"

We're just scratching the surface...

Find more selectors on the W3C specification.

Combinators

String together simple selectors (or sequences of simple selectors) with combinators to create super-charged selectors.

Combinator type CSS English
Descendant section li List items that are inside of sections
Child p > a Anchor tags that are immediate children of paragraphs
Adjacent sibling h1 + p Paragraphs immediately preceded by h1 headings
General sibling h1 ~ p Paragraphs preceded by h1 headings 

.main header + section > .app.demo ul > li:first-child {
  /* List items that are the first children of unordered
   * lists that are descendants of elements with both the
   * "app" and "demo" classes that are children of sections
   * immediately preceded by headers that are descendants
   * of elements with the "main" class.
   */
}

One last thing...

You can also apply the same styles to multiple selectors by separating the selectors with a comma.


p,
.subtitle {
  font-size: 14px;
}

In this example, paragraphs and elements with the subtitle class will have a font size of 14 pixels.

You can think of the comma as a logical OR, and sequences of simple selectors as a logial AND.


p, .subtitle {
  /* All elements that are either paragraphs
   * OR that have the "subtitle" class.
   */
}

p.subtitle {
  /* All elements that are of type paragraph
   * AND that also have the "subtitle" class.
   */
}

Time for a little friendly competition...