6 Chapter 6: CSS Basics & Text Styling
Introduction
HTML gives structure to a webpage, but without CSS, every page would look plain and uninviting. CSS — Cascading Style Sheets — allows designers to bring personality, readability, and visual hierarchy to their sites. With CSS, you can control fonts, colors, spacing, and the overall “look and feel” of a website. This chapter introduces the fundamentals of CSS and shows how to apply them to text styling.
What is CSS?
– Definition: CSS (Cascading Style Sheets) is a language that controls the presentation of HTML content.
– Purpose: It separates content (HTML) from design (CSS), allowing for more efficient coding and consistent styling.
– Cascading: The term “cascading” refers to the order in which styles are applied — from browser defaults, to external stylesheets, to inline styles, with later rules overriding earlier ones.
Ways to Apply CSS
1. Inline CSS – written directly in the HTML tag using the style attribute:
<p style=”color: blue; font-size: 16px;”>Hello World</p>
2. Internal CSS – defined in a <style> block within the HTML <head>:
<style>
p {
color: blue;
font-size: 16px;
}
</style>
3. External CSS – stored in a separate .css file and linked with <link> in the <head>:
<link rel=”stylesheet” href=”styles.css”>
Text Styling with CSS
Fonts & Typography
– Font-family: Controls the typeface.
Example: body { font-family: Arial, sans-serif; }
– Font-size: Controls the size (px, em, rem, %).
– Font-weight: Options include normal, bold, lighter, or numeric values (100–900).
– Line-height: Adds vertical spacing between lines for readability.
– Letter-spacing: Adjusts spacing between letters.
Colors
– Defined using:
– Named colors (blue, black)
– Hex codes (#1a1a1a)
– RGB/RGBA (rgb(255, 0, 0) or rgba(255, 0, 0, 0.7))
– HSL (hsl(120, 100%, 50%))
Text Effects
– Text-align: left, right, center, or justify.
– Text-transform: uppercase, lowercase, capitalize.
– Text-decoration: underline, overline, line-through.
– Shadows: text-shadow: 2px 2px 5px gray;
Working with Color Palettes
Choosing a consistent color palette enhances branding and accessibility.
– Primary color: Dominant color (often used in headers, buttons).
– Secondary color: Supports the primary color, used for accents.
– Neutral colors: Backgrounds, borders, text.
– Accessibility tip: Ensure contrast ratios meet WCAG standards for readability.
AI Tip: You can ask AI tools to generate color palettes and font pairings, then refine them to fit your site’s purpose.
Example: Styling a Page
HTML file (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first styled webpage!</p>
</body>
</html>
CSS file (styles.css):
body {
font-family: Georgia, serif;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}
h1 {
color: #0066cc;
font-size: 2em;
text-align: center;
}
p {
font-size: 1.1em;
letter-spacing: 0.5px;
}
Key Terms
– CSS (Cascading Style Sheets): Language for styling web pages.
– External stylesheet: Separate .css file linked to HTML.
– Font-family: Specifies typefaces.
– Hex code: Six-character code for defining colors.
– Contrast ratio: Measurement of color visibility between text and background.
