CSS

.colored-text {
  color: #ff99cc;
}

/* other ways to write colors */
.color-name {
  color: pink;
}

.rgb-color {
  color: rgb(255, 153, 204);
}

.hsl-color {
  color: hsl(330, 100%, 80%);
}

<p style="color: #ff99cc;">
  Replace_with_your_text
</p>

.background-box {
  background-color: #ffcc66;
  color: black;
  padding: 12px;
}

/* other color examples */
.black-bg {
  background-color: black;
}

.pink-bg {
  background-color: pink;
}

.hex-bg {
  background-color: #101336;
}

<div style="background-color: #ffcc66; color: black; padding: 12px;">
  Replace_with_your_text
</div>

.font-example {
  font-family: Arial, sans-serif;
}

/* common web safe fonts */
.arial {
  font-family: Arial, sans-serif;
}

.verdana {
  font-family: Verdana, sans-serif;
}

.tahoma {
  font-family: Tahoma, sans-serif;
}

.trebuchet {
  font-family: "Trebuchet MS", sans-serif;
}

.georgia {
  font-family: Georgia, serif;
}

.times {
  font-family: "Times New Roman", serif;
}

.courier {
  font-family: "Courier New", monospace;
}

.monospace {
  font-family: monospace;
}

.cursive {
  font-family: cursive;
}

.fantasy {
  font-family: fantasy;
}

<p style="font-family: 'Courier New', monospace;">
  Replace_with_your_text
</p>

.small-text {
  font-size: 12px;
}

.medium-text {
  font-size: 20px;
}

.big-text {
  font-size: 32px;
}

/* common units */
.pixel-size {
  font-size: 20px;
}

.percent-size {
  font-size: 120%;
}

.em-size {
  font-size: 1.5em;
}

<p style="font-size: 20px;">
  Replace_with_your_text
</p>

.tight-lines {
  line-height: 1;
}

.normal-lines {
  line-height: 1.5;
}

.spaced-lines {
  line-height: 2;
}

.pixel-line-height {
  line-height: 28px;
}

<p style="line-height: 1.8;">
  Replace_with_your_text
</p>

.normal-spacing {
  letter-spacing: 0;
}

.spaced-text {
  letter-spacing: 3px;
}

.very-spaced-text {
  letter-spacing: 6px;
}

.tight-text {
  letter-spacing: -1px;
}

<p style="letter-spacing: 3px;">
  Replace_with_your_text
</p>

.left-text {
  text-align: left;
}

.center-text {
  text-align: center;
}

.right-text {
  text-align: right;
}

.justify-text {
  text-align: justify;
}

<p style="text-align: center;">
  Replace_with_your_text
</p>

.underline-text {
  text-decoration: underline;
}

.crossed-text {
  text-decoration: line-through;
}

.overline-text {
  text-decoration: overline;
}

.no-underline-link {
  text-decoration: none;
}

.wavy-underline {
  text-decoration: underline wavy #ff99cc;
}

<p style="text-decoration: underline;">
  Replace_with_your_text
</p>

.uppercase-text {
  text-transform: uppercase;
}

.lowercase-text {
  text-transform: lowercase;
}

.capitalized-text {
  text-transform: capitalize;
}

.normal-text {
  text-transform: none;
}

<p style="text-transform: uppercase;">
  Replace_with_your_text
</p>

<p style="text-transform: lowercase;">
  Replace_with_your_text
</p>

<p style="text-transform: capitalize;">
  Replace_with_your_text
</p>

.sized-box {
  width: 200px;
  height: 80px;
}

/* common width and height options */
.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.auto-width {
  width: auto;
}

.max-width-box {
  max-width: 600px;
}

.min-height-box {
  min-height: 200px;
}

<div style="width: 200px; height: 80px;">
  Replace_with_your_text
</div>

.block-example {
  display: block;
}

.inline-example {
  display: inline;
}

.inline-block-example {
  display: inline-block;
}

.hidden-example {
  display: none;
}

.flex-example {
  display: flex;
  gap: 10px;
}

<a href="#" style="display: inline-block;">
  Replace_with_your_text
</a>

.padding-box {
  padding: 20px;
}

/* different padding sides */
.padding-top {
  padding-top: 20px;
}

.padding-right {
  padding-right: 20px;
}

.padding-bottom {
  padding-bottom: 20px;
}

.padding-left {
  padding-left: 20px;
}

/* top/right/bottom/left */
.custom-padding {
  padding: 10px 20px 30px 40px;
}

<div style="padding: 20px;">
  Replace_with_your_text
</div>

.margin-box {
  margin: 20px;
}

/* different margin sides */
.margin-top {
  margin-top: 20px;
}

.margin-right {
  margin-right: 20px;
}

.margin-bottom {
  margin-bottom: 20px;
}

.margin-left {
  margin-left: 20px;
}

