Day 2 - Typography

Typography properties allow you to control the look and feel of text explicitly.

---

1. Font Family

Specifies the font for an element. Always provide fallback fonts.

• Serif: Fonts with small lines at the ends (e.g., Times New Roman).
• Sans-serif: Fonts without lines (e.g., Arial). Clean and modern.
• Monospace: All characters have the same width (e.g., Courier). Used for code.

Code:

/* CSS */
.font-serif {
    font-family: Georgia, serif;
}

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

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

Output:

---

2. Font Size

Sets the size of the text. Common units are px (pixels) and rem (relative to root).

Code:

/* CSS */
.size-small {
    font-size: 12px;
}

/* Default browser size */
.size-medium {
    font-size: 16px;
}

.size-xlarge {
    font-size: 32px;
}

Output:

---

3. Font Weight

Controls the boldness of the text.

Code:

/* CSS */
.weight-light {
    font-weight: 300;
}

/* Standard */
.weight-normal {
    font-weight: 400;
}

/* Bold */
.weight-bold {
    font-weight: 700;
}

.weight-bolder {
    font-weight: 900;
}

Output:

---

4. Text Decoration

Used to add or remove decorations like underlines. Often used to remove underlines from links.

Code:

/* CSS */
.dec-underline {
    text-decoration: underline;
}

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

a.dec-none {
    text-decoration: none;
}

Output:

---

5. Text Transform

Controls capitalization.

Code:

/* CSS */
.trans-upper {
    text-transform: uppercase;
}

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

.trans-cap {
    text-transform: capitalize;
}

Output:

---

6. Text Alignment

Controls the horizontal alignment of text.

Code:

/* CSS */
.align-center {
    text-align: center;
}

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

Output:

---

7. Line Height

Controls the space between lines of text.

Code:

/* CSS */
.lh-small {
    line-height: 1.0;
}

.lh-large {
    line-height: 2.0;
}

Output:

---

1. Single Line Overflow

By combining white-space: nowrap with overflow: hidden, you force text onto a single line. The text-overflow property then determines what happens at the cut-off point.

Code:

/* CSS */
.ov-clip {
  white-space:  nowrap;
  overflow:  hidden;
  text-overflow:  clip;
}

.ov-ellipsis {
  white-space:  nowrap;
  overflow:  hidden;
  text-overflow:  ellipsis;
}

Output:

---

2. Multiline Truncation (Line Clamp)

You can truncate text after a specific number of lines using -webkit-line-clamp. This requires setting the display to a -webkit-box.

Code:

/* CSS */
.clamp-2 {
  display:  -webkit-box;
  -webkit-box-orient:  vertical;
  -webkit-line-clamp:  2;
  overflow:  hidden;
}

Output:

---

1. Named Colors

CSS supports 140+ standard color names (e.g., red, blue, coral).

Code:

/* CSS */
.named-red {
    background-color: red;
}
.named-blue {
    background-color: blue;
}
.named-green {
    background-color: green;
}

<!-- HTML -->
<div class="named-red">Red</div>

Output:

---

2. Hexadecimal Colors (#RRGGBB)

A hex code starts with a hash (#) followed by 6 characters (0-9, A-F).

• RR (Red), GG (Green), BB (Blue)
• 00 is the darkest (0), FF is the brightest (255)

Code:

/* CSS */
.hex-tomato {
    background-color: #ff5733;
}
.hex-green {
    background-color: #33ff57;
}
.hex-blue {
    background-color: #3357ff;
}

Output:

---

3. RGB Colors (Red, Green, Blue)

Uses the rgb(red, green, blue) function. Each parameter uses a number between 0-255.

Code:

/* CSS */
.rgb-coral {
    background-color: rgb(255, 99, 71);
}
.rgb-sea {
    background-color: rgb(60, 179, 113);
}

Output:

---

4. RGBA Colors (Alpha Channel)

Same as RGB, but with an Alpha channel (0.0 to 1.0) for transparency.

• 0.0 = Fully Transparent (Invisible)
• 1.0 = Fully Opaque (Solid)

Code:

/* CSS */
/* Solid */
.rgba-100 {
    background-color: rgba(255, 0, 0, 1.0);
}

/* Semi-transparent */
.rgba-60 {
    background-color: rgba(255, 0, 0, 0.6);
}

/* Very transparent */
.rgba-30 {
    background-color: rgba(255, 0, 0, 0.3);
}

Output:

---

5. HSL (Hue, Saturation, Lightness)

Uses the hsl(hue, saturation%, lightness%) function.

• Hue: Degree on the color wheel (0=Red, 120=Green, 240=Blue).
• Saturation: 0% (Gray) to 100% (Full Color).
• Lightness: 0% (Black) to 100% (White).

Code:

/* CSS */
.hsl-red {
    background-color: hsl(0, 100%, 50%);
}
.hsl-green {
    background-color: hsl(120, 100%, 50%);
}
.hsl-blue {
    background-color: hsl(240, 100%, 50%);
}

Output: