Ashwin Sundar

Incomplete CSS Cheatsheet

Introduction

Some running notes about CSS.

I first used CSS at least ten years ago. Since then, I have acquired knowledge and skills piecemeal. I recently decided to sit down and learn the best practices of the specification in 2023 from this site. Here are my summarized notes.

Table of Contents

The Box Model

__________     ________border box________    _______________________
          |    |       padding box      |   |                      |
_______   | m  |  ___________________   | m |  _________________   |
       |  | a  |  |                  |  | a | |                 |  |
       |  | r  |  |                  |  | r | |                 |  |
       |  | g  |  |      |\---/|     |  | g | |                 |  |
       |  | i  |  |      | o_o |     |  | i | |                 |  |
       |  | n  |  |       \_^_/      |  | n | |                 |  |
       |  |    |  |                  |  |   | |                 |  |
       |  | b  |  |    content box   |  | b | |                 |  |
       |  | o  |  |                  |  | o | |                 |  |
       |  | x  |  |                  |  | x | |                 |  |
_______|  |    |  |__________________|  |   | |_________________|  |
          |    |                        |   |                      |
__________|    |________________________|   |______________________|

Selectors

                .my-css-rule {
                    __________________
  Declaration -->  | background: red; |
                    ------------------
                     ________   ________
      Property -->  | color: | | beige; | <-- Value
                     --------   --------
                    font-size: 1.2rem;
                }

Types of Selectors

Universal selector

* {
    color: green;
}

Type selector

<section>...</section>

section {
    padding: 2em;
}

Class selector

<div class = "my-class">...</div>

.my-class {
    color: red;
}

Id selector

    <div id = "my-id">...</div>

#my-id {
    border: 1px solid blue;
}

Attribute selector

<div data-type = "primary">...</div>

[data-type = 'primary'] {
    color: red;
}

/* matches any element with the data-type attribute, regardless of value */
[data-type] { 
    background-color: yellow; 
}

group selector

<div class = "first">This is important</div>
<div class = "second">So is this</div>
<div class = "third">And this</div>

.first,
.second,
.third {
    font-size: 2em
}

Complex Selectors

Descendant selector

<div>
    <p>This is styled by a descendant selector
        <p>So is this</p>
    </p>
</div>

Descendant combinator
   |
   |
   v
div p {
    color: blue;
}

Child selector

<div>
    <span>This span is styled</span>
    <section>
        <span>This one is not, because it's not a direct child of a div</span>
    </section>
</div>

Child combinator
    |
    |
    v
div > span {
    font-size: 2em;
}

Next-sibling selector

<p>This is a paragraph</p>
<span>This span is styled by a next-sibling selector</span>
<span>This one isn't</span>

Next-sibling combinator
  |
  |
  v
p + span {
    color: red;
    font-weight: bold;
}

Subsequent-sibling selector

<div>
    <p>This paragraph is styled by a subsequent-sibling selector</p>
    <span>I'm not styled</span>
    <p>But I am</p>
</div>

Subsequent-sibling combinator
    |
    | 
    v
div ~ p {
    color: green;
}

Compound selectors

<a class = "my-class">...</a>

a.my-class {
    color: red;
}

The Cascade

The Cascade is an algorithm for solving conflicts where multiple CSS rules apply to an HTML element. It decides which single style value applies for any particular element. To resolve conflicts, the algorithm processes CSS rules through the following stages:

Position and order of appearance

Specificity

Origin

  1. User Agent styles with !important
  2. Local user styles with !important
  3. Authored CSS with !important
  4. Authored CSS
  5. Local user styles
  6. User Agent styles

Importance

  1. transition rule-type
  2. !important rule-type
  3. animation rule-type
  4. all other rules, such as font-size, background, or color

Specificity

Specificity is awarded on a points system. CSS rules with more points are used over rules with fewer points.

Scoring

Rule Points Example
Universal selector 0 * {
 color:red;
}
Element selector 1 div {
 color:red;
}
Pseudo-element selector 1 ::selection {
 color:red;
}
Class selector 10 .my-class {
 color:red;
}
Pseudo-class selector 10 :hover {
 color:red;
}
Attribute selector 10 [href=’#’] {
 color:red;
}
ID selector 100 #myID {
 color:red;
}
Inline style attribute 1000 <div style = "color: red;"></div>
!important rule 10000 .my-class {
 color:red !important;
}