/* centers block elements */
.center-box {
  margin: 0 auto;
}

<div style="margin: 20px;">
  Replace_with_your_text
</div>

.border-box {
  border: 3px solid white;
  padding: 12px;
}

/* border styles */
.border-none {
  border: 3px none white;
}

.border-solid {
  border: 3px solid white;
}

.border-dotted {
  border: 3px dotted white;
}

.border-dashed {
  border: 3px dashed white;
}

.border-double {
  border: 3px double white;
}

.border-groove {
  border: 3px groove white;
}

.border-ridge {
  border: 3px ridge white;
}

.border-inset {
  border: 3px inset white;
}

.border-outset {
  border: 3px outset white;
}

<div style="border: 3px solid white; padding: 12px;">
  Replace_with_your_text
</div>

.rounded-box {
  border-radius: 12px;
}

.very-rounded-box {
  border-radius: 50px;
}

/* circle shape works best on square images or boxes */
.circle {
  border-radius: 50%;
}

<div style="border-radius: 12px;">
  Replace_with_your_text
</div>

.scroll-box {
  height: 100px;
  overflow: auto;
}

.hidden-overflow {
  overflow: hidden;
}

.visible-overflow {
  overflow: visible;
}

.horizontal-scroll {
  overflow-x: auto;
}

.vertical-scroll {
  overflow-y: auto;
}

<div style="height: 100px; overflow: auto;">
  Replace_with_your_text
</div>

.relative-box {
  position: relative;
}

.corner-label {
  position: absolute;
  top: 5px;
  right: 5px;
}

.fixed-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.sticky-title {
  position: sticky;
  top: 0;
}

<div style="position: relative;">
  Replace_with_your_text
</div>

.gradient-box {
  background: linear-gradient(90deg, #ce4c8d, #99ddff);
}

/* other gradient directions */
.gradient-sideways {
  background: linear-gradient(90deg, #ce4c8d, #99ddff);
}

.gradient-up-down {
  background: linear-gradient(180deg, #ce4c8d, #99ddff);
}

.gradient-corner {
  background: linear-gradient(45deg, #ce4c8d, #99ddff);
}

.radial-gradient {
  background: radial-gradient(circle, #ce4c8d, #99ddff);
}

<div style="background: linear-gradient(90deg, #ce4c8d, #99ddff); padding: 20px; color: black;">
  Replace_with_your_text
</div>

.glow-text {
  text-shadow: 0 0 8px #ffcc66;
}

.shadow-text {
  text-shadow: 3px 3px #000000;
}

.multiple-shadow-text {
  text-shadow: 2px 2px #000000, 0 0 8px #ffcc66;
}

<h3 style="text-shadow: 0 0 8px #ffcc66;">
  Replace_with_your_text
</h3>

<h3 style="text-shadow: 3px 3px #000000;">
  Replace_with_your_text
</h3>

.shadow-box {
  box-shadow: 6px 6px 0 #000000;
}

.glow-box {
  box-shadow: 0 0 12px #ff99cc;
}

.soft-shadow-box {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.multiple-shadow-box {
  box-shadow: 4px 4px 0 #000000, 0 0 12px #ffcc66;
}

<div style="box-shadow: 6px 6px 0 #000000;">
  Replace_with_your_text
</div>

.fully-visible {
  opacity: 1;
}

.faded {
  opacity: 0.6;
}

.ghost {
  opacity: 0.3;
}

.invisible {
  opacity: 0;
}

<p style="opacity: 0.6;">
  Replace_with_your_text
</p>

.tilted-box {
  background: #ffcc66;
  color: black;
  padding: 12px;
  display: inline-block;
  transform: rotate(-5deg);
}

/* other transform examples */
.moved-box {
  transform: translate(20px, 10px);
}

.bigger-box {
  transform: scale(1.2);
}

.skewed-box {
  transform: skew(10deg);
}

<div style="background: #ffcc66; color: black; padding: 12px; display: inline-block; transform: rotate(-5deg);">
  Replace_with_your_text
</div>

.button-style {
  background: #ffcc66;
  color: black;
  border: 3px outset white;
  padding: 10px 16px;
  text-decoration: none;
}

.button-style:hover {
  background: #ff99cc;
}

<button style="background: #ffcc66; color: black; border: 3px outset white; padding: 10px 16px;">
  Replace_with_your_text
</button>

.pointer-cursor {
  cursor: pointer;
}

.help-cursor {
  cursor: help;
}

.move-cursor {
  cursor: move;
}

.text-cursor {
  cursor: text;
}

.custom-cursor {
  cursor: url("https://www.rw-designer.com/cursor-view/109787.png") 16 16, auto;
}

<button style="cursor: url('https://www.rw-designer.com/cursor-view/109787.png') 16 16, auto;">
  Replace_with_your_text
</button>