Python for All

Part One

What Is CSS?

CSS stands for Cascading Style Sheets. It is a separate language from HTML, dedicated entirely to describing how elements should look: their colours, sizes, fonts, spacing, and position on the page.

The word "cascading" refers to how CSS resolves conflicts: when multiple rules apply to the same element, a set of rules determines which one wins. For now, the important idea is that CSS is a layer of visual design that sits on top of your HTML structure.

A CSS rule has two parts: a selector that targets one or more HTML elements, and a declaration block in curly braces containing one or more property: value pairs.

Part Two

Selectors — Targeting Elements

A selector determines which elements a rule applies to. There are three essential selector types you will use constantly.

Element selectors target every instance of a tag. Writing p { ... } applies the rule to every paragraph on the page.

Class selectors target elements with a specific class attribute. A class selector begins with a dot: .byline { ... } applies only to elements with class="byline". One element can have multiple classes; one class can be applied to many elements.

ID selectors target a single element with a specific id attribute. They begin with a hash: #intro { ... }. An ID must be unique on the page — use it for one-off elements like a page header.

Part Three

Colours — Named, Hex, and RGB

CSS supports several ways to specify a colour:

• Named colours: red, black, white, navy. Easy to remember but limited.
• Hex codes: #111, #c0392b, #3498db. A six-digit (or three-digit) hexadecimal code describing the red, green, and blue components. This is the most common format in professional work.
• RGB: rgb(17, 17, 17). Explicit red, green, blue values from 0 to 255.
• RGBA: rgba(17, 17, 17, 0.5). Like RGB but with an alpha (opacity) channel from 0 (transparent) to 1 (solid).

For colour inspiration, search for "hex colour picker" in your browser, or look at how major news sites define their colour palette by using the browser's developer tools (right-click → Inspect).

Part Four

Borders and Backgrounds

Two more essential CSS properties for article design:

border draws a line around an element. You specify width, style, and colour: border: 1px solid #111. You can also target individual sides: border-top, border-left, etc. — very useful for dividers and pull-quote markers.

background-color fills the element's background. Combined with padding (covered in the next chapter), it creates callout boxes, highlighted sections, and fact panels.