3. CSS Typography, Fonts, Links & Tables

Styling text, web safe fonts, Google Fonts, link pseudo-states & data tables

Module 1: CSS Text Alignment, Transformation & Shadows

Controlling text appearance and spacing.

Core Theory & Principles

text-align: left, right, center, justify.
text-transform: uppercase, lowercase, capitalize.
letter-spacing & line-height: control character and line spacing.
text-shadow: offset-x offset-y blur-radius color.

Practical Key Takeaways

Mastering CSS Text Alignment, Transformation & Shadows builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - CSS Text Alignment, Transformation & Shadows

<div style="background: rgb(30, 41, 59); padding: 20px; border-radius: 8px; text-align: center;">
    <h2 style="color: rgb(56, 189, 248); text-transform: uppercase; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0,0,0,0.8);">Uppercase Glowing Title</h2>
    <p style="color: rgb(148, 163, 184); line-height: 1.8;">Clean paragraph text with enhanced line-height and letter-spacing.</p>
</div>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.

Module 2: Styling Links & Tables

Customizing anchor states and creating zebra-striped tables.

Core Theory & Principles

a:link - unvisited link.
a:visited - visited link.
a:hover - when user hovers over link.
a:active - moment link is clicked.
Table styles: border-collapse, nth-child(even) for zebra stripes.

Practical Key Takeaways

Mastering Styling Links & Tables builds fundamental development capability. Review practical code and outputs carefully.

💻 Practical Code Example - Styling Links & Tables

<table style="width:100%; border-collapse: collapse; background: rgb(30, 41, 59); color: white; border-radius: 8px; overflow: hidden;">
  <tr style="background: rgb(15, 23, 42); color: rgb(56, 189, 248);">
    <th style="padding: 10px; text-align: left;">Rank</th>
    <th style="padding: 10px; text-align: left;">Language</th>
    <th style="padding: 10px; text-align: left;">Rating</th>
  </tr>
  <tr style="border-bottom: 1px solid rgb(51, 65, 85);">
    <td style="padding: 10px;">1</td>
    <td style="padding: 10px;">CSS3 / HTML5</td>
    <td style="padding: 10px;">Top Rated</td>
  </tr>
  <tr>
    <td style="padding: 10px;">2</td>
    <td style="padding: 10px;">Java Full Stack</td>
    <td style="padding: 10px;">Mastery</td>
  </tr>
</table>

📤 Expected Output / Browser Rendered Result:

Output Verified Cleanly.