` tag, stick in the following: <style> body { } h1 { } p { } ol { } </style> Congratulations. You have some empty CSS. Now, what the heck is CSS anyway? Well, CSS stands for _Cascading Style Sheets_. Gee whiz, that word _style_ is everywhere. And it's true. The `style` attribute is for styling _inline_ HTML (just that line of code), the `<style>` tag is for holding CSS, and CSS _defines_ the styles! Let that sink in. Nice. Stylish. Just like you. Now, you'll notice some familiar keywords in there, in particular, `body`, `h1`, `p`, and `ol`. That's right, they're the tags we know and love! But, in CSS, these are called _selectors_. The selector tells us what tag you're about to style. So, whatever code you put in between the curly braces `{}` after the `body` selector will affect everything in the `<body>` tags. Whatever you put in the braces after the `p` selector will affect what's in the `<p>` tags. Whatever code you have in those curly braces will only affect that tag, so if you try editing the font colors for the `h1` selector, it won't affect whatever is in the `p` selector's tags. Each portion of code `selector { code }` in CSS is called a _declaration_. Make sense? Good. If not, keep reading and hopefully it will become more clear as we go on. The code that we're going to be putting in each declaration is the same syntax as the code that we normally put in the `style` attribute. How convenient. So, change your code above to the following: <style> body { font-family: Arial; } h1 { color: red; text-align: center; } p { font-weight: bolder; } img { width: 400px; border: 5px solid #333333; } ol { color: #333333; } </style> Recognize that? It's exactly the same! For each selector, there is a _property_ of that selector, and each property has a _value_, just like how we wrote it in the `style` attributes! You will always have your CSS in the syntax, `selector { property: value; property: value; }`. I've only shown you some properties so far, but don't worry. There are plenty more to come. Try playing around with the CSS we have right now. Edit the colors, add some borders, change the font styles. Don't forget your semicolons! ###Classes and IDs and other Segregation So, you have some of the CSS basics down already. You're so smart. It's really a simple language, once you know the basic syntax. So, now we'll get into more fancy stuff. What if you want to edit several tags differently? #### Classes Let's say that we have 8 `<p>` tags on our HTML page (hint: open style3.html in the **3 - Styles** folder). If we want to style each of these tags differently, we can use _classes_. A class is actually an HTML attribute that you can name whatever you want. Check out style3.html to see the classes I added to the `<p>` tags on the page. When you add a class, the user doesn't see it. But, you can style specific classes to do what you want, instead of having all `<p>` tags be the same. How about we style one of the classes specifically? It's simple. Just take the class name you made up (I'll use the `poemtitle` class for my example) and add a period `.` in front of it to select it in CSS, like so: .poemtitle { } And there you have it! Even though you might have different styles for your paragraphs, you can style the ones of class `poemtitle` individually. For this example, let's make all paragraphs with the font family Arial, the `poemtitle`s font weight `bolder`, the `author`s the color `#555555`, and the `poem`s in `italic`. Try doing it on your own if you can (just put your code in the given `<style>` tags), but you're welcome to cheat: p { font-family: Arial; } .poemtitle { font-weight: bolder; } .author { color: #555555; } .poem { font-style: italic; } Gosh you're good at this. Go eat a cookie. [Pausing here for cookie break] #### IDs Now, let's talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the `id` attribute like so: <p id="special">This is so special that I want it uniquely styled forever.</p> When you want to style your IDs, you put a hashtag `#` before it in your CSS, like so: #special { } Remember: You can only use an ID once. IDs are more helpful when you're controlling the element with JavaScript, not styling, but that's something for another day. #### Other Segregation Let's say that you want to separate individual text in your paragraphs or sections on your page. Let's introduce 2 new tags: `<span>` and `<div>`. ##### The `<span>` tag The `<span>` tag is pretty invisible unless you style it. It's used to group _inline-elements_ (so like a word in a paragraph), and it doesn't actually do anything unless you style or manipulate it with something else. So, let's say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes `<span>`. For example: <p>"My grandmother started walking <span>five miles a day</span> when she was sixty. She's ninety-seven now, and <span>we don't know where the heck she is.</span>" </p> <p>~ Ellen DeGeneres </p> In the above quote, you might want to style the `<span>` tags differently than the rest of the paragraph. Maybe you want those words bold, or italics, or in red. Now you can. Add some `<span>` tags around your favorite lines of the poems in style3.html of the **3 - Styles** folder. Then, put the following CSS in your `<style>` tags: p span { font-style: italic; } Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell you. This is called _nesting_ CSS. When you have a space in your selector like this, it means that, in this case, the style will only affect `<span>` tags within `<p>` tags. So, if you put `<span>` tags around a word in your `<h1>` tags, your CSS will not affect it. You can still have a plain `span` selector, or nest it in one of your classes too: span { font-weight: bold; } .author span { color: #999999; } Make sense? I hope so. To sum up: `<span>` tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next. ##### The `<div>` tag Alrighty. Go enjoy a beach vacation and then come back to this. Welcome back. The `<div>` tag is very similar to the `<span>` tag, in that it separates a section of something but doesn't do much else. However, the difference with `<div>` tags is that they are _block level_ elements, not just within a line of text. The `<div>` tag might end up being the tag that you use most often. It is what lets you easily make website layouts (with help from CSS of course), and so, let's play with it! Open up the **5 - Layout** folder, and use your editor to open `homepage.html`. <!doctype html> <html> <head> <title> My Website

