We're going to dive a lot deeper soon enough, but for now, here's some basic information worth knowing. If anything feels confusing, watch the video modules to see everything in action. Onwards!

Overview

CSS stands for "cascading stylesheet." The word "cascade" is the significant part here; it basically means that when you create some sort of styling rule, that rule will apply to any area of the website you are targeting with it. So, the rules cascade all the way down the HTML tree.

Styling rules are the bread and butter of CSS. The point of a stylesheet is to target specific parts of your page, then tell that page how those elements should look, be positioned, sparkle, or whatever else you want. As you can imagine, there are a ton of different options to mess around with. For that reason, I can't list out all the possible styles in the same way I could list out all the basic HTML tags. For now, I'll just discuss the high level overview of how to smartly apply those styles. Then, we can get into the meat of prettifying everything 😎

Some important concepts

Applying styles

First, let's explain how you actually tell an HTML document which elements you want to style.

There are three ways to target HTML elements with CSS: by tag / type, by class, and by ID. When targeting them, you list out a set of rules to apply within a set of { curly braces }. This entire block is called a rule set.

When to use class versus id: Looks like they both do the same thing, right? Well, there's a general rule that you can't have more than one element on a given page with the same ID, though you can have as many as you want with the same class. When we get into using JavaScript, the utility of ID will be much more clear. However, given that limitation, you'll almost always reach for a class or just the tag name when styling an element.

Nested selectors

Sometimes, you'll want to style the children of an element. For this, we can use nested selectors!

<ul>
	<li>I'm a list item!</li>
	<li>So am I!</li>
	<li>I am a list item with <span>some important text!</span></li>
</ul>
/* style all the list items inside the ul */
ul li {
	padding: 10px;
}
/* style all the spans one level deep inside a list item */
li > span {
	color: red;
	font-size: 30px;
}
/*
style all the spans one level deep inside the ul. 
Note this style doesn't get applied to our span! 
Starting from the ul, our span is two levels deep (ul -> li -> span)
*/
ul > span {
	color: blue;
}