Colors, Typography, and Basic Styling

Week 1, Day 3 - Lecture 3

Colors in CSS

Colors bring life to web design! CSS offers multiple ways to specify colors, each with its own advantages. Think of it as having different paintbrushes for different artistic needs.

Color Formats

1. Named Colors

/* 140+ predefined color names */
.element {
    color: red;
    background-color: skyblue;
    border-color: darkgreen;
}

2. Hexadecimal

/* Full hex */
.element {
    color: #ff0000;      /* Red */
    color: #00ff00;      /* Green */
    color: #0000ff;      /* Blue */
}

/* Shorthand hex */
.element {
    color: #f00;         /* Same as #ff0000 */
    color: #369;         /* Same as #336699 */
}

/* With alpha (transparency) */
.element {
    color: #ff000080;    /* 50% transparent red */
}

3. RGB/RGBA

/* RGB: Red, Green, Blue (0-255) */
.element {
    color: rgb(255, 0, 0);       /* Red */
    color: rgb(0, 128, 255);     /* Blue */
}

/* RGBA: RGB + Alpha (0-1) */
.element {
    color: rgba(255, 0, 0, 0.5); /* 50% transparent red */
    background: rgba(0, 0, 0, 0.8); /* 80% opaque black */
}

4. HSL/HSLA

/* HSL: Hue (0-360), Saturation (0-100%), Lightness (0-100%) */
.element {
    color: hsl(0, 100%, 50%);    /* Red */
    color: hsl(120, 100%, 50%);  /* Green */
    color: hsl(240, 100%, 50%);  /* Blue */
}

/* HSLA: HSL + Alpha */
.element {
    color: hsla(0, 100%, 50%, 0.5); /* 50% transparent red */
}
graph TD A[Color Formats] --> B[Named Colors] A --> C[Hexadecimal] A --> D[RGB/RGBA] A --> E[HSL/HSLA] B --> F[red, blue, green] C --> G[#ff0000, #00ff00] D --> H["rgb(255,0,0)"] E --> I["hsl(0,100%,50%)"] style B fill:#f99,stroke:#333,stroke-width:2px style C fill:#9f9,stroke:#333,stroke-width:2px style D fill:#99f,stroke:#333,stroke-width:2px style E fill:#ff9,stroke:#333,stroke-width:2px

Modern Color Features

/* CSS Variables for colors */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
}

.button {
    background-color: var(--primary-color);
}

/* currentColor keyword */
.icon {
    color: #007bff;
    border: 2px solid currentColor; /* Uses the color value */
}

