Code Isn't as Scary as Zombies: HTML and CSS for Writers, Editors, and Beginners | John Rhea | Skillshare

Code Isn't as Scary as Zombies: HTML and CSS for Writers, Editors, and Beginners staff pick badge

John Rhea, Web Designer/Developer/Storyteller

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h)
    • 1. Introduction

      0:46
    • 2. Your Zombie Fighting Tools

      3:50
    • 3. Why Zombies Hate HTML

      5:49
    • 4. Zombie Blocks of Content - Part 1

      4:42
    • 5. Zombie Blocks of Content - Part 2

      5:22
    • 6. Listing the Undead's Weaknesses

      3:50
    • 7. A Picture's Worth a Thousand Moans

      7:25
    • 8. Dressing Zombies in Cascading Style Sheets

      6:04
    • 9. Fonting it up with Zombies

      6:53
    • 10. Boxing the Undead: The CSS Box Model

      6:19
    • 11. Punching Code from Word in its Zombie Face

      2:49
    • 12. Pulling Out the “Brains”: Pull Quotes

      6:10
    • 13. Thanks for the Memories

      0:45
16 students are watching this class

About This Class

Knowing how to swing a baseball bat can help you survive the zombie apocalypse even if you aren't a professional player. In the same way, knowing how to swing a little HTML and CSS can help you survive that latest blog post or web article even if you'd consider yourself “technically challenged.” And maybe you already know this. You see the zombie horde on the horizon and know you'll need to understand some code, but every book you try is boring, frustrating, or down right scary.

Fear not. This course will give you an introduction to HTML and CSS so you can understand what they do, how they work, and recognize some basic code you'd see any day of the week. Then we'll pull out the baseball bats and start smacking down some zombie problems you've struggled with before like the gobbledygook Microsoft Word pukes onto your page, how to align photos independently, and more.

By the end of this session you'll have knocked the snot out of your coding fears and be armed with practical skills you can take to the bank (or wherever you store your money after the apocalypse).

Required software: You only need a plain text editor and a browser, but I’ll also point you to a few free tools that can make your life easier.

*****

If you enjoyed the course sign up for my newsletter and get a free HTML cheatsheet and checkout this class's sequel I Don't Fear Code (or Zombies): More HTML & CSS for Writers, Editors and Beginners.

Transcripts

