[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.66,0:00:04.78,Default,,0000,0000,0000,,I love art museums. But I don't have time to go to art museums every day.
Dialogue: 0,0:00:04.78,0:00:07.99,Default,,0000,0000,0000,,So thankfully, I can find beautiful paintings on the Internet.
Dialogue: 0,0:00:07.99,0:00:11.28,Default,,0000,0000,0000,,Like even here on Khan Academy, in our art history section.
Dialogue: 0,0:00:11.28,0:00:14.34,Default,,0000,0000,0000,,So I made this webpage with lists of famous paintings,
Dialogue: 0,0:00:14.34,0:00:21.32,Default,,0000,0000,0000,,with one heading and lists for each art style, and links to articles about each of the paintings.
Dialogue: 0,0:00:21.32,0:00:25.16,Default,,0000,0000,0000,,To make this webpage look a bit fancier, you know, artsy
Dialogue: 0,0:00:25.16,0:00:31.15,Default,,0000,0000,0000,,I've applied CSS rules to change the font family of both headings-- the s and the s.
Dialogue: 0,0:00:31.15,0:00:38.89,Default,,0000,0000,0000,,I like the cursive, but I think that 'fantasy' might look better, so let me change that.
Dialogue: 0,0:00:38.89,0:00:43.85,Default,,0000,0000,0000,,Oh, and I have to change it here, because we have two rules.
Dialogue: 0,0:00:43.85,0:00:49.26,Default,,0000,0000,0000,,But really, I always want all my headings on this page to have the same font family
Dialogue: 0,0:00:49.26,0:00:54.41,Default,,0000,0000,0000,,and I don't want to have to keep changing the font family in two places every time I change my mind.
Dialogue: 0,0:00:54.41,0:01:00.02,Default,,0000,0000,0000,,What is the solution here? To turn our two CSS rules into one CSS rule.
Dialogue: 0,0:01:00.02,0:01:04.04,Default,,0000,0000,0000,,Hm, just think about that for a bit.
Dialogue: 0,0:01:04.04,0:01:08.36,Default,,0000,0000,0000,,You might suggest adding the same class to our s and s.
Dialogue: 0,0:01:08.36,0:01:12.05,Default,,0000,0000,0000,,And that would definitely work, and we could just have one CSS rule for that class.
Dialogue: 0,0:01:12.05,0:01:14.83,Default,,0000,0000,0000,,But it ultimately would be more work on our end
Dialogue: 0,0:01:14.83,0:01:19.12,Default,,0000,0000,0000,,because we'd have to remember to add that class every time we made an  or .
Dialogue: 0,0:01:19.12,0:01:25.50,Default,,0000,0000,0000,,Fortunately, there is a better way. We can group our selectors together using commas.
Dialogue: 0,0:01:25.50,0:01:31.97,Default,,0000,0000,0000,,We'll just add a comma after this "h1" here, then write "h2".
Dialogue: 0,0:01:31.97,0:01:37.26,Default,,0000,0000,0000,,And now we can delete this other rule because we merged it into the first one.
Dialogue: 0,0:01:37.26,0:01:39.95,Default,,0000,0000,0000,,And tada! Our web page looks the same.
Dialogue: 0,0:01:39.95,0:01:44.27,Default,,0000,0000,0000,,Now when I want to experiment with changing the font family, I can do it in one place.
Dialogue: 0,0:01:44.27,0:01:48.68,Default,,0000,0000,0000,,Here, I will change it back to cursive, and now they're all cursive.
Dialogue: 0,0:01:48.68,0:01:55.76,Default,,0000,0000,0000,,Take careful note of this comma. The selectors have to be comma-separated, not space-separated.
Dialogue: 0,0:01:55.76,0:02:03.05,Default,,0000,0000,0000,,As we've seen, a space is used for descendant selectors, and means something entirely different to CSS.
Dialogue: 0,0:02:03.05,0:02:08.52,Default,,0000,0000,0000,,Grouping selectors can be a great tool to reduce the number of redundant selectors you have.
Dialogue: 0,0:02:08.52,0:02:14.34,Default,,0000,0000,0000,,But don't overuse it. You shouldn't group two selectors just because they happen to have the same properties now.
Dialogue: 0,0:02:14.34,0:02:18.36,Default,,0000,0000,0000,,You should group two selectors because you always want them to have the same properties.
Dialogue: 0,0:02:18.36,0:02:21.89,Default,,0000,0000,0000,,Usually because they're semantically very similar to each other.
Dialogue: 0,0:02:21.89,0:02:28.26,Default,,0000,0000,0000,,In this case, my selector is for all heading types, which I often want to share the same styles.
Dialogue: 0,0:02:28.26,0:02:32.90,Default,,0000,0000,0000,,Stay tuned for one more common use case for group selectors.