Lesson overview
What CSS does for a webpage
Cascading Style Sheets (CSS) control how HTML content looks on the screen. HTML provides the structure and meaning, while CSS sets colors, fonts, spacing, borders, and layout. A good style sheet makes a simple personal webpage easier to read and more visually appealing without changing the actual text.
CSS can be written in three ways: inline styles, internal styles inside a
<style> tag, and external style sheets in a separate .css file.
For larger projects, an external style sheet is preferred so that many pages can share the same
design.
Selectors, properties, and values
A CSS rule is made of a selector and one or more declarations.
The selector chooses which HTML elements to style. Declarations use a
property and a value, such as color: blue
or font-size: 16px.
p {
color: #333333;
font-size: 16px;
line-height: 1.5;
}
In the example above, the selector p targets all paragraph elements and applies
the same text color, size, and line spacing.
Working with colors and fonts
CSS lets you define a consistent color scheme and typography. The color property
sets the text color, while background-color sets the background. The
font-family, font-size, and font-weight properties
control how text looks.
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #222222;
}
h1 {
font-size: 32px;
font-weight: bold;
}
By defining these in a style sheet, you can make the entire page use the same base font and colors, which improves readability and consistency.
Spacing and layout
CSS also controls spacing and basic layout. The margin and padding
properties add space around and inside elements. Borders can be added with
border-width, border-style, and border-color.
For layout, simple techniques include using text-align for alignment and
display properties such as block, inline-block, or
flex. Even without advanced layouts, margins and padding already help separate
sections like "About Me", "Skills", and "Contact".
Linking an external CSS file
To apply a style sheet to an HTML page, you typically add a <link> element
inside the <head> section:
<link rel="stylesheet" href="styles.css" />
This line tells the browser to load the styles.css file and apply the rules to the
HTML document. Updating the CSS file will change the appearance of all pages that use the same
link.
Key idea
CSS works together with HTML. HTML structures the content, and CSS provides the design. Selectors, properties, and values let you define colors, fonts, spacing, and layout in a reusable style sheet.