1. Introduction: Hello and welcome to code isn't as scary zombies. HTML and CSS for writers and editors. This course is going to talk to you about code and how non-scary it is. You'll get to work with HTML and CSS in a way that is supportive and allows you to figure out what you're doing without being so scared of it. We'll talk about HTML, what it is, how is the structure of the web, and how you can create your own tags or at least write your own tags rather and include them in your different projects. We'll also talk about CSS, which is more about the design and how to make it look pretty and help you use that to further enhance your projects and allow you to not be scared of code. Along the way, we'll try to kill some zombies and help you to have a little bit of fun. 2. Your Zombie Fighting Tools: Hello. In this episode, we're going to talk about what kind of tools you'll need in order to work with this course, and 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 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, you can use a plaintext editor. It's probably not the most idea, just because it doesn't give you as much help as it could. For that I still 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 sorts of 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 cross 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, but in 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. Anything else you use, any other coding tool for HTML and CSS should work fine. Just about anything, really. Think 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 it automatically updates as you type, which is super helpful as you're learning. 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 will be in 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, and 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 Codepen.oi Website. Down here in the bottom left you're going to have sign-up. You click on that, sign up with an email, that process is pretty typical. I'm going to login just because I already have an account. Logging in. Now, once you're logged in, these are some pens that I think you might be interested in, what you are going to do is you are going to explore, you're going to create in a pen and in Codepen or 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, so we're going on, I'm going to do is to minimize that, and 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 ust have some HTML, I'm just going to write a quick little thing here. 'Hello world'. That is, 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. Why Zombies Hate HTML: Welcome back to code isn't as scary as zombies. We're going to take a look at what HTML is and why zombies it hate so much. First of all, what is HTML? It's a programming language, but it really, rather than providing so much programming or processing, it provides structure to documents. I like to think of it as the skeleton of your page or the skeleton of your website page. It allows you to build out the page and have different types of Flash, and different types of colors, and all those sorts of things that go into a website page. But it has to hang on something and HTML is that hanging point. It provides information about the content of the document. There's about four parts to an HTML element, single unit of HTML, four pieces, opening tag, attributes, content, and a closing tag. To the portfolio opening tag, uses angle brackets, less than and greater than signs, to set off the tag. It starts with a less than sign and the tag itself ends with a greater than sign. For example, paragraph opening tag looks like this. That's an opening paragraph tag. You probably already saw that in the last video when I was demonstrating code [inaudible] but this is an opening paragraph tag. Next, we have attributes. This is something we'll get to a little bit more later, but just want to introduce it here. They are things about the tags. They come right after the name of the opening tag and before it's closing angle bracket. They're used for additional information, identification, or options, gives some other ways to use tags or helps the browser know how this particular tag is being used. The class attribute helps us, particularly when we get to CSS, it defines a group of elements, type of HTML content. It doesn't have to be the same element in particular, but it could be a class of elements that act the same way or do the same thing, or have the same aspect. Could be all of these have read text or all of these have a certain setting of margin between them, something like that. It really could be just about anything. When you're adding a class to an element, this is how it goes. It's the opening tag of the P tag, and then before the closing angle bracket, we have class equals and then learning in quotation marks. Hopefully, you're not learning in code on code quotation marks, but the class has a value of learning, and there could be multiple HTML elements on the page that had that class. There are a lot of other attributes that we can use, and we'll talk more about those a little bit later. Now, the third thing, or third piece of an HTML element is probably the most important. It's the actual content. It's the information that goes inside. It's between the opening and closing tags. Often this is text, but it could also be other elements, and often is also other elements as well. Some elements will have limitations that they can't be inside. Other elements depends upon the particular job that the element is doing and what is appropriate for it. Some elements just can't exist within, inside other elements, and other elements only exists within other elements. It really just depends on the particular element that you're working with. HTML is also pretty forgiving. Even if you totally mess it up, a browser just tries its best to do what it thinks it should. Often it does a good job. Sometimes that's good in that it won't fail miserably. It's bad though, if one browser does not allow it to fail, but the other one does, and you don't test in that browser. Having good code is the best option for consistent previews of pages across multiple browsers. Closing tag, it looks a lot like the opening tag, except it has a slash in front of it. For the paragraph tag is a slash p, some tags are what's called void tags and do not have a closing tag. Notably, these are image, break and hr, or horizontal rule. img, br, and hr, these are the main ones that we'll probably be talking about within this course, but there are a few more than that as well, but most tags have a closing tag. Usually, the only reason they don't have a closing tag is because the content of the tag resides in the opening tag, rather than having something in between it. For instance, an image, you will get there eventually, but you'll have like a source attribute that'll tell you where the image can be found and then it just shows it, so it doesn't make sense to necessarily have an opening and closing tag for images. Here's a paragraph tag example, so bringing in an attribute as well as no opening, closing tags and contents, we have started with a p tag with a class of learning, where killing zombies is fun, that's our content and then slash p is our closing tag. Nesting. Another important thing about HTML tags is to make sure that you have opening and closing tags nested properly. For instance, this is incorrect, you have tag 1 and tag 2 both opened and then slash tag 1, so tag 1 is closed before tag 2 is closed. That's incorrect. The correct way to do this or to properly nest it, we would have tag 1 open and then tag 2 open and close tag 2 and close tag 1. Now, those are of course not actual HTML tags, they're just an example to show nesting more easily. Zombie Families. One of the important things about nesting is what we're going to call families. If element A is completely enclosed by element B, then A is said to be a child of B, and B is a parent of A. You can have children and grandchildren, and a lot of times, particularly when we get to CSS, we'll be talking about a lot about these relationships. But if one element encloses another, the first element is the parent and the enclosed element is the child. For instance, we have, zombies have no family, i, the italics tag, which we'll get to soon, is a child of the p tag. 4. Zombie Blocks of Content - Part 1: Hello and welcome back to Code Isn't as Scary as Zombies. Right now we're going to look at Zombie Blocks and Other Blocks of Content. First of all, we have paragraph tags, talked about those in the last section. All paragraphs should, surprisingly a little bit, be in paragraph tags. It's the most basic unit of text and 90 percent of the text is going to be in paragraph tags, though not all of it, of course,10 percent clearly is not going to be. But these can be styled with intended text, or to have a carriage return, or a line between the two, depending upon what you want to do with your site. Probably more typically on the web, it tends to be a blank line between paragraphs, but there are some exceptions to that. Another tag that we can talk about is the break tag. Now, most of the time, you don't want to hard wrap text, you want it to flow within its container because particularly with responsive design, you're not going to know exactly how wide or tall or whatever your container for the particular text is. If you do some hard returns, it is going to look funky if somebody looks on a screen that happens to be a different size than yours, which is almost certainly likely, because of the proliferation of devices that have different screen sizes, and desktops, and who knows what size the word is going to be on a desktop, etc. There are really times, however, when you need to format an address or similar piece of content where you don't want lines between them. For instance, if you've done a blank line between paragraphs, if you create another paragraph, it's going to continue to make blank lines between the things. That doesn't look great, particularly on an address or other types of content like that. What you can do then is use a break tag and rather than skipping a line, you can just go straight to the next line. Now, there are often times when we need to boldly go where no zombie resistance fighter has ever gone before, which in here is the bold tag. HTML's mostly structural, most aesthetics go with CSS, but you can also designate what should be bolded or strongly emphasized. For instance, we have the b tag, which is the bold tag, and this is what we had. It's about HTML4 when it came together it was with XHTML, and when HTML and XHTML came together, they wanted to be very strict about what tags they used. They brought in the strong tag, which is basically the bold tag, but labeled strong in theory gives you a little bit more information than just the letter b does about the content that's in there. But strong takes longer to type. I'm in the shorter typing is better camp. Eventually, they basically said that b and strong are equivalent and can you use them that way as you see fit. Both b and strong will make content bold. There's a similar struggle with with i, so i would be the italics tag. At one point they wanted to do something better, and so the came up with the em tag for emphasis, which doesn't really make sense to me because it's about the same cryptic level as i and can be confused with the CSS size unit, we'll get to there shortly. But yeah, it just doesn't seem like it really helps so eventually, they just made them the same as well, particularly HTML5. Both i and em tags will make content italic. All right. Let's look at some code. This paragraph, this shows you paragraph tags, italic tags, and bold tags. We have a p tag here, good ends with a closing p tag. Here we have an em tag. You can also do an i tag, here's an example. Here's the examples down here, not because zombies are not cuddly-wuddly. Surprisingly, they maybe. There's the italics. Rigor-mortis really affects your flexibility. You'd be surprised by that. There is a zombie on your head, that's bold or strong. This is a bold and then here we have an example of what not to do. This is basically both improper nesting and improper ending tags, so we have matched up the em tag and the i tag together, but they don't really, while they do the same thing, they don't necessarily interact properly. This slash i does not close this em, so that's why zombie is still italicized and this slash strong doesn't really includes the p tag, but that's harder to see because of that's where the page ends as well. But yeah, so that's the code there for paragraphs, italics, and bolding. 5. Zombie Blocks of Content - Part 2: Next, we need to talk about links. The a or anchor tag is what's used to create hyperlinks. Hrey attribute is what holds the destination URL, and the content or the link text is the text between the opening, and closing tags. Here we have an opening a tag, and then we have an href attribute linking to HTTPS comfort us forward slash forward slash undead dot Institute, which is my website for Zombie Themed Web Development Books. If you ever want to go deeper, and there's a place to go, then we have the link text, which is more Zombie Web Development, and the closing a tag. One thing you want to be careful about is absolute versus relative links. Once with an HTTP or HTTPS are usually absolute links, and as long as the page is working, the browser should get there. If you don't include the HTTP or HTTPS, these are relative links, and the browser assumes that they will be in the same folder path or on the same server as this current page. If you go to HTTPS colon forward slash forward slash google.com, it will go out to another Web page, get Google.com, and bring it back to you. If you just type in Google.com, it will look for a file named Google.com, which not quite as helpful generally. Let's do some more live coding. Here we have our a tag with href, undying love.org, undying love.[LAUGHTER] Sorry. We have some break tags just to break it up, and here we have an e-mail link. E-mail links work pretty similar to regular text links. But here you just start with a mail to, instead of it should be com forward slash forward slash, and that allows them, and somebody clicks on it, It will open up the default e-mail client on that computer. You can also set up telephone links. TL, and SMS links. Those last two particularly useful on phones that can also be used everywhere nowadays as well. That is how you do some links. Oftentimes when we're creating texts for the web, it's important to make it skimmable or make it easy for people to just skim through it. One of the best ways to do that is through headings, and subheadings. HTML starts with h1 through h6. It's important to avoid blank heading tags, just as anyone who is a sighted user will scan through a page with their eyes jumping from heading to heading to try to find the content they're looking for. Also screen reader users will scan with their ears, and jump between headings to try to find what they're looking for. Blank headings can particularly throw them off, even if they don't throw off sighted users that much. The headings, each one is generally going to be your largest heading, but usually holds the title of the page so you don't want to often use h1 unless you know it's not the title of the page.The next is h2, and you should begin to break your content out there h3, and keep going h4. More subheadings, h5. Often if you get here, usually have some content problems, you might want to look at that, and if you get h6, you almost definitely have some content problems. Here we have HTML headings. You can see as you go up in h's, h1 is the largest here, then h2,3,4,5,and 6 or PFC Wiggins must report to a random chipmunk apparently, and as you can see, h1 slash h1, h2 slash h2, etc. One last section we're going to cover here is about quotes. There are two different ways to [inaudible] tags you can use for quotes in HTML. Inline quotes, we end with a q. You can also actually use quotation marks. But if you happen to be in a culture that does not use quotation marks the way Americans tend to, for instance, French language, uses a different type of quotation mark. But if you're using a q tag it has two big benefits. One is that there's a cite attribute that can allow you to place a URL from where you got the quote from so that people can access that content, and it also allows you to postility, and style in quotes, particularly if you need the double arrow quotes or kill him at, I think it's called that are used in French. You can make those changes with CSS rather than having to rewrite the page or change the page, and there's also block quotes, which has its own tag of blockquote. Surprising enough, that's for very long quotes that are going to prevail against the stinky Zombies, of course, and by default it will set the quote off from other texts, indenting it, and giving some space above, and below it from the surrounding text, and you can also use the cite attribute on a block quote, but there's also cite element is that with a blockquote, first to creative work, and must include either the title, the author, or the URL of that work. That said, another web standards agency says you should never use the author Insight element use your best judgment, and finally, here we have two examples of quotes. Alice, and Zombie land using the site element, using the blockquote, and that's how you can play with quotes, and really start marking up the types of content within your website. 6. Listing the Undead's Weaknesses: All right, welcome back to Code Isn't as Scary as Zombies. Here we're talking about lists and listing the Undead's Weaknesses, and anything else you want to list. First, organizing zombies. So lists are a great way to continue to make your content more skimmable. They allow you to set some things off, as well as just make it easier for people to pull out the content that's important. HTML itself has three kinds of lists. There's an ordered list, and unordered list, and a description, or form of the definition list. All of them are made up of two or more elements. Description list is made up of three while ordered and unordered are made up of two separate elements. For instance, if we're doing an ordered list, we start with an ol. Then we have our first list item, our second list item, third, however many we have, and finally, we end with a closing ol. With order list, you can actually change the numerals used, decimals are the default, but you can also do lowercase alphabetic like a, b, c, d. You can do roman numerals, i, ii, iii, iv, etc. You can also do capitalize versions of those. So a capital A for the type is a capital alphabetic, and capital I is capital roman numerals. You also change the start of the numbers by using the start attribute, and just setting that to whatever number value the list starts with. To start the list at seven, you'd just have start equals quotation marks seven. You can also do unordered lists, and they are very similar to ordered list except they use an ul instead of an ol, but they still both use the same li. For instance, we start with a ul here, we have our li item, just like we do with an ol, and we have as many of those as we need, and then we close it with a ul. Description lists are a little bit different. They have a list of terms and descriptions, so you will have a two different things that you're listening. Prior to HTML 5, it was called the definition list, but they changed it to a description list to widen its scope and you use it for more things. The outer element is dl for description list, the designated term or the element for the term is dt, and the element for the description is dd. It works similarly. We start with a dl, we have a dt ,we have a dd for whatever the description should be. Then we can do another dt, dd, dt, dd, etc and then close off with our closing dl. Let's take a look how this would work. First of all, we'll look at ol's. So here again, we have our ol, we have our li's. If we wanted to say start with seven, we can do that. Should be in quotation marks that might also work without them, so you can see it starts with seven there. I could also do type equals i, and you can see I'm starting at seven and it starts with the seventh roman numeral, or right there. So we have the ol and we have a start and type, you can play with that. Next, we have our unordered list, which has again a ul and li. You can also change the ul type. For instance, I can put in a square and it makes square ones. Disk is the normal bullet, and you can change that as needed. Moving on to definition lists or description lists, so we have here again, our dl, dt of a walker, dd of the zombie still walk, shuffle. If crawler, its definition or description and of course PFC Wiggins, our intrepid friend, and that's about it for lists. 7. A Picture's Worth a Thousand Moans: One of the things you probably going to want to put in your articles and such are images. First of all, images are added using the HTML image tag. It's a void tag so there's no closing tag. You'd use the source attribute to tell the browser where to load the image from. Then there's also Alt attribute which is used to give a description of the content, is particularly great for screen readers and search engines because they just can't access the content of the image otherwise. But it is important that you add all text to help make it accessible to anyone who has low or no vision. You've got your image tag, your source attribute, in this case is zombie.png. If it were in a different folder, you would start with whatever that folder is or the path to that folder, then zombie.png. But if it's in the same folder, then you can just use that. You can also pull something in from elsewhere using the full URL if you had that as well, the alt text is just going to be text about the image. In this case a lone zombie search for his horde. It's also important to know that you don't want to say like image of or graphic of because that's already inherent in that it's an image. A screen reader is going to say that is an image before it reads the all text. You do a lot of things with size on images. There's height and width attributes that you can set to determine what the size should be. It is generally better to do it in CSS, which we'll get to eventually, but you can do it in your HTML as well. If you try to make an image larger, using the height width attribute, you're going to degrade the quality because you're spreading the information over a larger area. It's like if you have a given resistance, so for these zombies and you spread them too thin or against the zombie horde, they're not going to be as effective. They're not going to do as well because they're spread too thin. You can make the image smaller and we'll leave the quality intact. The problem is still going to be the same file size. If you have 10 meg image and you shrink it down so it's only like a 100 pixels by a 100 pixels, it's going to look really small, but it's still going to take the whole 10 megs to download to look right. It's often best to have the exact height and width of the image that you're using in order to prevent over downloads or lower quality. If you change the height and width just at random, without preserving the aspect ratio or without doing it so proportionately, it's going to squash or stretch the image, and it just doesn't look good. Unless it's a zombie, then you can squash and stretch them all you want. As I said before, ideally, the image should be its natural size to get the best balance between smallest file size and best quality. So let's talk about the different types of images you can use on web sites. First of all, there's GIF, it stands for Graphic Interchange Format. I pronounce it GIF. A lot of people on the internet would say that I'm wrong, but I would say that it's not jraphic. So it's not JIF it's GIF, but it's up to you, on which side you want to fall in that fight. GIFs work in all browsers. They allow animation, which is one of the reasons why they're still around. A lot of the animations you see on the web are often in GIF particularly up until recently. Though there's a lot of new stuff going on with CSS and animation that allows those to be done natively as opposed to just in GIFs. GIFs also allow for transparency, which is helpful, but the transparency isn't always as good. Sometimes it's a little crunchy or shows more of the edge then you want to. It is a lossy format, meaning that when you save as GIFs, you're losing information. So it's not keeping all the information. So you're degrading quality a little bit. But the benefit you're getting is that you get a smaller file size, which takes less time to download. So it's balanced between high-quality or quality of image and size of image. GIF works particularly well with large swatches of color, such as logos or line art. JPEG stands for Joint Photographic Experts Group. It works in all browsers, does not allow for animation, has no transparency allowed for it. It is also a lossy compression. But it is super great for photographs and does a much better job of compressing them than a GIF does, and so it really shines in photographs and other complex imagery. PNG, stands for Portable Network Graphics. It is the newest of the standards, but still works and just about all browsers. You have to go pretty far back to find a browser that doesn't work in. It doesn't allow animation, but it does allow high-quality transparency. If you ever need transparency behind an image, you want to use a PNG. It is a lossless compression, at least at the PNG-24, the PNG-8 lossy. What's great about that is that you are keeping all of the information there. You just compressing it into a smaller box as opposed to getting rid of some of the information so that it fits in smaller boxes so to speak. [inaudible] algorithms are particularly good on the same thing that GIFs are good on. Things with large swaths of color, logos, line art, those things, but it can be used on anything. SVG is probably the newest of these standards, or at least the ones that want to be standardized. Stands for Scalable Vector Graphics. It works natively in most browsers, but you can also use it within an image tag, in older browsers, so it still works there as well. You can also use it as an unchecked in more modern browsers, but natively sometimes has embedded benefits like access to CSS and things like that. It supports animation and animation via CSS. It also supports transparency, and it scales up and down without any loss in quality. SVG graphics are what's called vector. They're similarly again, more line art and logo things. But you can scale them up and down without any loss of quality because they are based on math rather than on pixels. Generally a very small file size, it uses tags much like HTML, which is when I was talking about it being native. I'm talking about using the tags directly in your HTML as opposed to importing an SVG file through an image tag or something like that. Again, best with line art, logos, icons, those things. Now there is another tag that we sometimes use for images, not directly for images, but usually surrounding images. It's called the figure tag. It's mainly a container element for graphics, tables, charts, all those things. It should be self-contained, but relate to the main content. I mean, this is particularly what you would see with different papers and things where you would have a figure that supports the data or shows the data or supports the conclusions, et cetera. The figure element allows for that. It's best used for descriptive information, supports the text around it. Another element, fig caption, allows you to add a caption to the figure. Here's a live image tag. So we have image, we have our source. This is where we finding it from. We have are all text. If we wanted to put this in a figure, we would just add the figure tag, closing it with the figure. Then if we wanted to say, add a caption, we can do old Zombie in a top hat, and then we have a figure. Let's move on to the next video. 8. Dressing Zombies in Cascading Style Sheets: Now we get to CSS. CSS stands for Cascading Style Sheets. In our Zombie [inaudible] HTML is going to be the skeleton and CSS is the flesh and clothes. HTML is the structure and CSS is the look and feel, its colors, its fonts, it's how things are presented. It styles text, provide for aesthetic changes. It cascades through the documents. Cascading Style Sheets allowing child elements to inherit some of the properties of their parent elements, so you can inherit colors and sizes, and some of those things. CSS comes in a list of rules. A rule consists of a selector and a declaration block. Selectors choose which elements the declarations apply to and the declaration blocks lay out the changes or talk about what should happen. For instance, this is not a real CSS selector, but this is what it will look like. You have first your selector, then you have an opening curly bracket, then you have the declaration, and then a value, and then a closing curly bracket. The colon and the semicolon are important, so make sure you include those. Let's talk more about selecting. Selectors come in three main flavors. You have classes, IDs, elements. You can combine these to create what's called a descendant selectors. These are descendants in the same way that a child is the child or descendant of a parent element. For classes, you're going to use a class attribute, for HTML elements, and in CSS you need to have a period in front of it, e.g period zombie-school. ID's; you're going to use the ID attribute and only appears once per page and in CSS, you need a hashtag in front of them. Hashtag unique-zombie. CSS declarations usually are keyword or value pair separated by colon and use a semicolon to designate the end. You can have multiple declarations per rule and curly brackets wrap the declaration block to show the beginning and end of the block. For instance, with the p tag, we can set the color to yellow-green and then this will change all the paragraph text to an eye-searing sickly yellow-green. Here we have some HTML on the sides, we've just paragraph tags. The next one has a class. It's class is, hoity-toity and then ID, which is unique. For instance, here we have color of light blue for the paragraph. If we change that to say red, it should update down here. The color is red, hoity-toity is selecting the middle one. If we change that to just regular green, goes that. The reason it went red for a little bit before turning green was that a p-tag also applies to the hoity-toity, p-tag, but hoity-toity being a class is going to actually override the p-tag because it's more specific because it's not every p tag. It's only those that have a class of hoity-toity and then if we change, say the unique and add it. Let's change it to blue, then it becomes blue down there. How do we then put CSS and HTML together? There are four ways to do it. Style attribute, style tag, which are the main two that we'll talk about and then there's an external style sheet and importing a style sheet. Again, these are more complex than we really need. We'll talk about the first two. The style attribute goes on any HTML element. It looks similar to a class or other attributes that we've talked about. You only need the declaration, since you're already on the specific element where we're selecting that element so you don't need a selector, just the declaration. The upside is that you can be very specific in how you apply rules. The downside is if you set this on a number of elements, say changing all of the paragraph texts to blue, but then your boss wants to change it to red or you need to change something later on, then you have to edit each and every one of them. To see what the style attribute actually looks like, here we have it, sort of the p-tag, we have a style attribute with a color green and the paragraph will have green text. Elemental style; there's a style element which is part of HTML element, just style and you can put CSS between the opening and closing style tags. In this, you can set all paragraphs to blue and then if you change that, it will change everywhere. With the style tag, the p, since we have a selector, will apply to all paragraph tags within this particular page and we can change the color to purple or red or whatever we want to change it to just by changing this one place rather than going to each style attribute and changing them there. There are a couple of caveats here. Use your new powers wisely. Brand colors and fonts are there for a reason to create consistency across many pages. If you go against them, do so at your peril. It's not my fault. You are making that choice. I'm just telling you how to do it when it makes sense to do it. Use your new powers wisely. If you try to do a new design and look and feel per page, that's really the wise choice that can confuse users. There are times when you want to do this, might be for instance, if you have a figure that you wanted to then style a little bit differently than the rest of the site that might make sense to do that. Consistency is really important. It helps users know that they're on the same site, that they are dealing with the same institution and if you constantly change fonts or constantly changed colors it's not going to make any sense and they're going to leave. They're going to go to a different site. There are times when you can and should go against brand colors and fonts. They are rare and if you do so, you should have a really good reason to do so. It should be reasons like the way that you were showing the content needed to have a different font and color, so you could provide contrast to the brand, fonts and colors or something like that. It should be a really good reason and it should be one that you can articulate. Again, go against brand, colors and fonts at your peril. All that said though, be creative and push the boundaries. The web is a place to play and have fun and if we don't keep pushing the boundaries, we'll never know what we can do. 9. Fonting it up with Zombies: Okay. Let's talk about fonts. You can use any font you want for your web page. It'll look great on your computer, but if other people don't have it, it's going to look like undead puke. Also you need to be careful that changing the font without a good reason will increase the horror, it's not a good idea to do unless you know what you're doing or are changing it from something else to the desired font type that's used elsewhere. Since fonts aren't available on all systems, you should typically choose several fonts that will look similar if one isn't available. For instance, here I have a content class and the rule of font-family is that choosing which font we want to use. The first one that will be available is Helvetica or that we would hope would be available is Helvetica. If that's not available, then I'm going to go with Verdana, and if that's not available then, you can also change the font size. You can use a couple different types of units, pixels, percentages, ems, and even a couple of more. I tend to prefer ems because they're relative unit. One em is equal to the default font size, typically there're 16 pixels. Em's are relative units, which means that the child tags will inherit their parents font size, and the parent's font size becomes the child's new default font size. Their one em is based upon the parent's font-size. For instance, if a parent's font size is set to two em, and the child is also set to two em, if we assume 16 pixels is the base, then the parents font-size will be 32 pixels, but the child's font size will be 64 pixels because it's building two times the default size from its parent. The benefit here is that things get bigger and smaller proportionately. If for instance, a user decides to change their default font size from 16 pixels to 24 pixels, or even if they go down from 16 pixels to 10 pixels or something like that, then all of the font-sizes are going to change accordingly. If we went down to 10 pixels for instance, the parent's font-size would then be 20 pixels, and the child's font-size would then be 40 pixels. They're still going to stay proportionate to what was originally set. If you set them with specific pixel numbers, they wouldn't change, and that's not really good for the user because sometimes designers can make things very small, which can be hard to read. Here is an example of a change of font-size. In this case, we are changing the font-size to 1.25 em, so we're upping a little bit to about 20 pixels, assuming 16 pixels was the default. Here we have the pixel version, font-size of 20 pixels, and you can also use percentages, font-size of a 125 percent. Font weights. You're probably familiar with bold, a heavier weight, than the normal font. But there's quite a few other weights that you can use. Fonts come in many sizes and thicknesses. Font-weight property allows you to change this. You can go from 100-900, increments of a 100, 400 is normal and 700 is bold. Most fonts do not have all nine weights. I would say it's a rare number of fonts that have all nine. Most will have at least 400 and 700, but there may be sometimes you'll have a light and some of those things. You are also able to use the keywords normal and bold to also set them without having to remember the 400 and 700 thing. What's the zombie-weigh? Here we have content font-weight bold, you can also set the font-weight to normal, and the equivalent in numbers. Here we have font weight sent 100, and then finally to 400. Styling. Font-style is how you italicize or unitalicize content from CSS. We just font-style italic sets the font style to italic, and normal sets it back to normal. By default, as I'm sure you've seen, links are underlined in blue. Sometimes you'll want to remove the underline or even add it back. That is used text-decoration. Text-decoration, none were removed. The underline text or creation of underline will add it back. You can also change the color of the font, and like changing the font family, you also want to make sure that you use this wisely and choose colors that are pleasing to the eye, and not the sickly yellow green that you're probably going to see me choose here. There are a lot of ways to set color in CSS. We can use keywords as we saw in the last chapter, like blue and green, peach, puff, etc. There's also a hexadecimal notation which looks something like this. I don't even know what color that is. Don't worry. You don't have to know. But if you know that this is a color, the hashtag before it shows you that it's a color, then you can get whatever color you want and a graphics program then copy that hexadecimal value into your HTML in order to change the color. While the keywords are helpful, they don't have nearly as many colors as the hexadecimal numbers allow for, and again as I said, any graphics program should be able to help you get the hexadecimal value that you can then just plug in. Here's an example of setting the color to yellow green, here's another example using the hexadecimal notation. Notice that the hashtag is there, and is required for doing hexadecimal numbers. Let's take a look at some code. Here I just have a little paragraph that I've added a whole bunch of different things to. Here we have the font family, zombie killer being a font that does not actually exist. It's not going to find it. So since a raleway does exist on my computer, it's going to show me this in raleway. If raleway do not exist as it may not on your computer, it'll choose helvetica, and if helvetica is not available, then it'll choose some san-serif font, probably ariel, but it really depends on your computer and what you're doing. Here we have to make it bold. So I made this little thing bold to just set the font a bit bold, skinny text here, Zombie. If you do not have raleway on your computer, you're not going to see this get in your text, because raleway is a font that happens to have multiple versions or multiple weights. So I was able to then show this as the zombie weight. Next we have normal text. So the font weight is normal, insanely large text is this little guy thing. I'm changing it to six em. You can also change things to very small. So in this case, I changed the word website to just six pixels or actually yes, I'm sorry. This ensures that we have raleway. So you should still see raleway on your computer even if you don't have it because of the way that I set this up. Getting back to font-style, so italic, so I set this whole thing to italic, and then in the middle here I have just this word zombie that I'm making boring. So I'm changing the font style and normal, and it is no longer italicized. All right. That's it for this section. Let's head on to the next. 10. Boxing the Undead: The CSS Box Model: The next thing we're going to talk about is the CSS Box Model. CSS box model determines how elements are laid out, how they interact with each other. It looks something like this. You have margin all around the edges. You have a border, inside that you have padding and then in the very center is content. In general, in the box model, the width is equal to the width of the content, not the width of the border, as is more typically thought. There is a way to change this using what's called border-box to bid beyond this course. The width of the content is usually the width of it and then you can add padding and border and margin to start push things around and add spacing, et cetera. All right, so width sets the width or the element default to the content width. Height sets the height of the element. Padding is the space between the content and its outer edge. Border is the edge of the element. Margin is the space between elements and you can also use em's for these values too. You don't have to just use pixels or percentages or whatever. You can use em's as well. Boxing out the zombie. Margin and Padding can each have values set, one value to set all sides such as we're doing here. Some margin of two em is going to put, assuming 16 pixels is the base, 32 pixels around every side of content and then another 16 pixels of padding will be available there as well. You also set asides individually using something called TRouBLe notation so that capital T, capital R, capital E, capital L is important. It's the order that you set the sides in. Top-right, bottom-left, TRouBLe, it's the word TRouBLe is how I remember top-right, bottom-left because they are in the same order in the word TRrouBLe. Margin, we're setting a one em on the top, 16 pixels on the right, zero pixels on the bottom, and 5 percent on the left and the padding we're setting 20 pixels on the top, zero on the right, 10 percent on the bottom, and two em on the left. Borders require three values to be set. First is the border width. How wide the border is usually in pixels, em's, percentages, any of those units. Border style, this is usually solid, dashed, dotted, all those types of things and there's more styles available as well. Nine times out of ten, I use solid and not to actually doubt it, but it's available to you if you need to use it. Also the Border color, the color you want the border to be. You can use keywords, hexadecimal, et cetera. Here's an example. We have border with a colon and then the width is one pixel. Solid is the style and hashtag 47D2F3 is the cover. A lot of times if you want to add an image to a set of texts, it often sticks out. Even in zombie horde, see clearly what's called floating it. You can float it left to right, to center the left edge to the right edge of the element. As you can see here, the top image is floated left and the bottom image is floated right. When you're doing this, you can use the margin or padding to add spacing around it so that the text doesn't run up directly against the image. Here we have float right. It's just float colon, right. Margin, we're setting five pixels on the top, zero on the right, five pixels on the bottom, and five pixel on the left. We're doing this zero pixels on the right so that it can be flush to the right edge of the content rather than sort of sticking in five pixels. We don't want the text to be right up against the image so we are pushing it out to five pixels. Similarly, with a left margin of five pixels on the top, five on the right, five on the bottom, zero on the left, again, so that we can put it flush left as we floated left, and five pixels everywhere else to prevent the text from directly going against it. You also do backgrounds. Change the background-color of an element with background color property. Something background colored red. If you do this on an element of tape contains text, make sure you add some padding so that the color is not directly on the edge of the text. One important thing to note, one of the big differences between padding and margin is that the background color of an element will show through padding, but not margin. All right, here we have a wide variety of different ways to do padding. We have a pillow padding, personal space, personal space on the subway individually, group right wall. We'll look at these directly. First we have like a pillow is this element right here. We have a padding of two em all around, and I call it the background register. It was easy to see as we have human padding, which I gave. Padding on the top was zero, padding on the right was one em, padding on the bottom was 12.375 em Maybe your padding is different, but in padding on the left was also one em. Here we have padding with basically none on the top and a whole bunch of on the bottom. Then, we have personal space where we want to make as much personal space as possible. We will find the margin, but as you can see here, there's no padding so the text runs right up to the edge of the element, which doesn't look very good and it's hard to read. Then if you're by the subway or the metro or whatever, you have almost no personal space, so you have a little bit above your head, maybe a little bit to your right. You're sitting on a seat, so there's no margin there. Maybe a little bit to your left and so that's sort of where this margin is. Here we have human padding. It's the same as above. It's just using one declaration to set all the rules. Personal space on the subway, same thing here, same numbers as above, but being used in one declaration. You can also have with borders. You can have individually set. You have border of one pixel, solid border color of green, and there it is, top-left green. One note is this line here is from this HR element, which means horizontal rule as an HTML element that you can use to separate things if need be. Next, we have grouped. The border is grouped here with one pixel solid, and, blue. Then, the right wall, we have a border just on the right, 50 pixels, solid and black. That is another way to do borders, et cetera. On to the next one. 11. Punching Code from Word in its Zombie Face: Sometimes when you're working and you've built your content in Word, a perfectly normal way to build code, Word tries to be helpful and include the exact font you're using, exact spacing you're using, and all those cruft that you really don't care about. You just want it to just have your content, maybe with the bolding and italics and those things intact, there's a couple of ways that you can go about fixing this. At one point I got this crazy text. I don't even know where to start with a lot of this. It's just weird. One of the best things you can do is put it in a code editor. In this case, I've put it in here into CodePen. But you can use any color coding editor you want. That actually gives you a lot of information or helps really clarify what's going on. Now you can see that all of this is just from a span tag and there's a bold italics underlined section here, for no reason, it seems. There's a lot of weird stuff going on here. Now that you can see the color coding, of course, you can just delete the span tag. Don't forget to delete the other span or the opposing span. A lot of this content, actually, we don't even need because it is just for this guy here is what's called a non-breaking space. It's equivalent to just a space, but has the benefit of not breaking line. Sometimes it's used as a place holder for things. But there we have space and we can actually just delete this whole section here. There we go. Now we have just the code that we wanted and not of all the craziness. That's one great way to do it. There are some content management systems that are better at removing this than others. Sometimes in Drupal they would have a paste from Word that will remove a lot of that cruft that you don't want while leaving the content that you do and the styling that you do. Another way to get rid of it is to paste it as plain text, so copy the content into a plain text editor. That should generally remove all formatting, which is not always ideal. That's another way to do it. Also, if you have a copy of WordPress handy, WordPress tends to do a pretty good job of removing a lot of that cruft and excess code while leaving the stuff that you want to keep if you paste it into the visual editor. That is another great way to get around it. Maybe if you are using WordPress on one side and Drupal another something you can always paste it into WordPress, then copy from there and paste into the other application or the other thing that you're doing. There's a lot of different ways to get around it, but putting it in a code editor that color codes is probably the best way to keep the content that you want and get rid of the stuff that you don't. 12. Pulling Out the “Brains”: Pull Quotes: So something you might want to do is create some pull quotes, and I think you have enough tools now to be able to do that. So what we're going to do is I'm going to take a quote from this particular piece which is an old story by Lloyd Arthur Eshbach about zombies, and I'm just going to pull a few words out and create a pull quote. So I found the content that I want to pull out. It's this little section here, "Out of the winding-sheet of fog into the moonlight crept a strange, strange craft." All right, so I'm going to copy it, and then I'm going to paste it again. Actually, what I want to do is I want to move a little bit further down, I'm going to add blockquote, class equals good class with pull quote, and I'm going to go ahead and close that blockquote just so I don't forget to do it. I can see that I mistyped something there. Then I'm going to add that again here. So if we scroll down, we should see here is that section again as a separate quote. So now I'm going to go to my CSS, and I'm going to do first of all, put the class in, and add some content here. So a couple of things I want to do here. I want to set a width of say 200 pixels, and maybe that's a little bit small. Let's try 300 pixels, and I want to up the size, that it stands out. So I'm going to font size of two em so it's a bit bigger. That's maybe too much. Let's go down to say 1.5. Still a little big. Let's do 1.25. All right, so it's still a little bit bigger, but not quite crazy large. I'm going to float it right. As you can see there, scroll down a little bit so we can continue seeing it. I'm going to add a border just on the left-hand side. Let's say five pixels. How about about red and solid. That is way too close to the text itself, so we want to do some padding, rather. Let me just do padding on the left, and I don't know, maybe one em. Let's see what that looks like. That's probably good. It turns out this red is a little bit lighter than I want, so I'm going to color I picked out a little bit earlier. I'm just going to change to that color. It's more of a deep red which I think fits in better with what we're looking at here. Now, I only added padding to the left, but I think it might be nice if we add a padding to all sides, and what is going to help with that, it's going to make the border pop out a little bit higher as well. So I just change the padding to one em and the border is out a little bit more. You know what? I think I want to do one em, so on the top and bottom, I think I want to do.5 em, and then on the left and right, I'll do a single em, and that will then put it like that. We can also change maybe the color here, maybe we'll gray it a little bit. So let's do As to make it pull out a little bit, and there we have a pull quote. We can also maybe move this up a little bit which I think might be a good idea. So I'm just going to cut it and paste it up, and be up in this previous. So another thing we have to think about is that with blockquote comes some default styles. So if we're having too much space around it, which I feel we are, we can remove some margin and make sure that we're not having too much on the top and bottom. But what that did do was that it brought this information right here too close, in my opinion, to the border. So let's give it a little bit more margin. Instead of zero, let's do 0.5 em. It's not quite enough. Let's do one em. There we go. There's a little bit more spacing. I think also as we make this smaller, it'll look a little bit better because we have text that's not continuing here. Yeah, I think I moved that up a little too far. Let's see what it looks like if I put it in right in there. All right, yeah. That looks pretty good, and there you have your pull quote. You're going to certainly do variations on it. We could add a background color to say very dark red, say like this. Maybe that's a little too dark. Let's up it to say like that. It's too bright. There's about right. So we can do some place with some things like that, we can make the border quite a bit larger if we wanted. Think about just how we wanted the thing to look and how we wanted it to interact with the other content. If we're using that background color, I think I'm going to change the color of the text back to white. Maybe too much. Let's try something a little bit off-white so I think a little bit less pronounced. But yeah, there you have it. You can play with your blockquotes and just add them on your own without needing to hire a designer or do anything more than just add a little bit of text and a little bit of CSS. 13. Thanks for the Memories: Well, we've had some good times together. You learned some HTML, some CSS. You've learned what a tag is, an element. Rules and declarations. [inaudible] But now I must say goodbye. Thank you for watching my course. I hope you learned a lot and can apply it throughout your life. Don't forget to include your directory projects, and put them up so that I can see them, so that other students can see them and just show what you've learned. Thank you again for taking this course. I hope you were able to kill some zombies and have some fun along the way. See you next time.