Demo: Demo: Building a Stylesheet

A guide to styling common HTML elements from scratch.

Scroll down...

Content

Resources

Comments

This demo will focus on styling common raw HTML elements and markup to a production ready level.

The project repo for this demo can be found here.

Once you have the repo cloned or forked you can fire up a local server in the project directory with $ ruby -run -e httpd . -p 3000 and then open it in your browser at http://localhost:3000. Click around the links and have a look around the code!

Setup

The following video introduces the boilerplate markup and styles. This gets us oriented with the project and how subsequent pages will be structured.

The Basics

The basics of CSS start with selectors. This video explains the difference between element, class and ID selectors. It also talks about their use cases and how they effect the priority of applied styles.

The Box Model

The CSS box model is important to have in your mind's eye. This video takes nested HTML elements to highlight the various layers of the box model.

Positioning with Floats

Floats are a commonly used method of positioning elements side by side in a line. This video covers how to accomplish this and its connection with clearfixing.

Relative, Absolute and Fixed Positioning

When you need to get very specific with the position of an element you turn to relative, absolute and fixed positioning. The nuances of these properties can be confusing so the following video dives into the differences between these properties.

Fonts

This video talks about setting default fonts, fallback fonts and catch-all fonts. It also dives into the details of manipulating those fonts and their display. Further, we take a look at including custom fonts from Google Fonts!

Backgrounds

Backgrounds are an effective and simple way to give color and decoration to your pages and elements. This video discusses the various options you have for setting background colors, images and gradients.

Lists

The next video talks about a few ways you can style list appearance and turn a stacked list into a single line nav menu.

Media

This video discusses styling media and specifically talk about tricks to get images displaying responsively.

Tables

The next video dives into the details of styling table borders and how to get them to display how you'd expect from a spreadsheet type look.

Login Form

This video shows a practical use case for CSS styling with a login form.

Blog Post

The next video illustrates styling a simple blog post and how you'd begin to make that page responsive.

Wrapping Up

This demo covered how to setup the basics as far as writing styles for common elements and including stylesheets into your HTML. We're just scratching the surface here but you can certainly already see that there are so many awesome things you can do with CSS!

Octocat 300


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Test Yourself: CSS3