Introduction to CSS - Complete Beginner to Expert Course

Apply inline styles to change colors and font sizes using the style attributes, compare colors on nested elements, and understand how the last style property takes precedence when overriding styles.

Master styling with the style tag instead of inline attributes, enabling consistent color and font size changes across paragraphs and divs through CSS selectors.

Create an external css file to store styling and link it with the link tag, centralizing styles so updates reflect across multiple pages.

Learn to select and style HTML elements using CSS selectors, classes, and IDs, and apply reusable classes while understanding how cascading order and specificity affect colors and font sizes.

Explore how to apply css colors using keywords, hex values, rgb and rgba, and short formats to style fonts and background colors, including alpha transparency and shorthand syntax.

Learn to style pages with CSS backgrounds, colors, and images, including repeat, no-repeat, and positioning options, then use the background shorthand for compact, efficient styling.

Explore how the CSS display property toggles between block and inline, uses div and span, and applies inline-block with width and height to shape navigation menus.

Explore how to style list items with CSS list-style options for navigation bars, transforming unordered lists into ordered lists, and applying square, inside, or URL visuals with practical examples.

Apply CSS by styling a simple website: link a stylesheet, set body to bisque, apply section backgrounds, style the footer with white text, and display list items as inline blocks.

Explore CSS measures and properties, compare px, em, rem, and percentage units, and see how width, height, font size, and background color adapt for responsive layouts.

Explore divs and spans in css by selecting elements with classes, highlighting ingredients with color and yellow background, and using chained selectors to target precise elements.

Apply CSS text styling using alignment, decoration, transform, spacing, and shadows on placeholder content to demonstrate typography control.

Explore font families using browser defaults, apply fonts, colors, sizes, and weights, and learn to integrate Google Fonts into your projects.

Explore Google Fonts and how font family, weight, style, and size transform web typography. Learn two methods to include fonts—link or import—and apply them across bodies or classes.

Link a new exercise two stylesheet and transform the starter html by applying classes like highlight, big text, and text center, styling list items and footer to match the example.

Learn to use CSS floats to position images within text, make them responsive with max-width, and selectively target images by class to control left or right alignment.

Explore how to float elements in CSS, not just images, using float left and right, containment with a container, and clearing floats with clear: both to keep layouts intact.

Explore the CSS box model, including padding, border, and margin, and learn how width, height, and shorthand properties render in the browser.

Apply css fundamentals to transform html into a polished website in exercise 3, using background colors, dotted borders, padding, min-height, a nav bar, logo styling, google fonts, and a footer.

Link an external stylesheet, import a Google font, and apply colors, padding, margins, borders, and layout to header, navigation, sections, and footer. Style images and lists with the box model.

Learn how the CSS outline works, how it differs from the border, and how colors, styles, widths, and margins affect outline positioning outside the box model.

Explore CSS positioning by examining fixed, absolute, relative, static, and sticky behaviors, including how absolute positions relate to the nearest non-static ancestor and how relative shifts affect layout.

Transform nine images into a three-column, three-per-row grid by applying width and float left on image tags, with percentage-based margins to ensure even spacing.

Explore CSS pseudo-classes for hyperlinks, including visited, hover, and active states. Learn to style anchors with color, text decoration, and interactive hover effects.

Learn how to use CSS pseudo-classes to target specific elements, such as first-child, last-child, and odd or even items, and apply precise styling like background colors.

Learn to style CSS tables by applying width, borders, and padding; design thead with red background and white text, center cell text, and add alternating row colors with odd/even selectors.

Explore how CSS overflow controls content that doesn't fit an element, and set max width and max height to create responsive text areas with scrollbars.

Practice CSS element alignments by applying margins, auto centering, borders, widths, and text alignment to a testing template, exploring absolute, floats, and percentage-based centering on lists and paragraphs.

Style a website from start to finish by setting body background color, font family, and white text. Use a 1200 px wrapper with 80 percent width and 10 percent margins.

Position content and headings with inline-block, images with max size, and create a banner with absolute positioned text; build a two-column layout with article and aside and a footer.

Wrap up website by refining image alignment to 50 percent width within sections, adjust footer columns to 33 percent with inline-block, and practice clearing floats to realign the page structure.

Explore multiple methods to center elements on a page, including flexbox centering, text-align, and margin auto. See how max-width, width, height, borders, and absolute positioning with transform center content.