Chapter 3. Styling the Page with CSS
Once you’ve formatted your web page with HTML, you’re going to want to liven it up. Though web pages using default styling are functional, they’re not that interesting-looking or unique. To make them so, you’ll need Cascading Style Sheets (CSS).
CSS is a way of adding visual and other styling to web page contents. It can be applied directly to an element, using the style attribute. In the following HTML, the background color for the div element contents is set to red:
<div style="background-color: red">...</div>
Using style attributes directly in elements is supported in all of the browsers, but its use is discouraged. Making a style change means having to search for all uses of the style attribute and changing them individually. A preferred approach is to use a stylesheet.
CSS Stylesheets
A stylesheet is a listing of CSS settings grouped together. By grouping the settings together, we can easily find the style settings to make our changes. The stylesheet can either be embedded directly into the web page or linked in as an external document. The latter approach is particularly favored, because then we can apply the same CSS across several different web pages without having to repeat the same CSS in each page.
To include an embedded stylesheet, add a style element to the head element in the web page:
<head> <style> ... </style> </head>
You can specify a type attribute for the element, but the default type of text/css is sufficient ...
Get Getting Started with the Web now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