/* Gradients */
.gradient {
    background: linear-gradient(to right, #ff0000, #00ff00);
    background: radial-gradient(circle, #ff0000, #00ff00);
    background: conic-gradient(from 180deg, #ff0000, #00ff00, #0000ff);
}

Typography in CSS

Typography is the art of arranging text. Good typography makes content readable, accessible, and beautiful. It's like choosing the right voice for your message.

Font Properties

Font Family

/* Font stacks with fallbacks */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Generic font families */
.serif { font-family: Georgia, "Times New Roman", serif; }
.sans-serif { font-family: Arial, Helvetica, sans-serif; }
.monospace { font-family: "Courier New", Courier, monospace; }
.cursive { font-family: "Brush Script MT", cursive; }
.fantasy { font-family: Impact, fantasy; }

/* System font stack */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", 
                 Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", 
                 "Helvetica Neue", sans-serif;
}

Font Size

/* Absolute units */
.text {
    font-size: 16px;     /* Pixels */
    font-size: 12pt;     /* Points */
}

/* Relative units */
.text {
    font-size: 1rem;     /* Relative to root element */
    font-size: 1.5em;    /* Relative to parent element */
    font-size: 120%;     /* Percentage of parent */
    font-size: 2vw;      /* Viewport width */
}

/* Keywords */
.text {
    font-size: small;
    font-size: medium;
    font-size: large;
    font-size: x-large;
}

Font Weight

/* Numeric values */
.text {
    font-weight: 100;    /* Thin */
    font-weight: 400;    /* Normal */
    font-weight: 700;    /* Bold */
    font-weight: 900;    /* Black */
}

/* Keywords */
.text {
    font-weight: normal;
    font-weight: bold;
    font-weight: lighter;
    font-weight: bolder;
}

Font Style and Variant

/* Font style */
.text {
    font-style: normal;
    font-style: italic;
    font-style: oblique;
}

/* Font variant */
.text {
    font-variant: normal;
    font-variant: small-caps;
}

/* Text transform */
.text {
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
}

Line Height and Letter Spacing

/* Line height (leading) */
.text {
    line-height: 1.5;        /* Unitless (recommended) */
    line-height: 24px;       /* Fixed */
    line-height: 150%;       /* Percentage */
}

/* Letter spacing (tracking) */
.text {
    letter-spacing: 0.05em;  /* Positive increases space */
    letter-spacing: -0.02em; /* Negative decreases space */
}

/* Word spacing */
.text {
    word-spacing: 0.2em;
}

Web Fonts

Custom fonts give your site personality. You can use web font services or host your own fonts.

Google Fonts

/* In HTML head */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

/* In CSS */
body {
    font-family: 'Roboto', sans-serif;
}

@font-face Rule

/* Custom font declaration */
@font-face {
    font-family: 'CustomFont';
    src: url('fonts/custom.woff2') format('woff2'),
         url('fonts/custom.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Controls loading behavior */
}

/* Using the custom font */
.custom-text {
    font-family: 'CustomFont', sans-serif;
}

Variable Fonts

/* Variable font with weight axis */
@font-face {
    font-family: 'VariableFont';
    src: url('variable.woff2') format('woff2-variations');
    font-weight: 100 900; /* Range of weights */
}

.variable-text {
    font-family: 'VariableFont';
    font-weight: 650; /* Any value in range */
}

Text Styling

Text Alignment

/* Horizontal alignment */
.text {
    text-align: left;
    text-align: center;
    text-align: right;
    text-align: justify;
}

/* Vertical alignment (inline elements) */
.inline {
    vertical-align: baseline;
    vertical-align: top;
    vertical-align: middle;
    vertical-align: bottom;
    vertical-align: super;
    vertical-align: sub;
}

Text Decoration

/* Text decoration shorthand */
.text {
    text-decoration: underline;
    text-decoration: line-through;
    text-decoration: overline;
    text-decoration: none;
}

/* Detailed text decoration */
.fancy-link {
    text-decoration: underline wavy red;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Multiple decorations */
.multi-decoration {
    text-decoration: underline overline;
    text-decoration-color: blue;
    text-decoration-style: dotted;
}

Text Shadow

/* Basic text shadow */
.shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Multiple shadows */
.multi-shadow {
    text-shadow: 1px 1px 1px #000,
                 2px 2px 2px #333,
                 3px 3px 3px #666;
}

/* Glowing text */
.glow {
    text-shadow: 0 0 10px #00ff00;
}

Text Overflow

/* Single line ellipsis */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Multi-line clamping */
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Background Styling

Background Properties

/* Background color */
.element {
    background-color: #f0f0f0;
}

/* Background image */
.element {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Background shorthand */
.element {
    background: #f0f0f0 url('image.jpg') no-repeat center/cover;
}

/* Multiple backgrounds */
.element {
    background-image: url('overlay.png'), url('background.jpg');
    background-position: center, center;
    background-size: contain, cover;
}

Background Gradients

/* Linear gradient */
.gradient {
    background: linear-gradient(to right, #ff0000, #00ff00);
    background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
    background: linear-gradient(to bottom right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
}

/* Radial gradient */
.radial {
    background: radial-gradient(circle, #ff0000, #00ff00);
    background: radial-gradient(ellipse at top left, #ff0000, #00ff00);
}

/* Repeating gradients */
.repeating {
    background: repeating-linear-gradient(45deg, #ff0000, #ff0000 10px, #00ff00 10px, #00ff00 20px);
}

List and Link Styling

List Styles

/* List style type */
ul {
    list-style-type: disc;
    list-style-type: circle;
    list-style-type: square;
    list-style-type: none;
}

ol {
    list-style-type: decimal;
    list-style-type: lower-alpha;
    list-style-type: upper-roman;
}

/* Custom list markers */
ul {
    list-style-image: url('marker.png');
}

/* List position */
ul {
    list-style-position: inside;
    list-style-position: outside;
}

/* Shorthand */
ul {
    list-style: square inside url('marker.png');
}

Link States

/* Link states (LVHA order) */
a:link { color: blue; }          /* Unvisited */
a:visited { color: purple; }     /* Visited */
a:hover { color: red; }          /* Mouse over */
a:active { color: orange; }      /* Click */

/* Modern link styling */
a {
    color: #007bff;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Button-like links */
.button-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.button-link:hover {
    background-color: #0056b3;
}

Box Shadows and Effects

Box Shadow

/* Basic box shadow */
.shadow {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

/* Multiple shadows */
.multi-shadow {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1),
                0 4px 8px rgba(0,0,0,0.1),
                0 8px 16px rgba(0,0,0,0.1);
}

/* Inset shadow */
.inset {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* Colored shadow */
.colored-shadow {
    box-shadow: 0 10px 20px rgba(255,0,0,0.3);
}

Visual Effects

/* Opacity */
.transparent {
    opacity: 0.7;
}

/* Filters */
.filtered {
    filter: blur(5px);
    filter: brightness(1.2);
    filter: contrast(1.5);
    filter: grayscale(100%);
    filter: sepia(100%);
    filter: hue-rotate(90deg);
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

/* Multiple filters */
.multi-filter {
    filter: brightness(1.2) contrast(1.1) saturate(1.3);
}

CSS Units

graph TD A[CSS Units] --> B[Absolute] A --> C[Relative] B --> D[px - Pixels] B --> E[pt - Points] B --> F[cm/mm/in - Physical] C --> G[em - Parent font size] C --> H[rem - Root font size] C --> I[% - Parent dimension] C --> J[vw/vh - Viewport] C --> K[vmin/vmax - Viewport min/max] style B fill:#f99,stroke:#333,stroke-width:2px style C fill:#9f9,stroke:#333,stroke-width:2px

Unit Examples

/* Absolute units */
.absolute {
    width: 100px;
    height: 72pt;      /* 1 inch */
    margin: 2.54cm;    /* 1 inch */
}

/* Relative units */
.relative {
    font-size: 1.5rem;     /* 1.5 × root font size */
    padding: 1em;          /* 1 × element font size */
    width: 80%;            /* 80% of parent width */
    height: 50vh;          /* 50% of viewport height */
    max-width: 100vw;      /* 100% of viewport width */
}

Typography Best Practices

mindmap root((Typography Best Practices)) Readability 16px minimum body text 1.5-1.6 line height 60-80 characters per line Sufficient contrast Hierarchy Clear heading levels Consistent sizing Meaningful emphasis Font Choice System fonts for speed Web-safe fallbacks Limited font families Appropriate weights Performance Subset fonts Variable fonts Font loading strategies Local font fallbacks

Responsive Typography

/* Fluid typography */
html {
    font-size: 16px;
}

@media screen and (min-width: 320px) {
    html {
        font-size: calc(16px + 6 * ((100vw - 320px) / 680));
    }
}

@media screen and (min-width: 1000px) {
    html {
        font-size: 22px;
    }
}

/* Responsive type scale */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
}

Complete Styling Example

/* Typography System */
:root {
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: Georgia, "Times New Roman", serif;
    
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-text: #333333;
    --color-background: #ffffff;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Button Component */
.button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: white;
    background-color: var(--color-primary);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.button:hover {
    background-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Card Component */
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-text {
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

Assignment: Colors and Typography

  1. Create a color scheme for a website:
    • Define CSS variables for primary, secondary, and accent colors
    • Create light and dark variations
    • Include hover and active states
    • Test color contrast for accessibility
  2. Design a typography system:
    • Set up a modular type scale
    • Define styles for headings (h1-h6)
    • Create paragraph and list styles
    • Style links with proper states
    • Implement responsive font sizes
  3. Build styled components:
    • Buttons (primary, secondary, disabled)
    • Cards with shadows and hover effects
    • Navigation menu with hover states
    • Form inputs with focus styles
  4. Create a landing page that uses:
    • Custom fonts (Google Fonts or @font-face)
    • Background gradients
    • Text and box shadows
    • Proper color contrast
    • Consistent typography hierarchy

Bonus: Create a dark mode version using CSS variables!