Beautify your web pages with CSS

Note: This page is still in progress. It may break unexpectedly. Please be patient as new content is released.

CSS Fundamentals - Selection

Learn about selecting HTML elements to style using CSS. Selecting the element or group of elements you want to style is the first step in building styles that look beautiful and consistent across all of the HTML elements that these styles are applied to. It also allows your CSS files to scale to very large projects and websites.

1.1 - Select HTML elements to style with the right selectors and pseudo classes

1.2 - Specifying and prioritizing CSS styles

Color and Typography

CSS is a language that bridges art and science. To make good-looking styles that scale, they first have to look pretty. Color theory and font pairings are essential fundamentals in making your websites look pleasing and usable.

2.1 - Typography and text styling

2.2 - Color Theory and Application

Spacing and the Box Model

Whitespace is an essential yet often overlooked part of design. If your elements are too close together, they look cluttered. If they are too far apart, users have to do much more work to find what they are looking for. Learn to strike the perfect balance for beautiful and usable web design using element spacing the right way.

Element specific Formatting

Learn about different ways to format specific elements in HTML. Images should be formatted differently from tables and yet there are best practices in formatting each of these.

Advanced formatting and Positioning

Learn about more advanced techniques to format elements with backgrounds, gradients, and a new technique for positioning: the Flexbox model.

Flexbox and CSS Grid Layouts

Flexbox is just one way of positioning elements. CSS Grid is another. Learn to use these advanced positioning techniques that are universal and work across several screen sizes.

Cross platform and Responsive Design with CSS

In a world of multiple screen sizes, a compelling interface must adapt to the amount of space available. Learn about advanced techniques to create this adaptability with media queries and CSS Grid patterns.

Styling projects with CSS

Explore practical styles in collections of projects that use them. Build and style a sudoku puzzle, a periodic table cell, and a digital library.

Advanced CSS and State of the Art

Learn about CSS frameworks and their purpose. Explore different techniques for applying CSS frameworks in creating your own customized design.