code-crispies/docs/en-002-css.md

CSS: Extended Examples

Selectors

HTML Tag Type

p {
  color: blue;
}

h1 {
  font-size: 24px;
}

Class

.btn {
  background: red;
  padding: 10px;
}

.text {
  color: green;
}

ID

#header {
  width: 100%;
  height: 60px;
}

#main {
  margin: 20px;
}

Attribute

[type="text"] {
  border: 1px solid gray;
}

[href^="https"] {
  color: blue;
}

[alt*="icon"] {
  width: 16px;
}

Combinators

Child (>)

div > p {
  margin: 0;
}

ul > li {
  list-style: none;
}

Descendant (space)

nav a {
  text-decoration: none;
}

div p {
  font-size: 14px;
}

Next-Sibling (+)

h1 + p {
  margin-top: 0;
}

img + span {
  margin-left: 10px;
}

Subsequent-Sibling (~)

h2 ~ p {
  color: gray;
}

input ~ label {
  font-weight: bold;
}

Selector List (,)

h1, h2, h3 {
  font-family: Arial;
}

.btn, .link {
  cursor: pointer;
}

Pseudo Classes

:hover

a:hover {
  color: red;
}

button:hover {
  background: blue;
}

:active

button:active {
  transform: scale(0.95);
}

a:active {
  color: purple;
}

:before

h1:before {
  content: "→ ";
  color: red;
}

.icon:before {
  content: "★";
}

:after

a:after {
  content: " ↗";
  font-size: 12px;
}

p:after {
  content: ".";
}

:first-child

li:first-child {
  font-weight: bold;
}

p:first-child {
  margin-top: 0;
}

:last-child

li:last-child {
  border-bottom: none;
}

div:last-child {
  margin-bottom: 0;
}

:nth-child()

tr:nth-child(odd) {
  background: #f0f0f0;
}

li:nth-child(3n) {
  color: blue;
}

Shorthand Properties

margin

/* Shorthand */
.box {
  margin: 20px;
}

/* Longhand */
.box {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

padding

/* Shorthand */
.container {
  padding: 8px 12px;
}

/* Longhand */
.container {
  padding-top: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
}

border

/* Shorthand */
.box {
  border: 2px solid black;
}

/* Longhand */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

background

/* Shorthand */
.hero {
  background: url(bg.jpg) center/cover no-repeat;
}

/* Longhand */
.hero {
  background-image: url(bg.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

font

/* Shorthand */
.title {
    font: bold 24px/1.2 Arial, sans-serif;
}

/* Longhand */
.title {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.2;
    font-family: Arial, sans-serif;
}