🎨

CSS Fundamentals Overview

Aug 20, 2025

Overview

This lecture covers the fundamentals of CSS for beginners, including what CSS is, ways to apply it to HTML, essential tools, selectors, colors, units, the box model, typography, styling links and lists, responsive design, Flexbox and Grid, images, functions, transforms, transitions, animations, and project organization.

Introduction to CSS

  • CSS stands for Cascading Style Sheets and controls the presentation of web documents.
  • HTML provides structure, while CSS manages appearance and design.
  • You can apply CSS externally (recommended), internally, or inline (avoid inline styles).
  • Recommended tools: Chrome browser and Visual Studio Code editor with Live Server extension.

Applying and Organizing CSS

  • Use external stylesheets for separation of concerns.
  • Link a CSS file via <link rel="stylesheet"> in the HTML <head>.
  • Validate CSS with online tools to catch errors (e.g., W3C CSS validator).
  • Organize styles using logical sections and comments.

CSS Selectors and Specificity

  • Element selector targets all elements of a type (e.g., p for paragraphs).
  • Class selector (preceded by .) can be reused across elements and is more specific than element selectors.
  • ID selector (preceded by #) should be unique per page but is not recommended for CSS styling.
  • Specificity: IDs > classes > elements; inline styles and !important override specificity but should be avoided.
  • Use DevTools to inspect and debug CSS specificity issues.

Colors in CSS

  • Color values can be set by name (e.g., blue), hex codes (#FF0000), RGB (rgb(255,0,0)), RGBA for transparency, and HSL.
  • Use tools like VS Code’s color picker and online contrast checkers for accessibility.
  • Ensure good contrast between background and text.

CSS Units

  • Absolute units: Pixels (px)—do not scale with user settings (use for borders).
  • Relative units: Percentages (%), em (relative to parent font size), rem (relative to root font size, recommended for font sizes), vw/vh (viewport width/height), ch (character width).
  • Use rem for fonts and em for spacing related to an element’s font size; percentages and viewport units for layouts.

Box Model and Layout

  • Each element is a box: content, padding, border, margin.
  • box-sizing: border-box includes padding and border in element width/height calculations.
  • Use margin and padding shorthand for spacing.
  • Set border properties individually for each side using border-top, border-right, etc.
  • Use border-radius to create rounded corners or circles.

Typography and Text

  • Control text with properties like text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, and word-spacing.
  • font-family specifies the typeface; always include fallback fonts.
  • Import external fonts (e.g., Google Fonts) using <link> or @import.
  • Form elements often require font: inherit for consistent typography.

Styling Links and Lists

  • Use pseudo-classes: :link, :visited, :hover, :active, and :focus.
  • Recommended order: :link, :visited, :hover, :focus, :active.
  • Remove link underlines with text-decoration: none and apply a pointer cursor.
  • Custom style ordered (ol) and unordered (ul) lists with list-style-type, list-style-image, and list-style-position.
  • Style list items using pseudo-classes like :nth-child() and pseudo-elements like ::marker.

Responsive Design and Media Queries

  • Media queries adapt styles to different devices: @media screen and (min-width: 768px) { ... }.
  • Use mobile-first approach (start with small screens).
  • Test with DevTools device toolbar and adjust breakpoints as needed.

Flexbox and Grid Layout

  • Flexbox: One-dimensional layout (row or column). Use display: flex, justify-content, align-items, flex-wrap, etc.
  • Grid: Two-dimensional layout. Use display: grid, grid-template-columns, grid-template-rows, gap, etc.
  • Use shorthand properties and responsive units for flexible layouts.

Images and Backgrounds

  • Insert images using <img> and set responsive sizing with width: 100% and height: auto.
  • Use background-image, background-size: cover, background-position, and gradients for backgrounds.
  • Optimize images for web and use alt text for accessibility.

Transforms, Transitions, and Animations

  • Use transform to move, rotate, scale, or skew elements.
  • transition adds smooth change effects to properties.
  • Define keyframes with @keyframes and apply animations for advanced effects.

CSS Variables and Functions

  • Define variables in :root using --var-name: value; and use with var(--var-name).
  • Variables simplify design changes and theming (e.g., dark mode).
  • Common functions: calc(), min(), max(), clamp() for sizing, attr() to access HTML attributes.

Project Organization and Best Practices

  • Use comments and logical sections to organize stylesheets.
  • Consider BEM (Block Element Modifier) for naming conventions.
  • Sort properties alphabetically or by groups.
  • Use utility classes for common patterns.

Key Terms & Definitions

  • Selector — pattern to target elements for styling.
  • Specificity — rules that determine which styles apply when multiple selectors match.
  • Box Model — content, padding, border, and margin that define an element's space.
  • Media Query — CSS rule that applies styles conditionally based on device features.
  • Flexbox — layout model for arranging items in one dimension (row/column).
  • Grid — layout model for arranging items in two dimensions.
  • Pseudo-class — selector for element states (e.g., :hover).
  • Pseudo-element — selector for parts of elements (e.g., ::marker).
  • Variable — reusable value defined with --var-name.

Action Items / Next Steps

  • Practice by building your own small layout and applying CSS styles.
  • Complete project challenges or mini-projects to reinforce concepts.
  • Explore advanced CSS topics such as transitions, animations, and responsive design.
  • Review and reorganize your own CSS files using logical sections and comments.
  • Experiment with Flexbox Froggy and Grid Garden for hands-on learning.

Full transcript