Build Responsive Real World Websites with CSS3 v2.0

CSS allows you to write hex colors (we'll explore these) and named colors, such as "red" and "blue". 

Websites are made of "blocks", like Lego. And you can change the entire color of a block by changing it's background color. Find out how this is done.

Each HTML element can have a background color and image. Let's explore how to add a background image in this lesson.

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.

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

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

Here's how you can easily change the text color in any element. 

There are 4 primary ways to align your text. If you don't know them all off the top of your head you should probably watch this video. 

If CSS is "decoration", then what is "text decoration"? It's underlines, over lines, and strike-throughs. You can also change the color of the lines so it doesn't match your text color. Here's how..

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.

Serif.. Sans Serif... Cursive... These are just 3 different font types. As a front end web developer you need to know the difference between font types. 

When you change a font on your website, you need to consider some people can't see every font. You need backup fonts. And a font family is how you provide this backup support. 

I'm going to show you the best place to get free fonts. And how you can install them on your website SUPER easily. 

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. 

Do you know how to style a link? This section focuses on styling the link and it's "pseudo" states. 

When you put your mouse over a link... what is it going to do? That's the hover state. Let's learn how to style that. 

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! 

You don't need to write a new selector for every single element. There's a way to group your selectors together. 

You can select elements "under" other elements. But be careful, this can lead to a specificity nightmare.

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". 

Browsers style lists for you, but often you want to change it. In this lesson we'll learn about the List Style Type and how we can change bullet points into something else. 

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. 

Tables are not preferred in HTML. But they are unavoidable. Here's how you can make the best of tables with CSS.

Tables have strange border rules. Let's look at removing some of them so they act like regular elements. 

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.

Welcome to the Display property, arguably one of the most important CSS properties to ever exist. 

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

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. 

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

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.