CSS Basics: How to Style a Web Page | Web Development 101

In Web Development 101, Episode 3 introduces CSS (Cascading Style Sheets), the language used to style web pages. After HTML provides a page’s structure, CSS controls presentation such as colors, type size, spacing, and layout.

What is CSS?

CSS defines how HTML content is displayed. Separating presentation from content makes a site easier to manage and update. CSS can be written in a <style> element in the HTML <head> or loaded from an external stylesheet. Its basic syntax is approachable for beginners, though building polished layouts takes practice.

CSS rules: selectors and properties

A CSS rule selects one or more HTML elements and applies properties to them. A selector answers “which element?”; properties answer “what should change?” Properties can set color, text size, spacing, and layout.

Comments

Comments add notes to a stylesheet without being displayed or applied by the browser. In CSS, a comment begins with /* and ends with */, as in /* This is a comment */.

Select elements with CSS

Selectors target the HTML elements you want to style. Common options include an ID, a class, or a tag name.

• ID: use #myElement to target an element with that ID. An ID should be unique on a page.
• Class: use .myClass to target elements that share a class. A class can be used on multiple elements.
• Tag: use a tag name such as p, h1, or div to target elements of that type.

W3Schools is mentioned in the source article as a place to find CSS lessons and reference material, from introductory to advanced topics.

Text styling

CSS can control how text looks and is arranged.

• Font size: set text size using units such as px, em, rem, or percentages.
• Color: set text color with a named color, RGB value, or hexadecimal color code.
• Font weight: choose values such as normal, bold, or a numeric weight from 100 to 900.
• Font family: specify the typeface or font family used for text.

The CSS box model

The box model treats each HTML element as a box made up of content, padding, border, and margin.

• Padding: space between the content and its border.
• Margin: space outside the border.
• Border: the line around an element; CSS can set its color, width, and style.

Browser developer tools such as Inspect Element can show the styles applied to an element and let you experiment with CSS in the browser.

Display and layout

The display property controls how an element participates in layout. Common values include block, inline, inline-block, flex, and grid.

• Block: generally starts on a new line and takes the available width of its containing block.
• Inline: flows within a line and uses the space its content needs.
• Inline-block: flows inline while allowing several block-like sizing properties.
• Flex: supports flexible one-dimensional layouts arranged in a row or column.
• Grid: supports two-dimensional layouts arranged in rows and columns.

Flexbox

Flexbox is a one-dimensional CSS layout system. The flex-direction property sets the direction of flex items, such as row, row-reverse, column, or column-reverse.

Flex grow

The flex-grow property determines how a flex item expands when free space is available.

CSS Grid

Grid is a two-dimensional layout system. grid-template-columns defines the column tracks in a grid, and grid items are the elements placed inside the grid container.

Positioning elements

The position property controls how an element is placed.

• Static: the default; the element follows the normal document flow.
• Relative: keeps the element in its normal position in the flow, with optional offsets using top, right, bottom, or left.
• Absolute: positions an element relative to a positioned ancestor, such as one with position: relative or absolute.
• Fixed: positions the element relative to the viewport so it stays in place while the page scrolls.
• Sticky: behaves like relative positioning until it reaches a set threshold, then sticks in place.

Float and clear

float moves an element to the left or right and lets text or other inline content flow around it. The source introduces floats as a way to build columns. clear can prevent an element from wrapping around floated content. Modern layouts often use Flexbox or Grid instead.

Style images with CSS

CSS can style images using properties such as width, height, border-radius, and object-fit.

💬 Looking for a free financial consultation? Message us on LINE.