CSS is the language that controls how a web page looks. HTML supplies page objects such as headings, paragraphs, buttons, and links; CSS supplies their presentation, including text size, fonts, colors, spacing, backgrounds, and layout. Keeping those jobs separate makes a page easier to adjust without rewriting its content. section 2.2.1 section 3.2.8
CSS is made from properties: named settings that describe a style. A declaration combines a property, a colon, a value, and a closing semicolon. For example, font-size: 24px; makes the selected text 24 pixels high. Leave the unit in place when changing a pixel value. section 2.2.1 section 3.4
Apply styles with a rule
A CSS rule says which HTML object to style, then places one or more declarations inside braces. The selector #displayPun targets the HTML element whose id is displayPun. Its rule sets the pun’s font size and adds space above it. A period before a name targets a class, such as .entry-date. section 2.2.1 section 5.3.2
body {
font-family: 'Roboto Serif', serif; #1
max-width: 800px; #2
margin: auto; #3
}
header {
background-color: dodgerblue; #4
padding: 20px; #5
text-align: center; #6
}
header h1 {
font-family: 'Josefin Sans', sans-serif; #7
font-size: 48px; #8
color: whitesmoke; #8
}
header h2 {
font-family: 'Josefin Sans', sans-serif; #7
font-size: 24px; #9
color: whitesmoke; #9
font-style: italic;
}
main {
font-size: 20px; #10
}
main h2 {
font-family: 'Josefin Sans', sans-serif; #7
font-size: 32px; #11
color: dodgerblue; #11
}
This annotated stylesheet shows a small home page styled through body, header, main, and heading rules. It pairs font families, sizes, colors, width, centering, padding, and alignment with the page objects they affect. section 3.3.2
For a simple page, ask for HTML and CSS as separate files. Save the HTML as index.html and the stylesheet as styles.css in the same folder. A link tag in the HTML tells the browser to load that stylesheet. For multipage sites, reuse the same CSS file and request no extra inline styles, which can conflict with or override shared styling. section 3.2.8 section 6.2
Useful CSS settings to customize include:
- max-width, to keep lines from becoming too long; around 800px is a practical starting point for many pages. section 3.2.8
- font-family, font-size, color, and background-color, to establish the page’s type and color choices. section 3.3.2
- margin and padding, to control outside and inside space; line-height can add breathing room between lines. section 6.4
- display: flex and related alignment settings, to arrange items such as navigation links or header contents. section 6.3.2
Try changing one value at a time, then reload the page to see the result. Color keywords can be replaced with other color keywords, and larger or smaller font-size, margin, and padding numbers change the visual result. For more accessible text sizing, convert px measurements to rem: by default, 16px equals 1rem, so 24px equals 1.5rem. section 3.4 section 5.4
Fix a style that does not appear
If an entry date should be dark blue but remains unformatted, compare the HTML class with the CSS selector. An HTML paragraph using class="entry-date" needs a CSS rule beginning .entry-date, not .date. Matching those names fixes the missing formatting. section 5.3.2
CSS works alongside HTML and, when needed, JavaScript. It is used here for browser-based pages, from static home pages and galleries to an interactive course catalog whose JavaScript loads and filters data. The styling remains in CSS while JavaScript handles behavior. section 13.5 section 1.3
