Introduction to CSS Development

Explore css terminology, including cascading style sheets, selectors, class selectors, rule sets, declarations, and semicolons, and see how color rules are defined in a rule set.

Explore css unit types like px, percent, em, and rem for distance and sizing. Learn color representations—hex, named colors, rgb, and rgba with alpha.

Create a new project folder, add an index.html and a main CSS file, and learn how to include CSS on the page to style and change content appearance.

Apply inline styles by adding a style attribute to a paragraph to set color, but inline CSS harms separation of concerns; keep HTML, CSS, and JavaScript in separate files.

Use the style tag in the head to include CSS, define a selector for all paragraphs, and apply a red color via a rule set, highlighting separation of concerns.

Learn to include an external css file using a link tag in the head, verify loading via console and network tab, and apply a red color to all paragraph tags.

Explore basic selectors in CSS, including element, comma-separated, and descendant selectors, to target paragraph tags and anchor tags within a paragraph and apply precise rule sets.

Use id and class selectors to target elements, including descendants. Learn to combine selectors and use # for id and . for class.

Combine our tags without a space to target specific elements, such as paragraph tags that have a given class, using the p.class selector.

Learn to use the hover pseudo selector in CSS to change a link's color on hover, apply a base style, and override text-decoration with state testing.

Explore starter css rules, including text decoration, color, background images with no-repeat, borders, padding, margins, and the box model, with practical div and link layout examples.

Explore block level, inline, and inline-block layouts, and learn how float and clear influence page flow, text wrapping, and element alignment.

Learn how relative, absolute, and fixed positioning shape layout by anchoring elements to their context, removing them from the normal flow, and using the viewport for fixed positioning.

Explore css centering techniques, including vertical centering, text alignment, and inline versus block elements, using text-align, inline-block navigation, padding, margins, and borders.

Center the main content using horizontal margins with margin-left: auto and margin-right: auto, and set a width and background color for the body and main to keep the layout centered.

Learn vertical centering in CSS using the vertical line property, then emulate table layout with display: table and display: table-cell to center content vertically and text align center.

Learn how normalize.css helps create cross-browser consistency by replacing browser-default styles with unified styles, using a content delivery network to load normalize.css and ensure consistent rendering across browsers.

Master clearfix to force a container to clear its floated children using the after pseudo selector, display table, and clear both.

Explore how block formatting context controls floats and contains content using left and right boxes and a center column, with overflow hidden to enforce containment.

Explore CSS specificity and cascading behavior, comparing inline styles, IDs, classes, and elements, and learn how to calculate specificity and use minimal selectors to control styles.

Explore five core principles for scalable css architecture: reusability, maintainability, modularity, scalability, and semantics. Apply practices to organize files and modular selectors, and keep class names readable to support growth.