learn-css

README.md

My CSS Cheat Sheet

Tools and Utilities

https://caniuse.com/

Specificity

https://specificity.keegan.st/ How to calculate specificity

Slot 1

The first slot, the rightmost one, is the least important.

p {}                    /* 0 0 0 1 */
span {}                 /* 0 0 0 1 */
p span {}               /* 0 0 0 2 */
p > span {}             /* 0 0 0 2 */
div p > span {}         /* 0 0 0 3 */

Slot 2

The second slot is incremented by 3 things:

• class selectors
• pseudo-class selectors
• attribute selectors

.name {}                 /* 0 0 1 0 */
.users .name {}          /* 0 0 2 0 */
[href$='.pdf'] {}        /* 0 0 1 0 */
:hover {}                /* 0 0 1 0 */

slot 2 selectors can be combined with slot 1 selectors

div .name {}             /* 0 0 1 1 */
a[href$='.pdf'] {}       /* 0 0 1 1 */
.pictures img:hover {}   /* 0 0 2 1 */

You can repeat the same class and increase the specificity

.name {}              /* 0 0 1 0 */
.name.name {}         /* 0 0 2 0 */
.name.name.name {}    /* 0 0 3 0 */

Slot 3

Every element can have an id attribute assigned, and we can use that in our stylesheet to target the element.

#name {}                    /* 0 1 0 0 */
.user #name {}              /* 0 1 1 0 */
#name span {}               /* 0 1 0 1 */

Slot 4

Any inline style will have precedence over any rule defined in an external CSS file, or inside the style tag in the page header.

<p style="color: red">Test</p> /* 1 0 0 0 */

Importance

Specificity does not matter if a rule ends with !important:

p {
  font-size: 20px !important;
}

Inheritance

Some properties are inherited to all the children of that selector

https://www.sitepoint.com/css-inheritance-introduction/

Properties that inherite border-collapse border-spacing caption-side color cursor direction empty-cells font-family font-size font-style font-variant font-weight font-size-adjust font-stretch font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans quotes tab-size text-align text-align-last text-decoration-color text-indent text-justify text-shadow text-transform visibility white-space widows word-break word-spacing

Forcing properties to inherit or not inherit

p {
  background-color: inherit; 
  background-color: revert; 
}

initial: use the default browser stylesheet if available. If not, and if the property inherits by default, inherit the value. Otherwise do nothing. unset: if the property inherits by default, inherit. Otherwise do nothing.

Import

@import url(myfile.css);

/* using media descriptors */
@import url(myfile.css) all;
@import url(myfile-screen.css) screen;
@import url(myfile-print.css) print;

Atttributte selector

p[id] {
  /* ... */
}
p[id="my-id"] {
  /* ... */
}

Match attribute value portion

• *= checks if the attribute contains the partial
• ^= checks if the attribute starts with the partial
• $= checks if the attribute ends with the partial
• |= checks if the attribute starts with the partial and it's followed by a dash (common in classes, for example), or just contains the partial
• ~= checks if the partial is contained in the attribute, but separated by spaces from the rest

case incensitive

p[id="my-id" i] {
  /* ... */
}

Pseudo classes & Pseudo elements

https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-elements/#:~:text=A%20few%20common%20pseudo%2Dclasses,by%20a%20colon%20(%20%3A%20).

Let’s select the second child. So, only “Beta” will be orange:

ol :nth-child(2) {
    color: orange;
}

Copy Now, let’s select every other child starting from the second. So, “Beta,” “Delta,” “Zeta,” “Theta” and “Kappa” will be orange:

<ol>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    <li>Delta</li>
    <li>Epsilon</li>
    <li>Zeta</li>
    <li>Eta</li>
    <li>Theta</li>
    <li>Iota</li>
    <li>Kappa</li>
</ol>

ol :nth-child(2n) {
    color: orange;
}

Copy Let’s select all even-numbered children:

ol :nth-child(even) {
    color: orange;
}

Copy Let’s select every other child, starting from the sixth. So, “Zeta,” “Theta” and “Kappa” will be orange:

ol :nth-child(2n+6) {
    color: orange;
}

Colors

• RGB and RGBa rgb(255,255,255)
• Hexadecimal notation #ffffff
• HSL and HSLa hsl(0, 0%, 0%, 0.5)

Units

• Pixels
• Persentages
• Realworld
  • cm a centimeter (maps to 37.8 pixels)
  • mm a millimeter (0.1cm)
  • q a quarter of a millimeter
  • in an inch (maps to 96 pixels)
  • pt a point (1 inch = 72 points)
  • pc a pica (1 pica = 12 points)
• Relative units