[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,In this webpage, we're using CSS
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,to style our ``s and paragraphs
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,so that all the ``s are green \Nand all the paragraphs are purple.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,But what if we wanted to select \Njust the first ``
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,or style just the second paragraph?
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,We'd need to come up with a way \Nto tell the browser exactly which
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,of the elements we're selecting
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,so that it didn't apply the styles \Nto all of them like it is now.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,One way to do that is to select by ID.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,We can give a tag in our page \Na unique ID
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,and then we can tell CSS,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,"Listen here: I only want to apply \Nthese styles to the element with this ID,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,not to any of the other elements."
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,To do that, the first step is \Nactually modifying the HTML
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,to add id attributes to the tags \Nwe want to specifically select.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Let's start with \Nthe second paragraph here.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,To add an id attribute, \Nwe put our cursor
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,in the start `` tag \Nright after the p,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,then add a space, and then type \N`id = "`
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Now we need to fill in this \Nid attribute with a value.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,What ID should I give it?
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Well, it should be \Ndescripitive and unique.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Nothing else on this page should \Never have the same ID.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Well since this is a song about rabbits, \NI'll call it rabbits-song.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,We can't have spaces in IDs, so if \Nthey have multiple words like this one
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,you should always use \Nhyphens or underscores.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,I really like hypens, myself.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Now we have a way of identifying \Nthis paragraph uniquely.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,So we can add a CSS rule targeting it.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Let's go back up to our `` tag \Nfor the second step.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,We'll add a new line, \Nafter the last rule there.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Now remember, the first part \Nof a CSS rule is the selector:
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,the part that tells the browser \Nwhat to select.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,In our previous rules up here, \Nwe used selectors like `` and ``
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,to select all the ``s and ``s \Non the page.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Now to make a selector \Nthat only selects elements
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,with a particular ID,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,we must start the selector \Nwith a hash sign.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,That tells the browser that \Nwhatever is coming next is an ID.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Now we write our ID: \Nrabbits-song.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,The rest of the rule \Nis the same as before.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,We open and close our curly braces,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,we add a property, \Nlike background-color...
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,...and ta-da! It worked!
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Only the song paragraph has \Nthe yellow background color,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,and the first paragraph \Nstayed the same.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Let's do this again, \Nfor selecting that first ``.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Can you remember the first step?
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,That's right. We need to \Nactually modify this HTML
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,to add the `id` attribute.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,So we stick our cursor \Nin the start tag,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,add a space, type \N`id =`
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,and then type a very unique \Nand descriptive ID.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,So, "rabbits-info-heading".
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Okay, the second step. \NBack up in our style tag
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,we add a new line, \Nwrite the hash sign,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,then our ID, \Nrabbits-info-heading
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,and then put our properties \Ninside curly braces {
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,background-color: purple; \N}
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Uh-oh! Okay, it didn't work. \NUmm... do you see what went wrong?
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Did I... spell it the same way?
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,rabbits-info-Heading, \Nrabbits-info-heading...
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Hmm... so they look pretty much the same.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Now I could compare them \Nletter-by-letter
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,to figure out what's wrong,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,but what I like to do is just go down \Nand select the ID in the HTML,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,and copy it, and then paste it in here \Nto make sure it's exactly the same.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,And... it worked!
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,My `` has a background. \NAnd did you noticed what changed?
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Maybe you did. It was the h here. \NThe h used to be a capital H,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,which the browser \Ndoes not consider the same.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,It has to be that lower h \Nto match the HTML.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,That's because id's are case-sensitive.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,So you have to both spell them \Nand case them the same way everywhere.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,I find it's best to just always use \Nlowercase for every letter in my IDs
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,so I don't have to think about \Nwhat casing I used when.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Okay, now let me leave you with \None last warning:
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,IDs must be unique!
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,If you have two tags on your page \Nwith the same exact ID,
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,the browser might style both of them, \Nbut it also might style only one of them.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,And you don't want to leave that \Nup to chance.
Dialogue: 0,9:59:59.99,9:59:59.99,Default,,0000,0000,0000,,Nice, unique, descriptive IDs.