I Don't Fear Code (or Zombies): More HTML and CSS for Writers, Editors and Beginners

1. Introduction: Whether you write for a living or just blog here and there, knowing some HTML and CSS will help you stand out in the post-apocalyptic landscape we call the Internet. This course is going to expand your knowledge of HTML and CSS, and should help you really kill zombies wherever they may appear. If you've never had an HTML or CSS before, I recommend you go back and take a look at my course, Code isn't as scary as zombies, it's HTML and CSS for Writers, Editors and Beginners. That's going to really start you off on how to write Tags, how to write CSS, those things. If you already know that or have some idea, then you could please go forward on this course and learn away. My name is John Ray and I'm a working web developer and college professor who's been building websites since the last millennium. Let's learn some skills and beat down some zombies. 2. Zombie Tools (skip if you took "Code isn't as Scary as Zombies"): Hello. In this episode we're going to talk about what tools you'll need in order to work with this course. The truth is you don't need a whole lot. There are lots of different things you can use, but here are some recommendations. First of all, plain text editor, you can get this either from, if you're on Windows, you can use Notepad or if you happen to be on a Mac, you can also use Text edit, though you should use it in it's plain text mode. All of that said, while you can use a plain text editor, it's probably not the most ideal just because it doesn't give you as much help as it could. For that I extra recommend a color coding editor. What it does, it's going to color code the code so that you can actually see what types of code or pieces of code, how they interact with each other and the tags get in a different color then say, content and some of those things. It makes it much easier to debug and figure out whether you've got a syntax error or something going on or some other type of error. For those happy spot errors, Notepad++ I believe is available across platform, but it's definitely available on Windows. Atom is definitely available across platform, another one, Brackets and then Sublime Text is probably a little bit beyond the skill level. It is a great text editor, and a very powerful text editor and probably more than you need. I wouldn't buy it if you don't need to. Notepad++, Atom, and Brackets are all free to download. Really anything else you use, any other coding tool for HTML and CSS should work fine, just about anything, really. The other that I'm going to recommend though is CodePen.io. This is a website that's available, free to use, it's easy to use, automatically updates as you type, which is super helpful as you're learning, and it takes care of all the fiddly stuff with just how to build a page and what to do for those things. It will allow you just focus on the code that you want to focus on, rather than having to deal with all of the code around that code that you would need if you're using just a basic text editor. Any class demo as well be CodePen.io. Let's take a look at that. We're going to look at getting set up, how to create a free account. It's important to save your work mostly so you can go back to it and fix it and also play with it. When you start working on your project, it's good to have it in place where you can save it over time as you go through the course and are able to then just publish it so that other people can see and look at what you've done. Let's go ahead and punch them zombies in the throat. This is the code pen website. Down here in the bottom left you're going to have sign up. You click on that, sign up with an e-mail. That process is pretty typical. I'm going to log in just because I already have an account, logging in. Now once you're logged in, I already have, these are some pens that they think you might be interested in. But what we're going to do is we're going to go to explore, we're going to create in a pen. In CodePen a Pen is just this. It's a HTML, CSS, and JavaScript portion of a page that you can play with it. The JavaScript portion is not something we need. What I'm going to do is to minimize that. We're actually not going to deal with CSS right now. We'll get to that a little later in the course. I'm going to minimize that as well. We just have some HTML. I'm just going to write a quick little thing here, Hello world. The default way to start learning a programming language is to type hello world and output it to the screen. As you can tell as I typed it came out. CodePen.io is just a really great tool to use, really easy and hopefully will make your life a lot simpler as you try to follow along. Those are the tools. Thanks. Let's head to the next section. 3. Undead Markup: In this video, we'll talk about ways mark up content for display, communication, subscripts and superscripts, definitions and abbreviations, time element or time tag, preformatted content and code, and the mighty small tag. The first thing we want to talk about is the sub tag or subscript, and it just does what you would expect a subscript to do, shifts the baseline down 25 percent, and uses smaller text than the text around it. It's best used for footnotes, as I'm sure you're well used to. Also for chemical formulas like H2O etc. Or for numbering math variables such as Z1 to Z horde etc. Superscript creates superscript text, much like you would expect with exponents. Just the baseline up 50 percent, uses a smaller text size, and it's best used for exponents. Z cubed for instance. Also something called superior lettering, which is a common abbreviation style in French and possibility languages. It is technically a different thing than superscript, but if you're implementing it in HTML typically it is done with the sup tag or the sub tag. Also ordinal numbers, the 106th or third or fifth or whatever. Sometimes you'll need a markup, a definition or an abbreviation, something you'll see, commonly. The dfn tag is the markup for a definition tag. With the fn you can also use a title attribute that sets the exact thing defined. You can also add a link from the dfn tag directly to a definition that might be further down on the page. I'm using something called page fragments or anchor tags. We'll talk about that in a little bit. With the abbr tag, you can set up abbreviations. Yes, abbr is an abbreviation for abbreviations. You can also do acronyms and a wide variety of those as well. Similar to the definition, you could also use a title attribute. But the thing about title attributes for both abbr and dfn, is that they're only useful to mouse users because no one else can see the tooltip. They're only useful also to the subset of them that know to hover over the abbreviation with the mouse, or know that abbreviation is being used, they could even hover with the mouse. Well, I recommend adding the title attribute to both your dfns and abbrs, unless you use them in conjunction, then you only need it in abbr that's within a dfn. I would be careful not to only use this, but to make sure that you, as is particularly good practice, define the abbreviation acronym when you first use it just to make sure that everybody's on the same page and everybody knows what's going on. The time element, that's used to mark up specific dates and times or durations of time. For instance, time of August 23rd, duration of 12 hours and 37 minutes. To make it a little bit easier for SEO and a little bit easier if the sound standing for screen readers, there is something called the datetime attribute. Formatting of this is very important because it has to be machine-readable. It has to come in a format that the machine is expecting or the computer's expecting. For instance, we have this is August 23rd, 2025 at 1700, 52 minutes and 42 seconds. Generally, if you drop any piece of this, you can create a valid string such as 2025-08-23 or 2025-08 or 1752, etc. Those are all valid datetime values. The pre tag, we use for code or for other preformatted text. It's formatted in a monospace font, usually courier new, and whitespace is kept intact and it's not collapsed into a single space like it normally is in HTML. If you have two spaces in place, it will show two spaces instead of just showing one space. The small tag originally is used to just make text smaller is now in HTML 5, used for things like legal disclaimers, copyright notices and side comments. Using this code is much more semantic meaning that it provides more information to the browser and [inaudible] , etc. Then just having a generic div or generic span that makes the text smaller. Let's look at some live code. Here we starting out with the subscript, you can see zombie contagion can be obliterated. Subscript of one right here using sub tag or here water H20 also carries zombie blight or the sum of Z1 to Z horde. Superscripts, we've got the Z, three or Z cubed. It was undead fright. The superior lettering for men was O. Mademoiselle zombie means Mademoiselle zombie or the ordinal numbers for the 106th infantry. Also, we have definition and abbreviation. Here we have the dfn of the title of zombie. Here if I hover over it, it shows me what is in the title attribute. Then I just have the information beyond it, whatever you want to put in. We have an abbreviation under zombie, which is right up here, this information here. Then in the human resistance one, I put an abbreviation inside a dfn and then only did a title on the abbreviation, not just the definition. Then again, put that right after it to make sure that everyone was on the same page. The time value, time tag is right here it just wraps around here, doesn't make any actual changes to the underlying text, doesn't make any formatting changes or anything like that. It just makes it more machine readable. We have the datetime here of August 23rd, 2025 at 1752 42. You can include more specific or I could have also left it at the first part here. Then we also have duration. If I'm doing a duration, I don't need a date. I just have the amount of time such as 12 hours 37 minutes, datetime etc. Right next we have preformatted text, and for this I played around a little bit with formatting it. I grabbed the abbreviation just to have some text in there. Then I played around with spacing, so that I have all of this extra stuff and the whitespace stays intact. That's a direct mirror of what is shown in the code. As to all here we have small tag. This is the regular size text. Then I actually did a small tag, which is this one here, which is just a little bit smaller. Then I added a second small tag within the small tag just for fun. That's weird fun. It is a small tag within a small tag, and that made it even smaller, one level further down. Then of course, down at the bottom here we have our footnote. That's it for our undead mark up. Now, we're going to talk about editing. 4. Editing Zombie Moans: This video we're going to talk about editing. We're talking about ways to markup content, to show edited material, we're going to talk about delete tag for removing content, the site and date-time attributes to help to explain when things happened and how they happened. An insert tag, which is going to be when you add content. Again, cite and date-time attributes, also going to work with them and a mark tag which highlights things and then show you how you can add a no group or question section just to one way to do it. All right, this is Zombie editing. Sometimes you need to show editing marks. I recommend you do this only if the edits need to be public with like a law or with bylaws or something, something where it's really important that you can see the edited history of it. To legal document differences between two documents and to make sure you're transparent. The del tag puts a line through text, just like strike-through. Cite attribute allows you to reference a URL for why changes have been made for meeting minutes or possibly a legal document, etc. Date-time attribute takes a properly formatted date string and just gives the time or date when that particular change was made. Then there's also something called the S tag, which is for strike-through. Visually, these do the same thing, the difference really is that Del is used more for signify editing, whereas S is a little bit more for content is no longer valid. The INS or ins shows where text has been inserted. Again, you're the cite attribute, same as the del, it's a URL referencing the reason for the change. Date-time attribute, again, same as del, same as the time string, doesn't exit the date and time of the change. Then there's the mark tag which is a highlight, mark highlights text, puts a yellow background behind it, should be used for content of relevance, not content of importance. Strong should be used for content of importance. But I think mark could be used a lot with editing just to make sure that you are or to point out things that maybe someone wants to look at it, make sure that they're correct. Again, for importance, you want to use stronger B tag preferably the strong tag. Mark instruction not be used when the same content at the same time, and the editing context could be content that needs a second look or some special attention. Maybe the editor didn't know how to reward that sentence, etc. I also wanted to come up with a way to write notes in because sometimes it's not enough to market, you also want to write a note of some sort, so there's not a standard way to do this, but I'll give you sort of an example. What's the CSS to make it look pretty? Then you'll have an option of doing that way or if you find a better way, you're welcome to do that too. The note is large enough, you can put it in an aside element, but that's a block-level elements. It doesn't work super well for inline notes, so the method I'm using is a span tag and some CSS to make it look a little different than the rest of the content. I'm just using a class of note and just wrapping the note in that particular class with the span tag. All right, so let's look at some code. Here I've have the President's letter to New Yorkers after the Zombie invasion, some editing, hopefully before it goes out. These are some del tags, as you'll see here. I also added a cite operation and a date-time to this particular del. I did not do cites throughout just this content just because it would get really overwhelming. I did here and I did for the insert here, and you probably should do it for every place that you're making changes, but in this case, I just didn't do it to make things a little cleaner. But I did add date-time to just about everything because in theory, the date-time would change a little bit every time it's changed, assuming you're using seconds, etc. How granular do you want to be is up to you and the requirements of your situation. We have a delete here, we have an insert, we have a mark. Some more inserting, some more deleting. Now one thing that's going on here, and I did actually add some notes here. You're not seeing those yet because I just didn't display them because it's confusing. If you don't know what they are, they just show up as regular text, and one thing that I don't like about the Insert tag is that it underlines things. The reason I don't like that is because that is much more often used for links than for inserted text, it could confuse some people, so I just did some CSS to help make things look clearer. All right, so if we add these, I set it up so that deletes are background of red, inserts have a background of green, the marks are still yellow, and then I added a background of blue to the notes. You can see that there are notes added here. There's a lot of stuff deleted, probably to help save President de faces, face. But these are just some things that you might do to help make sure that communication is proper and that you're doing what you need to do to explain it to people. All right, that's it for editing. Now let's move on to HTML symbols. 5. Symbolic Apocalypse: In this video, we're going to talk about HTML symbols. Angle brackets or ampersands are both used to designate code. So when you actually need to show those, you can do a slightly different thing and says, we're going to talk about here. We'll talk about non-breaking spaces, intellectual property marks, currency, quotation marks, and dashes and hyphens. What's the symbol? A lot of times you'll need to show an angle bracket or other character that designates code. So you need to have some way of showing that it's not code. The way that you do this is through an HTML symbol. Symbols start with an ampersand and with a semicolon. Many of the common ones have been given a more memorable name and are called HTML entities. There are many more symbols that you can use than the ones that are memorable names and they have a number code with them. For instance, here we have less than and greater than. So it's going to ampersand LT semicolon. So LT for less than and greater than, it's going to be ampersand GT for greater than semicolon. Ampersand. Since the ampersand now signifies the HTML symbol, we need to do something different with it. So ampersand is actually when an ampersand AMP semicolon. Now some, you'll see sometimes that an ampersand just by itself will also be picked up as an ampersand rather than as code. For best compatibility, I'd recommend having the full ampersand AMP semicolon. But there are contexts where it might be okay or might work to just have the ampersand. Non-breaking space. This is used a lot for just if you're one of those people that has to have two spaces after a line. The only way to do that in HTML is to have one regular space and one non-breaking space. So two words that are joined by a non-breaking space will not break across a line break. So you can keep those two words together no matter where text falls. It also prevents white space from being collapsed into a single character. So typically, if you would add like six spaces to space, two things out, the best spacing should be done with CSS instead of with HTML. But for some reason need a few extra spaces, you can do the non-breaking space a couple times, and that will come out as that number of spaces rather than collapsing them all into a single space. It looks like ampersand, NBSP is for non-breaking space. So in the realm of intellectual property, and we have copyright. We have the copyright symbol, which is ampersand copy. There's also a registered sign, which is ampersand ridge, and the trademark symbol, which is ampersand trade.The Euro is going to be an ampersand euro, cent is going to be ampersand cent, pound, ampersand pound, yen, ampersand yen. Pretty self-explanatory in those cases. Sometimes when you're working with content management systems, there will be some fields that don't handle quotation marks very well. The main reason that that happens is that the quotation mark can confuse the code and cause it to end before it's supposed to. So the way to get around that is if you can still access the back-end of the page, you can add quotation marks through HTML symbols. So ampersand quot, Q-U-O-T will work for dump double-quotes. You can also use these number codes to add smart quotes or for left and right and smart single and smart double.So this is smart single quote left. This is the smart single quote, right. This smart double quote left, and the smart double quote right. There are three types of dashes in HTML. The first is the hyphen, that's the one on your keyboard. It's the shortest of the three, and it's used connect two related words. We're pretty familiar with this. To put it in the HTML, you just use the keyboard key for en dashes and dashes just slightly longer than a hyphen with the letter n. It's used for a range of numbers or connection between two words. Here will be some examples. In HTML, you're going to use ampersand En dash, or the number is 8211. Em dashes similar to En dash, it's the width of the letter m, and it's the longest of the three. It's used to separate two related but separate clauses or setup a clause of the sentence. So being a zombie said no whenever. Putting an HTML you use the ampersand Em dash or 8212. All right, let's take a look at some code. So I just have examples here to show you how these all work. So we have less than, showing up here properly with greater than, ampersand GT, ampersand showing up here. We have the non-breaking space is showing as a space. You can see there's actually two spaces there. The second one being the non-breaking space. We have the copyright symbol, we have the registered mark, and we have the trademark. We have Euro, cent, Pound, Yen, dumb, double quote, smart single quote left smart single quote right, smart double quote left, smart double quote right. Now we have our three dashes. We have a hyphen, the en dash, and the em dash. That's it for each of the symbols. Now we'll move onto fragments and other types of links. 6. Zombie Fragments & Other Links: In this video, we're going to talk about linking to page fragments, email links, telephone links, and SMS links. Fragments allow you to link to a portion of a page or a fragment of a page. Possible uses include some sub navigation and connected terms to their definitions, connecting questions to their answers, link at the very bottom of page, back up to the top of the page. There are two parts to this. One is the fragment you're linking to, and the other is the link to that fragment. Fragment is defined by an ID attribute on the HTML element. Whatever HTML element you want to use, and then the link you use should have a hashtag and then the name of the ID. If it's a link within the page and the ID is undead, you can just do hashtag undead, back to undead, etc. You can also add it to the end of any URL, assuming that ID exists within the page, the browser will scroll down to where you are. For instance, if we look here at probably not actually going to work because I don't think I have an ID like that on the undead institute page, but if there were, that would be there. That's how you would do linking to a fragment. If we need to link to an email address, we'd use the anchor tag just like we did before, but instead of a URL, we use mail to colon and then the email address that we're trying to e-mail. We'd also link to telephone numbers, which is particularly useful on mobile, where you can tap a number and call it. For instance, in this case you would have tel, colon, and then the phone number. I believe it doesn't need to be in that particular format of three numbers dash three numbers dash four numbers. For an American call, of course, if you are doing internationally, probably you'll want to do a plus one and then the rest of the number. Just like a telephone link, you can also do an SMS link and it basically works exactly the same except for SMS colon instead of tel, and it will send a text rather than a call. Let's look at this in code. Here We have the mail to and then the zombiekilla@undead institute. You also have a telephone link of 855-555. Now the real phone number just [inaudible] Here we have the SMS link I'm in then to demonstrate the fragment, what I have is a question here and in theory this would be more questions. If I want to click on this, it will take me further down on the page to where the answer is. It takes me all the way down and there's a little extra space there. But then I can scroll all the way back up and see the page again. If I click it, I will again, of course, go all the way back down and scrolling back up. That's it for fragments. Next we're going to talk about multimedia. 7. Multimedia Hordes: First of all, we need to talk about the source element, which is the basis for some of these other elements. The picture element, which is a fancy or image tag. We'll talk about that in a second. There's audio and video codecs, or how audio and video can be stored and what algorithms are used to compress them, and then we have the audio element and the video element, and finally, the iframe element. HTML5 brought with it support for a variety of media. The backbones of these media supports as the source tag. Tells the browser where to look for the file and offers several options based on what a codecs that particular browser supports. All right. The picture element allows you to set different images for different sizes of the screen. It also gives you a fallback if the browser doesn't happen to support the picture element. In this instance the source element uses a source set attribute, but audio and video uses just the source attribute. There's also another way to do this using a source set attribute on the image tag itself, but I find this a little harder to wrap your mind around and the benefits are comparatively small at this stage. It can be a little bit more efficient. Give the browser a little bit more leeway in choosing the right image. But picture element also allows you to do different images of different sizes and to do what's called Art Directing, which allows you to put in different parts of an image that you might be interested in showing at the different sizes. The picture element looks something like this. We have the source set here with the actual file that we're going to be using. Your immediate query here with min-width 40em. As you may remember from the last class or from other classes you've taken maybe, 1em is equal to the default font size for the website. Reason I'm associating the media query with the size of the font is that some people will make their font larger. If we hook it into sort of the font size, then our media queries will still work and they'll also work fine when we get to the right pixel size. It's just a little bit more robust way to set our media query. Now, our default is going to be this other image. Now, in the first image, the zombie has no top hat. In the second image, this fallback image, the zombie does have a top hat. That's how we'll see the difference between the two images. Then finally, we have the slash picture. Now, if the browser didn't understand the picture element or the source element, it would just skip those two and it would just show the image element there. A codec is a way of saving audio or video file compression algorithm. There's also container files, which is the extension of the file and can hold a variety of different codecs. Not every browser supports every codec or even every container file. Some codecs are open source, but not well supported. Some are widely supported but aren't as good at compressing the file, or keeping the video quality high, et cetera. There are different codecs that are used for different purposes at different times. All right. Let's talk about audio. Audio tag allows you to play audio directly on the page. You need to include the controls attribute to show the audio controls to the user. Otherwise, nothing will actually be shown on the page itself. The controls attribute is also a Boolean attribute, meaning that you don't have to say controls equals true, or controls equals controls, you can just add the word "Controls" there and it will work to add controls. Then we also have some source elements. For instance, here we have three different source elements, so.oog is a Ogg Vorbis file. It usually is pretty small, but not always well supported. For A is probably something you're a little bit more familiar with. It's the next, the MPEG4 specification, which is fairly high-quality, and we also have the MP3, which is probably a little bit lower quality, but has very wide support. Lastly, we had that link to the MP3 file, just provide that fallback in case somebody is using a browser that does not support the audio or source element. There's also the video tag, which works very similarly to the audio tag. It also needs the controls attribute. Video controls, and then we have some sources. WebM is a file format that gets the video very small, but as of this recording, it really only works in Chrome. Oggv is the Ogg Theora, which is the video component of Ogg Vorbis, or the Ogg specification, the open-source specification. Then we have the MP4, and finally we have a link for those browsers that don't support video or source. Lastly, we're going to talk about the iframe element, which is used most often to embed videos. Technically, an iframe is displaying one web page within another. When you are embedding a video in your page, you're basically saying, "Take the YouTube page and stick it in this other page here." Here's an example of an iframe. We have a width and height set, we have a source set, which is the YouTube video, we have frame border and allow, allows a bunch of different options and allow full screen, and then the closing of the iframe. All right. Let's take a look at these in code. First we have a picture element. It's the same picture element I showed you earlier, and then if we change the size here, eventually we should get a top hat. As we came down to be within 40em, the page size being within 40em, that top had appeared. If I go above that again, it drops out. It's just a way of showing different images. Now this HR here is just a horizontal rule and I'm just using it as a separator. This is to the horizontal rule here. Here we have audio. (AUDIO PLAYED) We have lovely audio, because it's showing controls, it's showing here, and it's showing whatever of these files is most easily understood by the browser, or the first one that's understood by the browser, it will use that. Within Chrome, I think, M4A and MP3 are both supported. I don't believe Ogg is, but it's supported in Firefox and maybe another browser. Next we had video. This is the straight video tag, and there's the video playing. It's just a quick video of these guys dancing. As you can see here, there are controls are included. We have our source, we have controls, different sources, and then a fall back if we need it, which in this case we don't. Then here is an iframe, the same iframe we showed in the slides. Here it just is playing it through YouTube, which takes a little bit longer to think and then it shows some other videos. All right. That's it for multimedia hoards. Next up is HTML tables. 8. Smacking Zombies with an (HTML) Table: In this video, we're talking about HTML Tables. We're talking about the table element, the caption element, the table row element, and the table data element, or table cells. You'd have to be careful with tables. They do a great job of laying out data. They tend to be horizontally oriented, and in a world of responsive design where your website works both on a giant desktop and on a tiny watch or phone, being horizontally oriented can make it really hard for tables to show properly in both contexts. Just be careful with them and be sure to only put really things that you need in there, not really use tables for layout of actual page elements, but really, only for actual data. Tables use many tags as you probably saw at the top of this video. First of all, we have to have the table element. Then there's also a table description, which is the caption, table row, and then table data or cell. There's also table heading cell, which is th. Here's a table, opening table tag and we have a caption, A Tableau Zombies. Then we have starting a table row. Then we have a table data. First row, Zombie 1, Table data 2. Our first row for Zombie 2, then we're closing the table row. That is the first row of our table. Then we have our second row. Second row for Zombie 3, second row, Zombie 4, closing table row. Then we close the table and a little bit we'll get into the code and I'll show you what this actually looks like. With headings, similar sort of thing. We have opening table, we re caption, start with the table row and then we're going to make the first row of the table headers. We have left column zombies and re column zombies, closing of a table row and then we have our second row, which is our first row of actual data, table data first row Zombie 1, first row Zombie 2, close the table row, close the table. Let's look at that code and see what those actually look like. I did a little bit of CSS just to make sure that things looked right. I just collapsed the borders so that they didn't have spaces between them. Then I put a solid border around both the tds and ths. We have our table, h2 just designating where the table is. We have our opening table tag, and we have our caption, which is what appears right here. We have our first table row, so we have our first element here. First row Zombie 1 Then we have our second table data, Zombie 2 right here, and then we have our second row. Here's second row. Then we have second row Zombie 3 right here. Second row Zombie 3, second row Zombie on 4, second row Zombie 4. Close table row, close table. Now with headings, it'll look just about the same, except these ths or table headings are going to by default show as bold. We have opening table, our caption. We have start with the table row, table header, Left Column Zombies, Left Column Zombies. We have table right Column Zombies, Right Column Zombies. Too far. Right Column Zombies and then we have the second row and was our first row data. First row Zombie 1, and our second table data right here. First row Zombie 2, close the tr, close the table. That's it for tables. Next, we're moving on to selections and some CSS. Goodness. 9. Zombie Selection: In this video, we're going to be looking at descendant selectors, pseudo-classes and other, pseudo-classes, first-child, last-child, and nth-child, then we'll talk about zebra striping a table. Descendant selectors, sometimes they're also called contextual selectors and they're basically a combination of an id, a class end or element selectors separated by a space. For example you could have this id of horde or with a class of zombie with an element of b, they doesn't have to be one id, one class, one element. It can be two elements, it can be two classes on an ID, can be one ID and an element. It can be whatever combination you want, however many you want and in this context, this one means only b tags that are within an element with a class of zombie and which is also an element with an ID of horde. Given horde zombie b, we have an id of horde here. We have a class of zombie and b, so this is selected since there's no b, this is not selected since this is not in a class of zombie, this is not selected. Although this is a classic zombie with a b, it's not selected because it's not within the ID of horde. Pseudo-classes are ways to select elements based upon aspects about them. First child is going to select the first child of another element and pseudo-classes are written with a colon between the selector and the pseudo-class. So ul li: first-child being an example. Given ul li: first-child, we have a horde ul li:first-child. We have a ul here, we have an li, so this is the first child of the ul. This one is selected, this is an li within a ul, but it's not the first child, so it's not selected. Here we have another ul, the first child, however, is a b tag, so it's not selected, it's not an li and this as an li is not the first child, so it's not selected. We'll take another look at this in the code 2 to make sure it's clear. Last child is going to work the same as first-child, they just didn't go from the opposite direction. Given ul li: last-child, we have a ul , we have li. This is the first child it's not the last child, so it's not selected. But this li, is selected because it's the last child. Now if you only had one li element in here then it would be both the first and the last child, so it will be selected as the only child it would be selected for both first-child, last-child and here we have another ul. The b is the first child, li, is the last child so it is selected and the b tag of course is not. Then there's nth-child and this is a function that can take a number, a keyword, or a formula. For instance, if we just put a seven, it's going to select the seventh child of ul, but only if it's an li, you can put in even which is going to select all even children e.g. 2, 4 , 6, 8. Who do we appreciate? Zombie zombies. Here we have a function 3n minus 2. When n is 1, 3 times 1 is 3, minus 2 is 1. When n is 2, we have 6 minus 2 which is 4, and then 7 and 10, etc. That would be a function that would select those particular elements. Now, zebra striping is when you make table rows of alternate colors in order to make it easier for people to follow the row across. You can use nth-child for this with for instance, tr: nth-child (odd) setting the background color to a light gray would be a great way to do this. Let's look at some code has the same examples from before. We have here, given the hashtag horde. zombie b. What I've done here is just set colors on those that are selected to help make it clear that they're selected or not. It should be color blue of b tag within a zombie within a horde. Here we have a b tag, which says it's selected, but it's a b tag within a zombie within a horde, so it is blue and none of these others are selected, just as we talked about before. This one's not selected, because there's no b tag, this one is not selected because there's no zombie tag and this one is not selected because there is no horde tag. First child isn't the same codes we saw before and here I'm just changing the color to green for those that are selected. First horde, we had to add an ID just to make it clear, so first horde ul li:first-child. We're in first horde ul li:first-child, this one selected, and this one is the green one. This is the second child, so it's not selected. This is a ul still within first horde, but the first child is not an li tag, so it's not selected it's just bold. Next we have last child, so last child here. Last child selector, we have #last-horde ul li:last-child, everything is within the div id last-horde. We have the ul and li it's the first child, it's not the last child, so it's not selected. Then we have an li class of zombie it's selected because it's last-child, so it's turned red. We have another ul the first child is a b tag, the last-child is an li tag, so it is also selected and so it is red. Then lastly here we have a table that were zebra striping, so we'll just set the table row with an nth child of odd. Choose first, third, fifth, seventh, etc. Background color of a, just a slight gray and here we have the opening table, we have the caption, we have the first row, zombie 1, zombie 2, second row zombie 3, zombie 4. Third row zombie 5, zombie 6. Fourth row, zombie 7, zombie 8. Fifth row, zombie 9 zombie 10. Sixth row zombie 11, zombie 12, etc, all the way down to zombie 16. As you can see, the odd rows have a background that's gray, so we have this first, third, fifth, seventh ones. That's it for zombie selection, where next we going to talk about the zombie Polka, or rather accordion menus. 10. Zombie Polka: Alright, in this video we're talking about the details element and the summary element and how you can create your own Accordion menus. First of all, we have the details tag, which is a block level element, and you'll put most of the content in that element and we have the summary tag which goes within the details tag, should be as short as makes sense. When rendered, the summary element will display with a triangle to its left. Then you click on it and the triangle open up and show the content within. Let's see what this looks like. Again, here we have details. Then we have the summary as the first chart of details is the best practice. It should also only have one summary tag if you have multiple can confuse the browser and then we close the details tag here after this whole Dear Diary. If we come down here, we see that the summary tag right here, is what's shown here and if I click on this and then it shows me all of the content here. If I click on it again, it closes. I can click directly on the triangle, or I can click on the text itself and there you have your Accordion menus. Let's see what happens if we put a second one in here and 3,2. If we put a second one in, it's just going to assume as part of the content. That's it for Accordion menus. 11. Conclusion: Thanks for coming along in the Zombie killing adventure, it was great to have you along. I'd love to see any of the projects that you've done. Please feel free to share them with me and with classmates. I'd love to see what you've done and what you've learned. Thanks and I'll see you next class. Bye