[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.10,0:00:02.34,Default,,0000,0000,0000,,In this webpage, we're using CSS
Dialogue: 0,0:00:02.34,0:00:04.60,Default,,0000,0000,0000,,to style our ``s and paragraphs
Dialogue: 0,0:00:04.60,0:00:08.92,Default,,0000,0000,0000,,so that all the ``s are green \Nand all the paragraphs are purple.
Dialogue: 0,0:00:09.54,0:00:13.46,Default,,0000,0000,0000,,But what if we wanted to select \Njust the first ``
Dialogue: 0,0:00:13.46,0:00:16.46,Default,,0000,0000,0000,,or style just the second paragraph?
Dialogue: 0,0:00:16.72,0:00:19.87,Default,,0000,0000,0000,,We'd need to come up with a way \Nto tell the browser exactly which
Dialogue: 0,0:00:19.87,0:00:21.51,Default,,0000,0000,0000,,of the elements we're selecting
Dialogue: 0,0:00:21.51,0:00:24.93,Default,,0000,0000,0000,,so that it didn't apply the styles \Nto all of them like it is now.
Dialogue: 0,0:00:25.33,0:00:27.94,Default,,0000,0000,0000,,One way to do that is to select by ID.
Dialogue: 0,0:00:28.26,0:00:30.52,Default,,0000,0000,0000,,We can give a tag in our page \Na unique ID
Dialogue: 0,0:00:30.52,0:00:32.18,Default,,0000,0000,0000,,and then we can tell CSS,
Dialogue: 0,0:00:32.18,0:00:36.30,Default,,0000,0000,0000,,"Listen here: I only want to apply \Nthese styles to the element with this ID,
Dialogue: 0,0:00:36.30,0:00:38.21,Default,,0000,0000,0000,,not to any of the other elements."
Dialogue: 0,0:00:38.46,0:00:41.28,Default,,0000,0000,0000,,To do that, the first step is \Nactually modifying the HTML
Dialogue: 0,0:00:41.28,0:00:45.13,Default,,0000,0000,0000,,to add id attributes to the tags \Nwe want to specifically select.
Dialogue: 0,0:00:45.74,0:00:48.37,Default,,0000,0000,0000,,Let's start with \Nthe second paragraph here.
Dialogue: 0,0:00:48.53,0:00:50.90,Default,,0000,0000,0000,,To add an id attribute, \Nwe put our cursor
Dialogue: 0,0:00:50.90,0:00:53.42,Default,,0000,0000,0000,,in the start `` tag \Nright after the p,
Dialogue: 0,0:00:53.42,0:00:58.36,Default,,0000,0000,0000,,then add a space, and then type \N`id = "`
Dialogue: 0,0:00:58.98,0:01:02.67,Default,,0000,0000,0000,,Now we need to fill in this \Nid attribute with a value.
Dialogue: 0,0:01:02.81,0:01:04.18,Default,,0000,0000,0000,,What ID should I give it?
Dialogue: 0,0:01:04.18,0:01:06.45,Default,,0000,0000,0000,,Well, it should be \Ndescripitive and unique.
Dialogue: 0,0:01:06.51,0:01:09.23,Default,,0000,0000,0000,,Nothing else on this page should \Never have the same ID.
Dialogue: 0,0:01:09.48,0:01:15.08,Default,,0000,0000,0000,,Well since this is a song about rabbits, \NI'll call it rabbits-song.
Dialogue: 0,0:01:15.42,0:01:19.84,Default,,0000,0000,0000,,We can't have spaces in IDs, so if \Nthey have multiple words like this one
Dialogue: 0,0:01:19.84,0:01:22.24,Default,,0000,0000,0000,,you should always use \Nhyphens or underscores.
Dialogue: 0,0:01:22.60,0:01:24.72,Default,,0000,0000,0000,,I really like hypens, myself.
Dialogue: 0,0:01:25.65,0:01:28.94,Default,,0000,0000,0000,,Now we have a way of identifying \Nthis paragraph uniquely.
Dialogue: 0,0:01:29.02,0:01:31.65,Default,,0000,0000,0000,,So we can add a CSS rule targeting it.
Dialogue: 0,0:01:31.75,0:01:35.48,Default,,0000,0000,0000,,Let's go back up to our `` tag \Nfor the second step.
Dialogue: 0,0:01:35.60,0:01:38.43,Default,,0000,0000,0000,,We'll add a new line, \Nafter the last rule there.
Dialogue: 0,0:01:39.48,0:01:43.26,Default,,0000,0000,0000,,Now remember, the first part \Nof a CSS rule is the selector:
Dialogue: 0,0:01:43.26,0:01:45.84,Default,,0000,0000,0000,,the part that tells the browser \Nwhat to select.
Dialogue: 0,0:01:46.10,0:01:51.13,Default,,0000,0000,0000,,In our previous rules up here, \Nwe used selectors like `` and ``
Dialogue: 0,0:01:51.13,0:01:54.03,Default,,0000,0000,0000,,to select all the ``s and ``s \Non the page.
Dialogue: 0,0:01:54.55,0:01:57.20,Default,,0000,0000,0000,,Now to make a selector \Nthat only selects elements
Dialogue: 0,0:01:57.20,0:01:58.67,Default,,0000,0000,0000,,with a particular ID,
Dialogue: 0,0:01:58.67,0:02:00.86,Default,,0000,0000,0000,,we must start the selector \Nwith a hash sign.
Dialogue: 0,0:02:01.29,0:02:04.55,Default,,0000,0000,0000,,That tells the browser that \Nwhatever is coming next is an ID.
Dialogue: 0,0:02:05.15,0:02:08.80,Default,,0000,0000,0000,,Now we write our ID: \Nrabbits-song.
Dialogue: 0,0:02:09.60,0:02:11.88,Default,,0000,0000,0000,,The rest of the rule \Nis the same as before.
Dialogue: 0,0:02:11.93,0:02:13.72,Default,,0000,0000,0000,,We open and close our curly braces,
Dialogue: 0,0:02:13.72,0:02:17.84,Default,,0000,0000,0000,,we add a property, \Nlike background-color...
Dialogue: 0,0:02:18.36,0:02:20.57,Default,,0000,0000,0000,,...and ta-da! It worked!
Dialogue: 0,0:02:20.87,0:02:23.93,Default,,0000,0000,0000,,Only the song paragraph has \Nthe yellow background color,
Dialogue: 0,0:02:23.93,0:02:26.09,Default,,0000,0000,0000,,and the first paragraph \Nstayed the same.
Dialogue: 0,0:02:26.57,0:02:30.76,Default,,0000,0000,0000,,Let's do this again, \Nfor selecting that first ``.
Dialogue: 0,0:02:31.13,0:02:32.87,Default,,0000,0000,0000,,Can you remember the first step?
Dialogue: 0,0:02:33.52,0:02:36.59,Default,,0000,0000,0000,,That's right. We need to \Nactually modify this HTML
Dialogue: 0,0:02:36.59,0:02:38.14,Default,,0000,0000,0000,,to add the `id` attribute.
Dialogue: 0,0:02:38.30,0:02:40.69,Default,,0000,0000,0000,,So we stick our cursor \Nin the start tag,
Dialogue: 0,0:02:40.69,0:02:43.52,Default,,0000,0000,0000,,add a space, type \N`id =`
Dialogue: 0,0:02:43.58,0:02:46.69,Default,,0000,0000,0000,,and then type a very unique \Nand descriptive ID.
Dialogue: 0,0:02:46.79,0:02:49.94,Default,,0000,0000,0000,,So, "rabbits-info-heading".
Dialogue: 0,0:02:50.69,0:02:54.04,Default,,0000,0000,0000,,Okay, the second step. \NBack up in our style tag
Dialogue: 0,0:02:54.04,0:02:57.43,Default,,0000,0000,0000,,we add a new line, \Nwrite the hash sign,
Dialogue: 0,0:02:57.43,0:03:01.84,Default,,0000,0000,0000,,then our ID, \Nrabbits-info-heading
Dialogue: 0,0:03:01.84,0:03:04.95,Default,,0000,0000,0000,,and then put our properties \Ninside curly braces {
Dialogue: 0,0:03:04.95,0:03:08.62,Default,,0000,0000,0000,,background-color: purple; \N}
Dialogue: 0,0:03:08.94,0:03:13.26,Default,,0000,0000,0000,,Uh-oh! Okay, it didn't work. \NUmm... do you see what went wrong?
Dialogue: 0,0:03:13.42,0:03:15.28,Default,,0000,0000,0000,,Did I... spell it the same way?
Dialogue: 0,0:03:15.36,0:03:18.30,Default,,0000,0000,0000,,rabbits-info-Heading, \Nrabbits-info-heading...
Dialogue: 0,0:03:18.48,0:03:21.05,Default,,0000,0000,0000,,Hmm... so they look pretty much the same.
Dialogue: 0,0:03:21.16,0:03:23.37,Default,,0000,0000,0000,,Now I could compare them \Nletter-by-letter
Dialogue: 0,0:03:23.37,0:03:25.08,Default,,0000,0000,0000,,to figure out what's wrong,
Dialogue: 0,0:03:25.08,0:03:29.63,Default,,0000,0000,0000,,but what I like to do is just go down \Nand select the ID in the HTML,
Dialogue: 0,0:03:29.68,0:03:33.81,Default,,0000,0000,0000,,and copy it, and then paste it in here \Nto make sure it's exactly the same.
Dialogue: 0,0:03:33.89,0:03:35.48,Default,,0000,0000,0000,,And... it worked!
Dialogue: 0,0:03:35.56,0:03:39.82,Default,,0000,0000,0000,,My `` has a background. \NAnd did you noticed what changed?
Dialogue: 0,0:03:40.08,0:03:44.47,Default,,0000,0000,0000,,Maybe you did. It was the h here. \NThe h used to be a capital H,
Dialogue: 0,0:03:44.47,0:03:47.00,Default,,0000,0000,0000,,which the browser \Ndoes not consider the same.
Dialogue: 0,0:03:47.10,0:03:50.23,Default,,0000,0000,0000,,It has to be that lower h \Nto match the HTML.
Dialogue: 0,0:03:50.32,0:03:52.85,Default,,0000,0000,0000,,That's because id's are case-sensitive.
Dialogue: 0,0:03:52.93,0:03:57.14,Default,,0000,0000,0000,,So you have to both spell them \Nand case them the same way everywhere.
Dialogue: 0,0:03:57.51,0:04:01.75,Default,,0000,0000,0000,,I find it's best to just always use \Nlowercase for every letter in my IDs
Dialogue: 0,0:04:01.75,0:04:04.64,Default,,0000,0000,0000,,so I don't have to think about \Nwhat casing I used when.
Dialogue: 0,0:04:05.16,0:04:08.40,Default,,0000,0000,0000,,Okay, now let me leave you with \None last warning:
Dialogue: 0,0:04:08.40,0:04:10.53,Default,,0000,0000,0000,,IDs must be unique!
Dialogue: 0,0:04:10.65,0:04:13.44,Default,,0000,0000,0000,,If you have two tags on your page \Nwith the same exact ID,
Dialogue: 0,0:04:13.44,0:04:17.84,Default,,0000,0000,0000,,the browser might style both of them, \Nbut it also might style only one of them.
Dialogue: 0,0:04:17.96,0:04:20.34,Default,,0000,0000,0000,,And you don't want to leave that \Nup to chance.
Dialogue: 0,0:04:20.45,0:04:23.10,Default,,0000,0000,0000,,Nice, unique, descriptive IDs.