` tag - Background color - Floating - Positioning - Margins and Padding - Z-Index - The `` Tag, Comments, and other Developer Joys - The `` tag - Commenting - HTML Comments - CSS Comments - Other Developer Joys - Forms - HTML5 and CSS3 - How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...) - Final Project! - And now, the end is near ## CSS is magical, and now you're gonna learn it. So far, we've been making things pretty the wrong way. So, we're going to learn it the right way. So excited. Right now, I'm going to show you how to write CSS just straight in your HTML documents. That's still kind of wrong, but it'll give you the basics. After that, we'll move into the big leagues and have separate files for everything. Pumped. Open up your **3 - Styles** folder again and open style2.html in your favorite editor. This site is pretty barebones. Let's take out the barebones part and just make it pretty. We're going to be working in the `` tag again. Underneath the `` tag, stick in the following: <style> body { } h1 { } p { } ol { } </style> Congratulations. You have some empty CSS. Now, what the heck is CSS anyway? Well, CSS stands for _Cascading Style Sheets_. Gee whiz, that word _style_ is everywhere. And it's true. The `style` attribute is for styling _inline_ HTML (just that line of code), the `<style>` tag is for holding CSS, and CSS _defines_ the styles! Let that sink in. Nice. Stylish. Just like you. Now, you'll notice some familiar keywords in there, in particular, `body`, `h1`, `p`, and `ol`. That's right, they're the tags we know and love! But, in CSS, these are called _selectors_. The selector tells us what tag you're about to style. So, whatever code you put in between the curly braces `{}` after the `body` selector will affect everything in the `<body>` tags. Whatever you put in the braces after the `p` selector will affect what's in the `<p>` tags. Whatever code you have in those curly braces will only affect that tag, so if you try editing the font colors for the `h1` selector, it won't affect whatever is in the `p` selector's tags. Each portion of code `selector { code }` in CSS is called a _declaration_. Make sense? Good. If not, keep reading and hopefully it will become more clear as we go on. The code that we're going to be putting in each declaration is the same syntax as the code that we normally put in the `style` attribute. How convenient. So, change your code above to the following: <style> body { font-family: Arial; } h1 { color: red; text-align: center; } p { font-weight: bolder; } img { width: 400px; border: 5px solid #333333; } ol { color: #333333; } </style> Recognize that? It's exactly the same! For each selector, there is a _property_ of that selector, and each property has a _value_, just like how we wrote it in the `style` attributes! You will always have your CSS in the syntax, `selector { property: value; property: value; }`. I've only shown you some properties so far, but don't worry. There are plenty more to come. Try playing around with the CSS we have right now. Edit the colors, add some borders, change the font styles. Don't forget your semicolons! ###Classes and IDs and other Segregation So, you have some of the CSS basics down already. You're so smart. It's really a simple language, once you know the basic syntax. So, now we'll get into more fancy stuff. What if you want to edit several tags differently? #### Classes Let's say that we have 8 `<p>` tags on our HTML page (hint: open style3.html in the **3 - Styles** folder). If we want to style each of these tags differently, we can use _classes_. A class is actually an HTML attribute that you can name whatever you want. Check out style3.html to see the classes I added to the `<p>` tags on the page. When you add a class, the user doesn't see it. But, you can style specific classes to do what you want, instead of having all `<p>` tags be the same. How about we style one of the classes specifically? It's simple. Just take the class name you made up (I'll use the `poemtitle` class for my example) and add a period `.` in front of it to select it in CSS, like so: .poemtitle { } And there you have it! Even though you might have different styles for your paragraphs, you can style the ones of class `poemtitle` individually. For this example, let's make all paragraphs with the font family Arial, the `poemtitle`s font weight `bolder`, the `author`s the color `#555555`, and the `poem`s in `italic`. Try doing it on your own if you can (just put your code in the given `<style>` tags), but you're welcome to cheat: p { font-family: Arial; } .poemtitle { font-weight: bolder; } .author { color: #555555; } .poem { font-style: italic; } Gosh you're good at this. Go eat a cookie. [Pausing here for cookie break] #### IDs Now, let's talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the `id` attribute like so: <p id="special">This is so special that I want it uniquely styled forever.</p> When you want to style your IDs, you put a hashtag `#` before it in your CSS, like so: #special { } Remember: You can only use an ID once. IDs are more helpful when you're controlling the element with JavaScript, not styling, but that's something for another day. #### Other Segregation Let's say that you want to separate individual text in your paragraphs or sections on your page. Let's introduce 2 new tags: `<span>` and `<div>`. ##### The `<span>` tag The `<span>` tag is pretty invisible unless you style it. It's used to group _inline-elements_ (so like a word in a paragraph), and it doesn't actually do anything unless you style or manipulate it with something else. So, let's say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes `<span>`. For example: <p>"My grandmother started walking <span>five miles a day</span> when she was sixty. She's ninety-seven now, and <span>we don't know where the heck she is.</span>" </p> <p>~ Ellen DeGeneres </p> In the above quote, you might want to style the `<span>` tags differently than the rest of the paragraph. Maybe you want those words bold, or italics, or in red. Now you can. Add some `<span>` tags around your favorite lines of the poems in style3.html of the **3 - Styles** folder. Then, put the following CSS in your `<style>` tags: p span { font-style: italic; } Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell you. This is called _nesting_ CSS. When you have a space in your selector like this, it means that, in this case, the style will only affect `<span>` tags within `<p>` tags. So, if you put `<span>` tags around a word in your `<h1>` tags, your CSS will not affect it. You can still have a plain `span` selector, or nest it in one of your classes too: span { font-weight: bold; } .author span { color: #999999; } Make sense? I hope so. To sum up: `<span>` tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next. ##### The `<div>` tag Alrighty. Go enjoy a beach vacation and then come back to this. Welcome back. The `<div>` tag is very similar to the `<span>` tag, in that it separates a section of something but doesn't do much else. However, the difference with `<div>` tags is that they are _block level_ elements, not just within a line of text. The `<div>` tag might end up being the tag that you use most often. It is what lets you easily make website layouts (with help from CSS of course), and so, let's play with it! Open up the **5 - Layout** folder, and use your editor to open `homepage.html`. <!doctype html> <html> <head> <title> My Website

Besides the `

` tags, everything here should look familiar. Each of the `` have a `class`, which means we should style those, right? Right. Within those `