Cascading Style Sheets (CSS) Cheat Sheet

INLINE STYLE

<h2 style="color: red">Header Text</h2>

EMBED STYLE IN HTML

<style>
h2 {
  color: red;
}
</style>

LINK STYLE TO CSS FILE

<head>
<link rel="stylesheet" href="styles.css">
</head>

STYLING CLASSES

.className {
  color: red;
}

<p class="className">Paragraph</p>

<p class="classOneName classTwoName">Paragraph</p>

SET ID TO ELEMENT

#elementId {
  color: red;
}

<p id="elementId">Paragraph</p>

STYLE AN TYPE

[type="radio"] {
  background-color: red;
}

<input type="radio">

HIERARCHY ORDER (HIGHER TO LOWER)

Inline Style
- <h2 style=“color: red”>header</h2>
ID
- <h2 id=“idName”>header</h2>
Class
- <h2 class=“className”>header</h2>
HTML
- <h2>header</h2>

OVERSIDE ALL OTHER STYLES

.className {
  color: red !important;
}

ABSOLUTE VS RELATIVE UNITIES

// absolute size of 25 pixels
25px
// relative to the 1.5 times the font site
1.5em

GRIDS

.a {
  background: lightsalmon;
}
.b {
  background: lightskyblue;
}
.c {
  background: lightpink;
}
.d {
  background: palegreen;
}
.grid {
  width: 100%;
  height: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

RESPONSIVE LAYOUTS

.a {
  grid-area: header;
  background: lightsalmon;
}
.b {
  grid-area: menu;
  background: lightskyblue;
}
.c {
  grid-area: content;
  background: lightpink;
}
.d {
  grid-area: footer;
  background: palegreen;
}
.grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-row: 100 auto 1fr auto;
  grid-gap: 10px;
  grid-template-areas:
  "header"
  "menu"
  "content"
  "footer";
}
@media (min-width: 300px){
  .grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-row: auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "menu header"
      "menu content"
      "footer footer";
  }
}
@media (min-width: 450px){
  .grid {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-row: 100 auto 1fr auto;
    grid-gap: 10px;
    grid-template-areas:
      "menu header"
      "menu content"
      "menu footer";
  }
}

<div class="grid">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

Link animation:

<html><style>
a {
  box-shadow: inset 0 0 0 0 #ff0000;
  color: #888888;
  margin: 0 -.25rem;
  padding: 0 .25rem;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
  box-shadow: inset 300px 0 0 0 #00ff00;
  color: #0000ff;
}
</style>
<body><a href="http://"><big>Link Animation One</big></a></body></html>

<html><style>
a {
  position: relative;
}
a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #ff0000;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}
a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
</style>
<body><a href="http://"><big>Link Animation Two</big></a></body></html>

SEE ALSO

Responsive Design [Link]

JS Cheat Sheet [Link]