CSS Colors and Typography

Working with Colors in CSS

CSS offers multiple ways to define colors, each with its own advantages for different use cases.

Color Formats

Named Colors

color: red;
color: blue;
color: forestgreen;

Hexadecimal

color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */
color: #333;    /* Short form for #333333 */

RGB and RGBA

color: rgb(255, 0, 0);        /* Red */
color: rgba(255, 0, 0, 0.5);  /* Semi-transparent red */

HSL and HSLA

color: hsl(0, 100%, 50%);     /* Red */
color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */

Typography Properties

Font Family

/* Web-safe fonts */
font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: "Courier New", monospace;

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
font-family: "Roboto", sans-serif;

Font Properties

font-size: 16px;        /* Absolute size */
font-size: 1.2em;       /* Relative to parent */
font-size: 1.2rem;      /* Relative to root */

font-weight: normal;    /* 400 */
font-weight: bold;      /* 700 */
font-weight: 300;       /* Light */

font-style: normal;
font-style: italic;
font-style: oblique;

Text Properties

text-align: left;
text-align: center;
text-align: right;
text-align: justify;

text-decoration: none;
text-decoration: underline;
text-decoration: line-through;

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

line-height: 1.5;       /* 1.5 times font size */
letter-spacing: 2px;
word-spacing: 4px;

Practical Typography Example

<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

body {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 1rem;
}

.highlight {
    background-color: #fff3cd;
    color: #856404;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.quote {
    font-style: italic;
    font-size: 1.1rem;
    color: #6c757d;
    border-left: 4px solid #007bff;
    padding-left: 1rem;
    margin: 1.5rem 0;
}
</style>