Now you're going to learn a bit more about CSS. Last time you learned, why you would want to use CSS to separate the style of a web page from the content, which touched on some major themes in computer science. One of those themes was reusability. You could describe a style once in CSS and reuse it across multiple elements or even multiple web pages. Another of those themes was maintainability. Being able to efficiently change your web page in response to changing design requirements. Now that you have learned a bit about why CSS is important, we are going to build on that and delve into how you can write your own CSS to style a webpage. Before you learn what to write for CSS, we are going to teach you where to write it. In CodePen you've been writing HTML in the left pane. To the right is the CSS pane, which I have highlighted with the blue square here. You can identify it by the fact that it says, CSS in the top left corner of that pane. Also, don't worry about the slightly fancy CSS in this window, it makes a nice looking table but you only need to learn the basics. If you are writing a webpage from scratch without a tool like CodePen, you could include CSS by either using the style tag and writing the CSS inside it or by using the link tag to link to a style sheet. Either of these tags go in the head portion of your HTML. We will start with the small example webpage shown above, which describes some delicious foods. On the left, you can see the webpage with no CSS. Notice how the header, drawn by h1 tag, is in black text and left aligned. Now, supposing you wanted to make that header blue and center, like the one on the right. This page on the right has the same HTML but we have used CSS to change the formatting of the h1 tag. Here is the CSS we used to style the h1 tag to be blue and center. Let's look at it in detail so you can write your own CSS to style the pages however you want. The first thing you need to write is the selector, the name of the element that you want to style. In this case we want it to style h1 tags, so we write h1 here. Next you write curly braces which surround the style information you want to apply to the h1 tag. When you write and open curly brace in CodePen, it will automatically put a close curly brace after it and put your cursor between them. This behavior can be helpful, as you do not have to remember to write the close curly brace after you finish writing the style you want. On each line inside the curly braces, you first write the property, what aspect of the styling you want to change. Here, we want to change the text alignment, which has the property name text align. After the property name, you write a : followed by the value you want to give that property. In this case, we want to set text align to center. At the end of the line you write a ;, you can then write more lines with the same syntax. For example, we have color: blue; to set the color property to blue. There are many properties you can set in CSS, we won't go into all of them here but rather suggest you might read more about them online, as you need them. As with many things, you should not try to memorize them. Rather, look them up, as you need them. If you end up writing a lot of CSS, you'll become familiar with the properties that you use often. In your in-video quiz, you just thought about how this CSS styles list items to be green. However, this CSS makes all list items in your entire webpage green. What if you wanted to make some of them green and style some of them a different way? We're going to show you three approaches to styling only some of a particular element. The first way you might do this is to use a class, a named style. To use a CSS class, you need to change your HTML by writing class=, and the name of the class you want in the tags you want to style. Now, in your CSS, instead of writing the name of HTML tag as a selector, write a dot, followed by the name of the class. The dot specifies that you are naming a class. Immediately after the dot, you should write the name you want to give the class, this name can be pretty much anything you want. It has to follows some rules, like you can't put braces or spaces in the name but you can pick any word you want for a name. However, you should make the name descriptive. In this example, we picked foodLi, since we're using the class to style list items that describe food. Would .green be a good name for this class? Even though that describes how it styles the list items right now, naming it .green is a not a great choice. If we later decided we wanted to style our food list items to be purple, our style name would be misleading. Instead we're better off naming it based on the meaning of the parts of our page and we want to style food list items. If you look back at the HTML, now that you've seen the CSS, you can see where the name we picked came from. It matches up with the class name we picked in our CSS. Another way to style only some of a particular element type, is to use an ID. An ID names one particular element. Notice the difference between a class, which can be applied to many elements, and an ID, which can only be applied to one element. In this example, the webpage has a picture of a cake, which we want to style in a particular way. We have specified id?"cakeImg" inside the img tag. Now in the CSS we can describe the styling for cakeImg. Notice how the selector for an ID starts with a # sign. The final way that we will mention, but not go into depth on, is called combinators, these let you specify relationships between tags. You might specify that you want to style li's that are inside of UL's in a particular way. Which you could do by writing ul li as the selector. There are more advanced relationships, such as siblings. Combinators are a more advanced topic which you do not need to know but we mention it for those of you who want to explore a bit more. Classes and IDs both let you name a way to style an element. Naming a style lets you reuse that style as needed. In the case of a class, you can style many elements on a page in the same way. For both names and classes, you can reuse a style across multiple pages. For example, if you have a logo that you want to display in the corner of every page on your site, you can write a style for it once, and re-use that style on every page. Naming and re-using is a common theme in computer science. As you delve deeper into programming, you will find that it is often useful to name things, constants, algorithms or data, so that you can re-use them. Now you have seen the basics of CSS. You have learned where to write CSS in CodePen, the basic syntax of CSS and how to make classes and IDs to name and re-use styles.
