Build Responsive Real World Websites with CSS3 v2.0

Background images can repeat over and over (like a pattern), or you can tell the browser to only use the image once. In this lesson we'll explore repeating and non-repeating background images.

Every HTML element can have a border. It seems ugly at first, but they play an important role in the user experience.

The Box Model is arguably the most important aspect of CSS. It's the padding, margin, border and overall spacing inside an element. We'll explore how to visually see all of these properties in this lesson.

Padding is the spacing inside an element. This is a vital property when it comes to styling your website. You'll use this property dozens of times every day as a web developer.

Padding is the spacing outside of an element. This is a vital property when it comes to styling your website. You'll use this property dozens of times every day as a web developer.

Centering an entire element isn't an intuitive feature in CSS. Here's how we center an element.

Outline is the border around the border. Confused? Let's take a dive into what this property is.

Test your knowledge with these questions.

Your first mini project! Get hands on practice with CSS.

Here's my solution to the Mini Project lesson. Source code included.

There's a way to force all your letters to be uppercase, lowercase or capitalized. In this lesson we learn how to do that. 

Text indenting is more than "just adding a space" before a word. As you learned in middle school, paragraphs should start with an indentation. CSS can handle that for us. 

Did you know you can change the spacing between letters using CSS? Yep, you can make letters closer or further apart. We learn how to do that in this lesson. 

Sometimes you want more spacing between your lines. CSS makes this easy for us. Learn how in this lesson.

Not every language writes from left to right. There are many languages to write sentences the other way. It's important that you know how to change the text direction in today's hyper connected world. 

Just like letter spacing, there's a way to add word spacing. Word spacing is how we space out, or bring together, words in an element.

Test your knowledge with these questions.

Font style is how you make your text italicized. 

Font size is how you change the height (and width, proportionally) of your text. This is used every single day, several times a day.

To bold, or not to bold, that is the font weight... and more! You can even make your fonts the opposite of bold using font weights!

Never heard of this one? Let's dive into font variant and explore what it can do for you.

By far the best icon set on Earth. It's free, it's amazing, they scale perfectly, and they're made with a font file. In this lesson we learn about Font Awesome and how to install it, then we learn how to make the icons appear on our website and how we can change the sizes of our new icon set. 

Test your knowledge with these questions.

Learn how to style links you've already clicked on. 

When you click on a click, but have not released your mouse button.. this is called the "active" state. And you can style this, too! 

Test your knowledge with these questions.

How do you select child elements in your HTML DOM? We'll learn about that in this lesson. 

In this lesson we learn about selecting elements that are "beside" each other. Also known as "siblings". 

Test your knowledge with these questions.

Do you want your list position inside the element, or outside the element? This really comes down to padding. We dive deeper into this in this 2 minute video. 

We can change a lists bullet points or numbers to a custom image. 

Test your knowledge with these questions.

One of the few benefits that comes from using tables is the ability to vertically align content (more on this in the Flexbox module). In this lesson we'll change the vertical alignment of our content inside a table. 

Let's take what we know of CSS so far, and create a fun little hover effect over a table. This is a common design and it's good to know how to do this. 

I've given you code, and you have to style it using ONLY CSS. You cannot write any HTML to help you out. The code you need is added as an additional downloadable file. 

The solution to the Mini Project video that came before this video. Source code added.

Test your knowledge with these questions.

What's the difference between <div> and <span>? Display Inline.

There's a middle ground between Display Block and Display Inline. It's called Display Inline Block, and it's amazing. 

This is how you make elements hide on a page. Not "invisible", but they act like they don't exist at all. 

Test your knowledge with these questions.

Not all HTML elements support a custom height. But you can overwrite their default behavior and force a height on any element. Learn how to add CSS heights in this lesson.

Test your knowledge with these questions.