Positioning Elements

position:relative creates a positioning context; absolute positions relative to an ancestor; fixed attaches to the viewport; sticky follows scrolling within constraints.

Media Queries

Media queries apply styles based on viewport characteristics. Start with a mobile-friendly base, then enhance layouts at wider breakpoints.

Pseudo-classes and Pseudo-elements

:hover and :focus-visible style interaction states; ::before and ::after create decorative generated content. Never hide keyboard focus without an alternative.

Typography and Web Fonts

Use font-family, font-size, font-weight, and line-height to improve readability. Relative units such as rem help layouts scale with user preferences.

Introduction to CSS

CSS controls the presentation of HTML: colors, spacing, typography, and layout. Rules contain a selector and declarations inside braces.

Adding CSS to HTML

External stylesheets keep styling reusable and easier to maintain. Link them from the document head; inline styles are best reserved for limited special cases.

CSS Selectors

Element selectors match tags, class selectors start with a dot, and ID selectors start with a hash. Prefer reusable classes for components.

Colors and Backgrounds

CSS supports named colors, hexadecimal, rgb(), and hsl(). Maintain sufficient text contrast, and use backgrounds to establish visual hierarchy.