Transcripts
1. Trailer: Cascading style sheets allow us to add presentation to our otherwise kind of bland HTML-only page. In this class, we're going to take our four-page HTML-only portfolio site and link it to a new CSS document. We'll apply basic styles to our elements and see how those take effect on our HTML document. We'll start at the very beginning of CSS, and cover all the necessary fundamentals to getting the presentation layer onto our projects. If you've never heard of cascading style sheets before or looking for a refresher on CSS, this class is for you. We'll cover the very basics of how to write CSS connected to our pages and also talk about troubleshooting. You should know the basics of HTML before taking my class. If you took my intro to HTML class, this is the perfect follow-up. I'll be providing the HTML that I'll be working with for you to download and follow along with. Our CSS styles can be applied to any HTML we want even if it's a site about dogs because they're cute too.
2. Welcome!: Oh. Hi, new friends. Great to have you here. I'm Jenn, and today, we're going to be talking about CSS, otherwise known as Cascading Style Sheets. CSS is the great follow-up for if you have already taking my HTML class or another HTML class somewhere, or if you need a refresher about CSS, how it works, and what it can do. CSS is as awesome as it provides styles to all of our web pages. So, things look a little prettier, and hey, we all like that. Before we get started, I thought I'd tell you a little bit about me, and I'd thought I'd do that by playing two truths and a lie. So I'll tell you three things. One thing will be a lie. Number one, the first website I ever made was in 1999. Number two, I saw Bon Jovi twice in concert. Number three, I once went on Price is Right and won $700 playing Plinko. All right. So, I didn't win $700 playing Plinko. Not yet anyway. I digress. Let's go down with the CSS. Hey, that's the only time I'm going to rhyme this entire class. I sort of promise. CSS stands for Cascading Style Sheets, and in this class, we are going to be building a project based on an HTML base for our portfolio. We have a four-page portfolio website, which we'll be working with, and on top of that plain HTML, we'll be adding CSS to add textiles, colors, and makes things a little more pleasing to our eye. So, we will take the HTML for Jon Arbuckle's portfolio here, which with HTML only looks a little bit like this, and we will take that, and add styles using CSS. So, we'll take our HTML from this to this paired with CSS. We'll learn a little bit about how text colors, background colors, font families, and font sizes, as well as text decoration, can adjust our pages accordingly to add more visual interest to our plain HTML. So, once you're ready to start, come on back for the next lesson, and we'll talk about what tools we need to begin building our website with CSS.
3. Gather our Tools: We're going to get started by downloading a few tools that we'll need to write our CSS. Just like an HTML, we can use any text editor in order to write CSS. The benefits to using a text editor for code is things like syntax highlighting, keyboard shortcuts and formatting help, to help us write more efficient code. If you took the Intro to HTML class with me, then you'll be familiar with Sublime Text 2. We're going to be using Sublime Text 2 to again. The thing that's great about Sublime Text 2, is that you can use it for Windows and Mac, and they also have unlimited free trial, which will prompt you to buy the software which, if you enjoy it, you should, but while you're trying it out you can use it for free. You're going find this at sublimetext.com/2 and from there you can download the latest version based on whatever operating system you're on. So, why don't you go ahead and download that if you haven't already, and then install it and come on back. After you've installed Sublime Text, the next thing that we're going to need is a modern browser. I'm going to be using the latest version of Chrome for this. You can use any browser that you desire, I would recommend using the latest as it's usually the easiest to work with and they have a lot of more tools for developers in later versions. I'm going to be using Chrome specifically because I love the Chrome Web Inspector. The Chrome Web Inspector, we'll see a little bit later, but essentially it lets us inspect any elements on the page and to be able to see the HTML and CSS for them. So, it's really neat. Highly recommend using Chrome for this. If you are using Firefox, Firefox has something similar in that you can inspect elements on the page. That'll be very close to what we're doing in Chrome. Internet Explorer also has developer tools as does Safari. So, again, you have some other choices, but I will be using Chrome for this class. If you'd like to follow along with that, that will be in here. The last thing we're going to need is HTML for this class, which you will be able to find from the project steps and download this jon-arbuckle-site.zip file. Here you going to unzip your file and then store it some place where you can find it easily. Sometimes that's on your desktop, sometimes documents folder, sometimes a sites folder, whatever works for you, where you will not forget about it and can easily be found for now. So, get all that setup and then let's go ahead and start looking at the overview of the files that we'll be working with.
4. Overview of our HTML Class Files: In the intro to HTML class, we created a site for the portfolio of Jon Arbuckle, our fictional client. We're going to be using the HTML for that class as a basis for learning CSS. If you have made your own portfolio either from that class, or there's some other HTML that you want to work with, that's totally fine. If you want to follow along exactly with what I'm doing here, then go ahead and grab this file and let's work with that. So, after you unzip the file and you know where your folder is let's go ahead and open Sublime Text. When you first open Sublime Text, you're not going to see very much. Sublime text won't open any files that you were last working in, so you're going to have to tell Sublime Text that you would like it to open the folder or file that we'd like to work on. The other thing we're going to want to do is customize it a little bit to our preferences. So, the first thing is I'm going to click, View, Side Bar, Show Side Bar, and the Side Bar section will open again. Again, that's View, Side Bar, Show Side Bar. Now, we will be able to see the files that we're working with. From there, I'm going to go to file open and browse to the folder in this case, the Jon Arbuckle folder that I'd like to work with. So, File, Open or Control or Command O, if you'd like to use the keyboard shortcut. Then I'll see the Jon Arbuckle site folder. Now, I could just open up one of the files, but I'd like to see everything we're working with. So, I'm going to keep it highlighted on Jon Arbuckle site and then I'm going to click Open. Once I do that, you will see Jon Arbuckle site with all of the Files and folders that I have within that folder. One other thing you'll notice, it's a little wonky about Sublime Text is, this actually opens in front of that flake window we were just looking at. Whenever you just File Open, it opens a completely new window or browser Chrome, so you can just go ahead and close out old one out because we don't need it anymore. So, one more time to walk you through, I Open up Sublime Text, I go to File, Open and then I navigate to the folder that I want to Open and Click Open. One other option you have for viewing the files, is if you have your folder over here in the sidebar over here, you just go ahead and drag that and the Files will Open up right there without opening up another window. So, now that we have that open, let's take a look at some of the Files that we have to work with for Jon Arbuckle portfolio. I'm going to Open this in the browser to see visually what we have. So, I'm going to Open up this folder, and I'm going to Click on index HTML, which remember is our homepage. See here you can see is the homepage of the Jon Arbuckle portfolio. We have a logo, that links back to the homepage or the site index page. We have main navigation which links to three subpages that work the about and the contact. We have our heading on Jon Arbuckle, freelance Illustrator and author. We have our hero image which will be replaced later on once we know what that image will be. We have some headings, based on the stuff that Jon does for his living and spare time such as his web comics, along with the description and a link to see more. His music heading along with an image, for his Polkaholic cd and I'll link to buy it. We have another heading about Jon on Twitter with a paragraph, so we can read about Jon on Twitter by following his Twitter account, which the link is here. We have a blockquote element. This blockquote element is a testimonial from a client of Jon's. Then, we have another paragraph with a call to action to get in touch which goes to the contact page. Then, we have our photo which will appear on every page with the copyright, along with our copyright HTML entity. We jump into some of these sub pages, we can see the work page has the example of Jon Web Comics such as the LASAGNA CHRONICLES and CAT TOWN. Also, we can see that these are the portraits that Jon has offered to make. Again, his music, Jon really likes to promote his music. Next, we have the About Page. On the About Page. We can learn a little bit more about Jon's as well. So, we add an image of Jon, a heading and then we have two paragraphs to describe Jon. We also have another heading to describe the list of professional services that he offers along with unordered list describing the things that Jon does. Again, you'll see our filter content below this. Lastly, we have our contact page which just explained that you can Contact Jon through his email with a mail to link, and then also a link to his social presence on Twitter, Facebook or Pinterest under the heading Elsewhere on the Interwebs. So, let's look at this site in the browser. Remember if you want to open up any of your files you can just double-click to Open them as long as they have that.html at the end of them, and they will Open in your preferred browser. Let's go back to Sublime Text and take a look at the HTML. So, to open up a folder, remember if you just click once, it won't actually Open, but if you double-click, you'll see the tab pops up, which says it's Open. You can see the little x icon here that means there's no changes to be saved right now. You'll also see that my font is pretty small. So, I'm going to bump that up a little bit. I can do that with the command or control plus. There is shortcut for that. You can also see that I have this little minimap here, and what this does, it just sort of shows us a small map of all of our code. I find that kind of gets in my way. So, I'm going to do view, hide minimap, to get rid of that, again view hide minimap and you'll see that disappears which I am a fan of making that disappear. So, taking a look at our homepage, again we have our doctype or HTML tag. Within our head, we set the meta and charset attribute, we have the title of our page which is the portfolio of Jon Arbuckle, and then we head down to the body, where we have our header information. We mark that off with the HTML comments, our anchor link back to the homepage because we want that image to be able to link back home. The unordered lists for our navigation, and then we have our page content. In our page content, again you can see that marked by the comment just to keep our code nice and organized. We have our heading level one which explains what the site is all about, the hero image, the web Comics heading, that's an h two under the h one. Our paragraph links, again following the same formula, another heading, another image. A heading level three because it nests under the heading level two of music. We saw the Jon on Twitter. When we looked him in the browser, we can see it here too. We've got our blockquote section, and inside of our blockquote, we have our paragraph tags again with our entities to make sure that we get the curly quotes for the correct quotes in a dash entity to get that. Then, we have our paragraph with a link to the contact page and our footer. That's our homepage. Taking a look at the About page. Again, the header should be the same because we copied it from page to page, and just the page content will be a little different with a h1 image. Couple of paragraphs in the unordered list here. Next let's take a quick look at the contact page. The Contact pages are pretty short page. Again, the only thing different on all of our pages is the page contents section, and that one's got again an h1, which we should have on every page and it's the most important heading. Our paragraph, and then our elsewhere on the web's along with our unordered list. Last is the work page. The work page again, page contents different. We have our headings, we have subheadings for web Comics, the headings into that for the different types of comics. Under the Comics is the image link, and under the music is the same sort of material here. So, just take a look through that. If you did not make this portfolio of Jon Arbuckle in the other site, no problem. Just take a few minutes to familiarize yourself with the code if you'd like to use this. Otherwise, feel free to use any HTML base that you would like to use for the site. We're going to be talking about CSS and that can be applied to any HTML. So, no worries at all if you would not like to help out Jon Arbuckle. I'm sure he will not hold it against you and let's get started in the next section looking at exactly what is CSS, and how it will apply to our HTML.
5. What is CSS?: So, what is CSS? Well, CSS stands for Cascading Stylesheets and Cascading Stylesheets are what we use to add styles to our HTML elements. So, things like layouts, colors, fonts, that's all controlled using CSS or Cascading Stylesheets. That's mouthful and hard to say five times fast so let's just go for CSS from here on out. CSS is what's known as the presentation layer. When it comes to the front-end of a website which is what we call basically how you switch a design into code before you hit the backend technology, so things like databases, the front-end handles HTML, CSS, and JavaScript otherwise known as the content, presentation and behavior layers. So CSS is the presentation layer as it handles all the presentation. CSS was created so that we could separate the content from the formatting, so if any of you did a bunch of Web design in the '90s or early 2000s you might remember things like font tags and we did a lot of things within HTML to do the styling for it. Things like bolding, using bold tags just to get a bold look but we want to do that with CSS now because using CSS to handle the style means that our HTML is more portable. It means we can reuse it for different things. It helps with accessibility and we can format more than one document super easily and be able to update the styles really easily when we keep things separated. The site csszengarden.com is a great example of everything that CSS can do. The idea behind the site when it was launched is to take the same HTML and see how by applying a different stylesheet we can get vastly different layouts and looks at aesthetics to the same code. So let's take a look at some of the designs they have here and see how even though they all use the same HTML they look quite different. If we look at the HTML file by viewing source of the page we can see that this same HTML is used to create this home page and it's the same to create this page, same HTML but different CSS, to create this or this and this. You can see that even though the HTML is the same, it looks completely different. We can make our websites look however we want them to look just by changing the CSS and styles that we're applying to the page. So don't worry again if you don't want to use the same markup, any markup will do, we can use the CSS on top of that but we will be seeing how applying styles you'll have all the control over how your page looks. What's really neat is if we use our Chrome DevTools, again we can sort of see what's going on here. So if I inspect element by right-clicking or control-clicking, you might remember in the HTML class we used this to look at our HTML elements but also on the right hand side you'll see here is the CSS that's used in order to create the styles for the site. So, if I go back to the top and I take a look at this CSS ZEN GARMENTS header, I can see it's an H1 and then over here you'll see these are all the CSS styles being applied to make this happen. Don't worry if any of this doesn't make sense right now it will by the time we're done. But that is how you use your inspector and it'll do this, so you'll see here for example color, and it is blue color. But if we take a look at one of the other designs and inspect their H1, we'll see the H1 is still the same as CSS Zen Garden. Let's pull this up so you can see that a little better. You can see the styles over here look quite different than what we saw over there including the color which is sort of this darker black color. So, that starts to give you an idea about how just tweaking CSS styles we'll be able to get different looks. So, let's get into how we write CSS and the syntax and terminology in the next video.
6. CSS Syntax and Terminology: CSS is made up of two parts, the selector, and the declaration. The selector is going to tell us the target of which we're styling. So, something like a paragraph or a heading. Whatever element or object, we want to style. That's what we refer to as the selector. The declaration is going to specify the property in value. So, what we're actually going to change about that object. So, if we want to change the color, or if we want to change the size of something, there be something that we'd specified within our declaration. So, what exactly does that mean anyway? Well, let's say that we wanted all the paragraph tags on our page. So, all of our paragraphs which are marked by a p tag in HTML, what if we want them all to be blue? Well, essentially the paragraphs then become our selector, and the value of blue is added within our declaration. We also have to specify the property that blue is being applied to. In this case, we're saying the color. So, in plain English, we want to switch the color property to be blue of all of our paragraphs. Well, how do we write that? I mean certainly we can yell at the computer, but it probably won't listen to us. So instead, we're going to write it with CSS. So, what we're going to need to do is we're going to tell our CSS, what our selector is, and then we're going to tell it the property that we're changing, and the value that we're changing it to. It looks like exactly like this with selector, and then inside declaration is contained within the curly braces. We write down the property, and then a colon, then the value, and a semicolon. All CSS formatting looks like this. So, to sub-in a real world example like what we were just talking about for paragraphs selector. We say p because that's the HTML equivalent a p tag. The property becomes color because that's the CSS property we were changing. The value becomes blue because that is the value that we want to assign to the property. So, essentially, you're always want to sub in this formula with for what you're trying to change on your HTML with CSS. So, any selector can go in here your paragraphs, your each ones a block code. Anything can jump in here, and we'll look at that a little bit later on. It's also important to note that our declarations can have more than one property value pair. We don't want to limit ourselves to saying text that can be blue. So, let's also say if we wanted the color of all of our paragraphs to be blue and all the font size to be 14 pixels, we can do that. All you need to do again is write font size: 14 pixels; So again, property: value; The semicolon basically tells your CSS, that you're about to start saying a new property, or it's the end of the property. It doesn't have to go on a new line just like HTML whitespace doesn't matter. However, I find it easier to read especially when starting out. When you keep all of your different properties on a new line. But now that we know how to write CSS. How do we get this to actually apply to our HTML? In the next video, we will talk about linking things like our blue paragraphs to our actual HTML to make that work.
7. How to Add CSS to our Pages: So, let's add the CSS to our pages that we already have created with our HTML projects. If you're using your own project, go ahead and open that up in Sublime Text, if you are using jon-arbuckle porfolio, we're going to want to open that up too. So, open up Sublime Text if you haven't already, and file open, and navigates to that folder, in this case, jon-arbuckle-site, and click "Open." If you have your sidebar on, you'll see all of your folders and files on that left hand side, just like we like it. We have three options when it comes to adding CSS to our pages and that's through inline styles, in internal stylesheet and in external stylesheet. Spoiler alert, we're going to want to use the last one. However, I want to walk you through each one to explain the pros and cons of them and why they're different, and why you might want to use some of them and what to do if you see them. So, the first one I'm going to start with is inline styles. I'm going to open up any one of our pages. In this case, I'm just going to start with the about page. Open up the about page in Sublime text by double clicking. Just a reminder, this is what our about page looks like currently. So, everything is styled basically with what's called browser defaults. Browser defaults are how our page looks without any CSS. So in this case, it says that because this is an H1 the browser says, "Well, make this bigger and bolder than other fonts on the page." Our paragraph is that a text that's pretty legible in a Serif font. Our H2 is again bolder because it's a heading, but a little less large than our H1 because it's not as important. Our list already has bullets as the marker for it. These are what's called the browser defaults styles. So, whenever we don't add a style any text or HTML we put in our page will receive the browser defaults. We're going to override that with our CSS to say specifically how we want our page to look. So, the first way we will do that with those inline styles. I'm going to scroll down to my paragraph text, and within my paragraph tag I'm going to add something, and what I'm going to add is an attribute. You remember from our HTML lesson that attributes provide more information to the tag. So for example, on our linked tags our H ref wasn't attribute, or up here on our image you can see the source is what's called an attribute, and the alt text is an attribute. Then the value always goes within the quotes after the equal sign. So, our inline styles are essentially going to be another attribute and that attribute is the style attribute. Just like any other attribute, we'll start by saying what it is in this case, style, then equals quote-quote. Within the attribute value we're going to say what the style we want it to be. So in our last video we took a look at declarations that are paired with selectors, and in that case, our declaration had a property and a value. We're going to write the property and value within our style attribute. So, in this case, color, and just like we did in the CSS syntax example, colon, blue, semi colon, then I'm going to save the file. Remember it's always important to save, I can tell that my files unsaved because it has the circle there. So file, save, or control S, or command S. I'm going to let that open that about page in a browser get in, if you don't have it open again remember just browse to it. In your finder and your documents, wherever you have it saved. Open up that folder, and then double click to open. So, here we are in the refreshed opened page, and hey, there you go. Look at that our text is now blue just like we told it to be with an inline style. If you wanted to add something else, if you don't remember in our previous example, we talked about having multiple properties and values in our declaration. We can do that in inline style as well. So, right after that semi colon, which indicates that the property value pair is done we can write another property. In this case, we're going to change the size of the font. The CSS property for doing that is called FAAB size. So, we write font-size, a colon to say we're going to give the value for this property, and we'll just change to something like 18 pixels. To say that we're done declaring our value, a semicolon. Again, we're going to want to save this, pop back over, refresh the page, and now you can see our font size is changed. This is the CSS that we apply to change the color and the font size, and we did that with what's known as an inline style. So inline style is saying, "Let's use a style attribute on a tag in order to get the color, or size, or any other CSS property that we want to change." So, what happens if we want all of our paragraphs to be blue and font size 18? Well, we'd have to go to all of our paragraphs on a page and type in other style attributes. So style equals color, colon, blue, semi colon font-size, colon, 18 pixels, semi colon. I can save this, go on back to Chrome, refresh, and now that paragraph is blue and 18 pixels too. That's great, I mean, it's cool that we have that much control, but can you see how tedious this would get if you have more than two paragraphs on your site, which you probably will? If you think about large sites, imagine having to go through and declare every CSS property you want it right on the tag? That would really stink, and I bet you you have better things that you would like to do with your time. So, that becomes a problem with the inline style. Another problem with inline style is let's say down the road you decide that you freakin hate blue. Blue is just a jerk and you don't want your paragraphs to be blue anymore. Let's say, instead your new favorite colors red. In order to change it to red, you can come in here, delete the blue, type red. Of course, this will work and if we go back and refresh you can see that's red, but now you have to find every single place where you said blue and change that to red. That would be a very tedious process, and a lot of changes and it would be really easy for you to miss one. So, the good news is we have a better solution. So let's take a look at internal stylesheets next. So, I'm going to go ahead undo these inline styles because they are not the preferred way that I would like to write our CSS. So I'm just going to set that back. What I'm going to do is essentially, I want to tell our CSS to apply to everything. I want to provide information about the styles of the document. Does that sound a little bit familiar? Remember where we defined other information for the overall document and what it meant? Perhaps our meta information? We kept that in our head, right? Remember, the head describes meta data for the page. So, with in Our head is actually where we're going to define our style document. In order to create an inline stylesheet, we're going to need a style tag. I'm going to add the style element within our head. Just going to do a few, look, too many spaces. Just two spaces down just for me to be able to see this a little bit better, and when to start by writing and opening style tag. S, as you can see, in Sublime text one of the things that it does because it's a HTML text editor is it starts suggesting auto completion for what we're trying to write. So, it sees me type S, T, and it assumes I would like to write a style tag. Of course, they're correct that can be really good if I hit enter, it autocomplete that for me. However, I'm going to turn that off for now. You can turn that off in preferences, and I'm going to do that because it will be a little easier for you to see what I'm doing if I type it all out, and because sometimes I think it's important to type things out when you're first starting to learn. So, in order to do that, I'm going to go to my Sublime Text preferences and set my user preferences. Right now, you may or may not see anything here, my font size is there because I zoomed up the font size earlier and it saved that that preference for me. So, contex let you add as many preferences as you want. You can find out more about the Sublime text preferences simply by Googling. So, let's say I want to turn off autocomplete and I wasn't sure how. I could do a quick Google for Sublime Text autocomplete, and you'll get the results for this. Feel free to do that, and if not, we can just copy what I'm doing here, which would be comma, because we're about zoom a new property, then I'm just going to write, auto_complete, colon, false. I'm going to save that, and now when I come back and start typing, autocomplete would be off. Again, remember, if I wanted to see that, or if I forgot how to write something like that, I could just go to the Google and search for Sublime Text to autocomplete. You'll see right here, they'll give you that information. In which case, you could just copy and paste that out of there if you wanted, control C or command C to copy or edit copy, then you could come back into your preferences and just paste it there instead. Of course, we do not need to do that because I already typed it, so I'm going to save that and close that. Now, back to our style tags, I do open style and you'll remember from HTML that if I'm going to open a tag, I also want to close it. So I'm going to close that to there. Then, with inline style tag is where I'm going to write my CSS selectors and declarations. So, you remember back when we looked at the syntax, the syntax essentially looks like this, selector, curly brace, and then the property, colon, value, semi colon. All we have to do is if we want to apply actual properties and values to our selectors is replace this formula with what we're actually trying to manipulate. So, in this case, in the selector I'm going to make it a P for the P tag, the property I'm changing is color, and the values I'm changing it to is blue. Sublime Text is giving us color of syntax highlighting here, so it recognizes that the values that we just put in are real CSS properties and values, and that's a real element or tag selector. That's why I switched from the white color to the pink and the blue so that it registers that it's actually a working CSS property. So, we have our type selector, in this case, the type is a paragraph, a P. Our colors are property and our blue is our value. Let's save this, pop on back to Chrome, refresh the page. Now, all of our paragraphs are blue. Remember, our footer content is actually a paragraph with our copyright information, so that turned blue as well. Everything else should stay how it was because it's not a paragraph, and that's how we start with internal stylesheets. Same thing, if I want to apply more properties and values I can do that. I go to a new line, I'm going to type that font size, property, so font size 18 pixels. We'll take a look at both the color and font property a little bit later on, but I just want you to see this in action so you guys can see how it will connect to our page. I'm going to save this, refresh the page, now all of my paragraphs are 18 pixels. So, our internal stylesheet is definitely better than our inline styles. Easier to write, we don't need to copy it to every single paragraph element. We're pretty cool, right? It's looking pretty good. Where the problem with inline styles arises is that most likely your website isn't going to be just one page. Most likely, you want every page of your website to look similar so people know that it belongs in the same website. If we wanted the styles from our About page to also be on the styles for our work page, we would have to copy our style element, open up the work page, paste it here, save this. Open this back up, go to our work page, and there our paragraphs are blue and 18 pixels. I don't know how many paragraphs on this page, but you can see what's starting to get annoying, right? Now, I need to copy and paste this into the head element of every page of my website. If you have a 40,000 page website that is not going to be a pleasant experience. So, that leaves us with our third choice, our external stylesheets. The external stylesheet is a separate file that's going to hold our CSS. So, let's make our external stylesheet. How we do that is we're gonna create a new file, so you can either file a new file or you can right click and click new file on the folder. I'm going to do file a new file. What I can do here now is start writing my CSS content. So, in this case, I'm going to copy everything I had here without the style tag within what will be my CSS document. So, remember I'm going to say, "I want all of my paragraphs to be blue in color." So, P, curly braces, color, blue, semicolon, and save. Now, when I save, it's going to prompt me with the save box, the save dialog box, It's going to say, "What do you want to save it as?" Now, don't hit return too fast because otherwise it will save as "P curly brace" which is the first line of our document. Of course, we do not want that. What we want it to save as, is something like, "Styles." Now, the really important part is to name it as.CSS. So, just like we had.HTML files, to say that it's an HTML file, we have got.CSS file. This tells the browser that this is a cascading stylesheet and that it will have styles for our HTML. So, you can save this as, styles.css. I like to call it styles.css it's a pretty short name to type, it's easy to remember. A few names like JohnArbucklestyles.css that's lot type let's just go with styles.css. We're gonna to save it right on the same level as all of our HTML pages, so save. Now, you'll see as soon as I saved, the color syntax highlighting kicked in because Sublime Text 2 knows it's a.CSS file, which means that it knows to highlight it based on the CSS text. So, now, I'm going to go back and take out this internal style sheet. I'm going to delete that, I'm going to save this back up. Go over to Chrome, I'm on the work page and I want to be on the About page. I'm just going to click back, refresh the page, and I'm back to browser defaults. Well, why do I go back to browser defaults? I said that we should be using this external stylesheet, right? Well, we created the styles.css, but what didn't we do? We didn't actually link the two files together in anyway, right? We have in about.html, we have a styles.css, we didn't tell it to apply styles.ccs to our About and HTML page, so we have to do that. We do that by attaching our external stylesheet with a link tag. The linked tag is different than our anchor tag that defines links, so a little bit similar in names, but definitely a different thing. The link is going to attach the file that we want to use for our CSS. We're going to add in our link tag to define another file that we once linked to. So, we'll type open bracket, link, and then we're going to need a few attributes. Essentially, the link is a standalone tag that just hold attributes and no content. So, the first thing we're going to say is rel="stylesheet". The rel attributes is going to save the relationship of this link file to the document. In this case, it's saying that its relationship is that it's a stylesheet. So, the next attribute we write should look familiar as you have seen it before and that is the href. Remember the href said were the document we were linking to is located and we're going to do the same thing for where we should link the CSS file to. So, href="", then we're going to fill that in with where the stylesheet is located. So, in this case, it's going to be pretty easy. Just like how our work about in contact pages worked, we're currently on the About page and we want to go to styles.css. So, we're on the same level which means we don't need to go up a level or into any folders. Styles.css, then close our link tag. Now, if I was holding my styles.css in a folder called CSS or something like that, remember, I'd have to save the folder I wanted to go into, then a slash go into the folder. But since we're on the same level, I'm going to delete that and just save it a styles.css because it's on the same level in our folder structure as our about page. I'm going to save with command, control S, come back to our browser again, refresh the page, scroll down here. You can see that all of our paragraphs are blue because now our stylesheet is linking correctly. In the next video, we're going to look at using the Web inspector to see how our CSS is being applied to the page and how we can tweak things to see how things will look. We're also going to go look at troubleshooting. So, if your styles aren't showing up right now, watch the next video and let's see how we can make sure that we're getting the files to link together correctly and we can see them in the browser.
8. Troubleshooting and the Web Inspector: If you can't see your text turning blue right now, well, that is a super bummer. So, let's take a look at some of the things that could be going wrong. First, make sure that you're looking at the correct page. Right now, we've only added our link tag into our about.html. We haven't added it into any of the other pages such as our work or our index or our contact. So, if you're looking at any of those other pages, then that won't work out for you. If you put the link tag in one of those other pages then it's not going to be on the about page. So, let's make sure that we have our about page opened, and that our link tag is within there. Next, it's really important to check things like your quotes. Remember, sometimes, if you leave something like this, the CSS isn't going to be read properly. So, use color syntax highlighting to make sure that you're actually seeing styles.css syntax highlighted correctly. Next, make sure your path is correct. Did you actually named this, styles.css? If you named it something differently than me, then you're going to want to change this to what you named it. So, if you needed something like colors.css or catsrule.css, then you want to make sure that's what it says. In this case, we said styles.css. Sometimes, what I like to do is if there's a complicated name or maybe something I can't easily type, I can click here to Rename, just select it all out of that to copy it. I'm not going to actually rename it. I'm going to come back to about and just paste that in to make sure that I'm getting it exactly how it's supposed to be. Next, did you make sure that it's on the same level? If you have any other folders, remember the path is going to be a little different. So, for images, we've to go into our Image folder. That's something that you may want to look at. Another thing you can do to make sure that the file is actually getting linked to and so the problem is in the file and not your actual selectors over here, is let's go ahead and look at this in a browser. So, I'm going to save things back to how they were, come back and refresh. Well, let's say it's not working because maybe I forgot to close or open a quotation. If I come back here, you can see that the styles.css isn't working anymore because my attribute wasn't named correctly. So, one of the things I can do is open back up either our Inspect Element to do Web Inspector or I can view our source. So, View, Developer, View Source, and you'll notice whenever we view the source, we'll see that our links are blue just like we saw in regular web pages. If I wanted to open this in a new tab, I actually could because this is a link to that logo.png. This lets me know that this link is actually working and going to the right place. So, I could try doing the same thing with styles here, so open link in new tab and I see this web page is not found, and I can start to see that there's a problem here because I see this quotation over here, there shouldn't be any quote in my file URL? So, let me go back over here and say, "That's weird." That may help me identify that something's wrong with how I'm linking it. Another thing we can do is use our HTML validator. You might remember that from our last class, so you want to go ahead to the W3 Validation Service. I'm going to copy all of my code. I'm going to do that with control A or command A to select all, or Edit, Select All. I'm going to select all and then I'm going to copy. I'm going to go over to the validator.w3.org and go to Direct Input, paste my code into there, and click Check. Now, you'll see I'm getting an error now when I run this through the validator. So, let me go down and see what the error is and the error says, "In unquoted attribute value." That is fabulous, it is telling me exactly what is wrong. So, line 10 unquoted attribute, I come back over here. That was with line nine, but you've got the general area and I can see, Oh shucks, I forgot this quote, and save that. So, that's one way. Now, let me go ahead and break this a little, come back over to our browser, refresh this. Again, it's not working. So, we'll go back to what I did before. What I did was I made sure that the styles were there. Another way I can do that by inspecting Element. Remember, Inspector allows us to see all the HTML on the page? I'm going to open up my head element, I'm going to go to my styles.css, I'm going to click on this, and I can see that it is actually loading the styles.css. So, the problem isn't linking anymore, the problem is something within my styles.css. All right, let me go back and check that out. So, I go over to styles.css, and at this point, I'm not really sure what's wrong. It's really easy to miss a semicolon or a colon every once in a while. So, if I don't see this right away, I can again use something like a validator. There's not just HTML validation, there's also the CSS validation. So I'm going to copy my code from here, then I'm going to go to the CSS Validation Service. That is jigsaw.w3.org/css-validator or just do a quick Google search for CSS validator and click on that link that comes up. I'm going to go to Direct Input. Of course, you can also put an actual URL of the document or upload the file, but I've copied everything already, so let me just paste that in there. I'm going to check, and now it's going to say that they found an error on 2, text area p, color Parse Error blue. This identifies me where the problem is. Now I can find on line 2, and I can look and say, color, semicolon blue, oh wait, I didn't actually put a colon in. So, let me add the colon. Now, you can see Sublime Text sometimes likes to autocomplete for you, which can be a little annoying because I don't want it right now. So, we'll delete that, then I'm back to being all set and in business. So, let me save that, come back to my browser, refresh this, and things are blue again. So, now that we have everything working, let's go ahead and copy the external stylesheet to our other files. Remember, right now, it's only in our about page. So, if I went over to our Home, the paragraphs are still going to be in the black style instead of the blue style that we addressed. So, I'm going to go to my about page, I'm going to copy this link element, and then I'm going to open up all of my other pages. I'll replace that. Remember, I like to keep things neat, so I'm going to tab that in there, go to the Contact page, drop that in there. Lastly, our Home page, you can add that in there, too, and save. Looks like I forgot to save contact and I forgot to save work, let me save those. Now, if I go back to the browser, and refresh, we can see that the styles are being applied. We can also use our Inspector to see the styles that are currently being applied. Just like we used it to look for each HTML, we can also view our CSS. I'm going to scroll down so I can see this. You can see I'm on my blockquote, and then my paragraph and you can see on the right hand side over here, we have our Styles tab. Our Styles tab tells us that the paragraph's color are blue. So, we can see what styles are being applied to our page by inspecting the elements for our CSS as well. Another neat thing you can do in the Inspector is actually see how another color would look. So, I can go over here, you notice when I click, it's highlighted, and let's say that I don't want things to be blue anymore. Remember, we don't like blue. Lets make it red. I can type red, and now you can see that the text is red. So, the Inspector lets us see live preview to see if maybe we like something else better. Of course, this won't save to your actual CSS, but you can test things out to see how they look, decide if you like something and then you feel like, you know what, red looks good, come back over to your styles and switch this to red. So, that's how using the Inspector works and a little bit about how we can troubleshoot to make sure that our styles are actually coming through to our page. Of course, we've just started to scratch the surface on what we can do with CSS. So in the next lesson, let's take a deeper look at the CSS properties we have to work with to apply to our HTML.
9. Font Properties: CSS properties are what we use to change the appearance of our HTML. In this case, we've looked at two CSS properties so far, color and font Size. Font size, just like the name implies, changes the size of our fonts. We can go back to our styles.css and let's reapply a font size to our paragraphs. In this case, let's say 16 pixels. Well, we're not going to just want to change our paragraphs, we're also probably going to want to change things like our headings and our list. For now, let's just start with our headings, and we're going to say that our h1 will be 30 pixels. Now in order to do another property for another selector, we're just going to do the same exact thing we did up here and follow our selector property value syntax. In this case, our selector will be our heading level one. To write that, remember our HTML is h1. Curly braces, that's where we do our declarations. In this case, we're going to say font-size: 30 pixels. That says use the pixel unit of measurement and make it 30 pixels. Let's save this. I'm going to open up my Contact Page and I'm going to refresh, and there it is. It doesn't look much different, right. Well, let's take a look at what's happening and make sure that it's actually working. Our h1 is 30 pixels, and our paragraphs are blue and 16 pixels. Okay, so maybe we're a little close to what the browser defaults were anyway. Let's bump that up. How much should we bump it up? I don't know. Let's play around here until we find something that we like. I'm just clicking the up arrow. The up arrow and down arrow will change the pixel value by one amount. Hey, that looks pretty good, 52. I'm going to save that. Well, I can't save it from here. I have to go back in and actually change it here to my file, and I'm going to make this, now let's just make it 50. My h1 50 pixels. That's how he would define font size. Pixels is just one unit of measurement we can use to define the size of our fonts. Just like how we could describe things in maybe like meters or inches or feet, you can also describe your sizes of fonts in different units of measurements. Another example is using a keyword. Some of the keyword values we possibly have are small, or extra, extra large, which would be written like this. We can save this, go back to our browser and see how that looks. Well, it's really not that extra large compared to what we had before, but that's how you do extra large. You can see though that our paragraphs are pretty small. We can also see what it looks like at extra small or extra, extra small, and that is quite tiny. I do not wear glasses yet, but I think I would if everything was that small. Other possible values we have are em, so we could say something like 1em or 5em. We can save that, refresh, and you can see that that got quite bigger, and 1em is basically the default of the font size anyway. You could use decimals in that too, so you could say something like 1.5em or 2em. We also have percentages, so you could say something like 100 percent or 300 percent. Save that, go back over. The font size is based on the percentage of the parent element. In this case, the whole page. This font size, you can dig real deep into the side which font size measurements are the best for you. I will say that pixels are the easiest to start with and sort of the easiest to grasp your head around because we know how large 16 pixels will be, so we'll set it back to that. Let's do font size 20 pixels for paragraphs, and h1 as 40 pixels. Feel free to play around with some of the other units you can use for font size. The next font property that we'll look at is font weight. What if we want our font weight to be bold? Well, we've seen some bold fonts before with our headings. What if we wanted to make our paragraphs bold too? Well, we can do that with the font weight property. So font-weight: bold. I'm going to save that, File, Save, and refresh the page. Now you can see my paragraph text is bold. If I wanted to see how it looked without bold, just a preview in the browser inspector, lets just turn the properties on and off, and you can see the differences that they're making as we go. Now you might be thinking, "How would I ever know that the word is bold for this?" Yeah, of course, I'm telling you this now, but how would you know that? That's where the Googles comes back in. Don't worry about memorizing all these right now. The nice thing about working in CSS is you're going to be writing CSS on a computer. Now, granted hoping that you have an Internet connection, most likely, you are like one tab away from just Googling what the CSS property value is for this. Let's say I couldn't remember but I knew I wanted to make my font weight bold. Well, I can go to a reference site. One of the reference sites I really like is HTML Dog. HTML Dog has this list of references on the site. You might have looked at the HTML tags before, we can also look at CSS properties. I know I want to change the weight of my font, and right here, look under Text and Fonts, I see font weight. I click into that, and then what it will do here is list the possible values I can set for that property. Normal, bolder, bold, lighter, and then weight. Weight start from lightest to boldest. In this case, you can even see an example, font-weight: bold, which is what we're typing in right here. You could also turn off the font-weight: bold of the headings if you want, and you could do that by using font-weight: normal. For the h1, I can say font-weight, and then write normal. I got that normal value again from here, I'm going to save my file, come back here, and now watch the h1. It's not bold anymore because we decided to set that to normal. That's how you would start adding font weights to your page. You might want to leave your headings bold so people know that those are indeed headings, but we've already bumped our font size up so much to 40 pixels that it's pretty obvious that this isn't just paragraph text that we're looking at. For now, I feel fine removing the font weights of bold and setting it back to normal. Next we have the Font Style Property. The font style lets us adjust the style of the font. Examples we have are italic or oblique. If we wanted to make- let's set up the h2s. They haven't got any CSS love yet. So, h2 for our selector, curly braces, and then inside of that are property and value. In this case, we're talking about font styles, so font-style: - Then let's say Italic. Save that. Refresh the browser and you can see that our heading level two have changed to Italic. That looks a little heavy being Italic and bold, so we could combine things so we can have font-style and font-weight. So let's change the font-weight to normal and remove that bold. Now, here we have our heading, which is italic and normal weight. Again, if I wanted to know what options I had for fonts, I could go back to my CSS Properties at htmldog and check out the font style. Here, you'll find the different options I have. So, we've adjusted a few things better font so far, but one of the things we haven't changed at all is what actual font we're using. Maybe you're not a big fan of this serif font. Maybe you'd want to use a sans-serif font. We can totally adjust that and we will do that with the font-family property and the font-family tells us which font you would like to use. So, let's change our paragraphs to the font-family. So let's change this to the font-family of Arial. So, what we will do is for value over property, we are going to write the font name that we want to use, in this case Arial. I'm going to say this and Arial is a sans-serif font. So, all of the fonts that we've been looking are serifs, which have these little line guys at the end except for our logo of course, but that's an image. I'm going to save this and now you'll see that our paragraph text changed from our browser default to Arial. So that's how you would define a font. There's a few different ways you can do font families and one of them is to describe the specific button we're using such as Arial, but we can also use a generic font-family. So, you've heard me use the word, "Serif and sans-serif." Well, you can just say in general, I want any sans-serif. That's what we call generic family name. You can come back here, click that you'll see it's pretty similar to the browser we might be using Arial. But what it essentially does the browser says "Find whatever sans-serif default you have and serve it." The other generic family names we have are serif, like we've seen so we can switch that back to a serif. We could also do cursive. Save that. Come back over here and you can see it switches to whatever computer's default cursive font is. The next generic font family is monospace. Save that, come back over here and monospace you'll see is like career. You essentially use that for something like code. Samples is someplace you'd see that you use often and the last one we have which might be my favorite for generic font-families is fantasy. Save that and you get something sweet. Perhaps for Pyros on a Mac or Comic Sans if you have the pleasure of using Windows and get to see that beauty. So, I'm totally fine if you want to set all of your copy to fantasy. I think that's cool. Some people might not agree, but "Hey, it's your Website." So one of the things that a generic family does is essentially it serves whatever font is available to machine. Not every font is available on every computer. There's different fonts based on if you're on a Mac or Windows or Linux machine. There's different fonts based on if you've decided to install fonts or delete fonts. The fonts on each machine are sort of up to which operating system you're running and user preference. Because not every font is on every machine, we're sort of limited in what we can serve. I may want to serve Helvetica, but it might not be on your computer. These generic families serve whatever font is available in that generic family genre, so it will look for whatever the default of the operating system is for cursive or serif and that's what it will serve. We have what's known as Web Safe Fonts. Web safe fonts with this list of six fonts that they found their services were available on almost every single machine. So Arial, Georgia, Verdana, Courier, Trebuchets, Times New Roman, these are things that you'll see commonly on most computers. So you can be pretty safe using any of these. However, we also have the font stack and the font stack is a way to serve fallback fonts. What that means is you can serve your first choice of font and then if that font isn't available, the next font on the list will get served to the computer instead. So, let's see something like say, "I wanted to serve Helvetica." I could write Helvetica, but then I want to say if the computer doesn't have Helvetica, serve this font instead and I'd do that with a comma-separated list. So I can supply multiple values to some properties with a comma-separated list of values. So of course you're not going to have a comma-separated values for font weight because you're not going to say bold comma normal. The font is going to be bold. However, font-family is the situation where you would want to do something like this and where work can be valid because you can have multiple fonts specified in case you need to use a fallback. So, let's say there's no Helvetica serve Arial instead. If there is no Arial, the last font that we want to list in our font stack is going to be the generic family name. In this case, these are all sans-serif fonts, so I'm going to say if you don't have a Helvetica and you don't have Arial to serve whatever sans-serif you can dig up on that machine. So, let's save that and refresh the page. So, you can see the update here. What if I put in some crazy font, a font I know that I don't have? Lucida is a font that has a few different versions. This basic version of Lucida, I do not have on my machine. So if I add it here and click Save and Refresh, I'm still going to get the next in my font stack because I don't have that font. If you want out of font that has multiple names in it such as Times New Roman, you do that by putting it in quotations. So, "Times New Roman" and come back here and now you'll see my font switched to Times New Roman. The good news is as the years passed people got sick of the six Web safe fonts and found a way to finagle technology to use Web fonts, which means we actually control more fonts. So, we're going to start with these six in our Website fonts, but don't worry, you will have more choices later on. So, I'm going to set my paragraph text to a serif because that sometimes can be easy to read and I'm going to send it to Georgia, with a backup of serif and for my headings I'm going to make them Verdana. So I'm going to say font-family Verdana and the backup for that will be a sans-serif. Same thing for my h2 font-family Verdana, sans-serif. I'm going to save that, come back over. So, I've changed that. I don't really love the Italic and Verdana together. So, I'm going to take that off. So I'm going to remove that font style. That's a little better for me. I'm going to go with that for now. So, our fonts are looking a little bit better. However, this blue is kind of awful. So, in the next video, let's start taking a look at colors, specifically text color and background colors and see how we can adjust some of that.
10. Text Color and Background Color: So, we like to have at our CSS color property, but right now we just have this terrible blue. Well, there are different ways that we can define our color values for our color property. When we say blue, that's what's known as a color name or a keyword. There are a few different keyword choices that we have to use. Here are some examples. You can see that we can define things as black, white, maroon, fuchsia, that's one of my favorites along with aqua, yellow, olive, lime, green. There's a bunch to choose from but they're all sort of reminiscent of mid '90's and maybe we want a little more control over our color. Well, don't worry, we can do that. We can do that with these other color value options. The first one we're going to look at is hexadecimal. Hexadecimal notations basically to find the red, green, and blue values, using either three or six-digit hexadecimal numbers. There are a few different ways you can get a hexadecimal number. If you have a image-editing program, like Photoshop, lots of times you'll see the color picker over here, and as you move over and change the color, the value down here is our hexadecimal number. So, maybe I want a blue that's a little more tame, maybe like a blue-green like this one. What I can do is copy this number, this hexadecimal number, go back to my Sublime Text, and then in Sublime Text, I'm going to get rid of our keyword blue. To say that we're doing a hexadecimal number, we start with the pound sign, and then we paste in our six-digit number. From there, we'll click save and then let's preview it again in the browser. So when I come back and refresh, you can see that blue isn't as intense anymore. You'll still see that there is some blue on that page and that's actually for our links. By default, our browser defaults makes all of our unvisited links blue. But our paragraph for now is more of this blue-green and looks a little bit calmer. So, we're going to change this. We're going to make this a gray value and we're going to to use the gray value of 333333, I'm going to save that, refresh. There I now have gray texts. Hexadecimal numbers can be three or six digits because you can write a shortcut for them if you have repeating numbers. 333333 is the same as 333. If you had a number like ff3300, you could also write it as f30. The browser will read that as double repeating. So in this case, any time that you have your two digits for your red, your green or your blue values repeating, you can do a shortcut. We're going to have 333 for now. We can save that as our hexadecimal value, but we have other options besides that. We also have RGB or red, green, blue values. So Iet's say I wanted to make my texts as purple color. I could grab that RGB value here. So 129, 45, 112 and I could plug that into Sublime Text. I'm going to get rid of our hexadecimal number and try an RGB value. I'll write RBG and in parentheses, and my value for the purple will go in the parentheses. So if i cheat back and look at what that was which was 129, 45, 112, I can go back here and say 129, 45, 112. These values are red value, or green value, or blue value. The comma-separated values will apply to this RGB. If I save that and go back to Chrome and refresh, I now have this purple color in the RGB value. RGBA is another value that we have, and that stands for, red, green, blue, alpha. We can use the alpha number for transparency. So if I switch our RGB to RGBA and then add another comma for another value, by default, it's a value of 1, and that's saying that it's fully opaque. If I change that to something like 0.5, that's going to make the opacity 50 percent. So let's go back to Chrome, and you'll see when I refresh, that fades out because we set the opacity to the alpha level down to 0.5. So that's a bit about how you use RGB and RGBA. HSL and HSLA are very similar to this except they stand for hue, saturation, lightness. If you don't have Photoshop, that's okay. There's also a lot of color pickers online. This site is colourlovers.com and Colour Lovers show some commonly used palettes. If we go ahead and just browse some palettes, this can give you some ideas of color palettes that you could use on your site or that will inspire you to use different colors on your site. You could click it and find out more if you like a color palette such as this one for "I demand a pancake." If we scroll on down, I'm not quite sure I want a blue pancake but I do like the look of this palette. You can see that they show you the colors here, and you can see they give you the hexadecimal value as well as the RGB value. So you could plug these values into your CSS if you wanted to use something like this. So I could copy this, go back to Sublime Text. I'm using RGB and not RGBA, so I'm going to switch that here and paste that in. Now when I go back, I'm using the gray value that I copied from here. This is HSL picker, and HSL picker gives you a little bit of a slider here, and you'll see as I move things around, it changes the color here You can change all sorts of values until you get the color that you want. Down here is the opacity or alpha layer so you can see that changing there. Let's bump that up to 1. We can see this. Now we're switching lightness. Then if you like this, you could either grab the hex number, the RBGA value, and then the HSLA value which also uses percentages for the saturation and lightness. So let's say I like this green color, and I like the HSLA value, I can copy that, come back to my Sublime Text, and then I can change the color of my H1's by just pasting that in, clicking save and going back. Now my heading level ones are green. Colorpicker.com is another color picker similar to the Photoshop value, and you can see if you can just adjust, in order to choose a color from that. You can check out other tools like kuler.adobe.com. I wonder if that's supposed to be color pronounced. I'm not really sure. Either way, if it has a color picker, I realize I don't really say these things out loud that often, but you can sort of set a base color here, and tweak things and you can say whether or not you want monochromatic or complementary and it will give you suggestions for a color palette for you to use, along with the RGB and hex values that you can use within your documents. So there's a lot of tools out there. If you just do CSS color in a Google search, you'll get a ton of them that will hopefully inspire you in some color choices. So I'm going to select this. Now back at my code,I'll say color and paste it in there. You'll notice that when I copy out of there, it was uppercase for the letters in this. It does not matter. It's case insensitive. I will just make my lower case to be consistent. I can also change my font family names to be lowercase if I want to keep that consistent and then save. So you can see, you can mix all sorts of values. You can have RGB, HSL,HSLA, hexadecimal. Any of the values will work for these colors. Save that, refresh here. Now you'll see we have some more colors on our page. Well, what if I want to change all of our text color at once? What if I want to override the browser's styles and make everything on our page to be one color? Is there a way I can do that besides just targeting every single one, the p, the H1, the H2? The answer is yes. Wouldn't that be mean if the answer was no? Don't worry, it's yes. So what we can do is instead of defining our properties on something like our paragraph or H1 or H2, we have something else we can use. Right now we've just been applying color property to the tag that's been surrounding this specific text, but we have another tag that's surrounding our H1 or H2 or paragraph text. That's our body element. Just like our H1 or H2, we can also apply styles to the body. So going back over here, for right now I'm going to remove our color properties. Then I'm going to add a new one. I'm going to add it to top of the page, and that's going to be for our body elements. So now in the body, just like any other tag and in any other selector, I can say color. Then I can use one of our keywords if I want here, like green. I'm going to save and go back to Chrome, refresh and now you can see minus the links which are being controlled by the browser defaults and minus the text in the logo, all over text is green because it has cascaded down to all of our elements. So that's one of the ways that we can use the body tag to apply styles. Another thing we can use the body tag for is to change the whole background color of our page. So right now we have this really bright white and maybe we don't want that. What we can do is change another CSS property, the background color property. We want to apply that to our body tag because our body holds our entire page. So let's go ahead and do that. So now we'll use a new property, and that property is background-color: and then just like we were able to use our keywords or RGB or hex values, we can do the same thing for defining a background color here. So if I wanted to, I could say something like aqua. I'm sure that you all are imagining how beautiful this is going to look when I save it and refresh it in the browser. When I refresh, watch your eyes everybody. That is some bright web design, but as you can see, this worked. So we can use our body tag to control the general look of our pages, and then we'll be able to override later on if we need to. In this case, we may want to go back and tweak some of these values because, well, it's looking a little strong. Let's say I wanted to set it back to white. Well, I have a few ways I can do that. I can use our keyword value, which is the word white. I could use a hexadecimal value, such as number ffffff, which is also the hexadecimal value for white. We could use a shortcut, which would just be fff. The RGB value for this would be 255, 255, 255. As you can see, there's a lot of different ways to define our property values. Up to you whichever one you want to use. For right now, we could set it to white. But if you want something maybe a little less bright, just tweak that to a off-white color, in this case the hex value of efebdf, and you can see that that's a little easier on the eyes. I'm also going to change the color of our text from green to this hex value of 27211f. Save that, refresh, and now we're back to a traditional darker color. That's a little bit off black. Let's also change the color of our H1 because we want it to be different than our black body text. We're going to say color, and let's add the hex value here. So that will be e96f4b. Now it'll give us a little bit of like a salmon-ish, like a salmon pink red, and now will let us know that this is a larger heading. We could also apply that same color to our H2s if we want. So, we can either copy and paste this or rewrite it. We'll just copy and paste that right in. Now we've adjusted the colors for a lot of the elements on our page as well as our background color. So that's how we apply colors. Let's take a look at the next lesson at transforming our text in a bit more ways than just the sizes and font families that we've used so far.
11. Basic Text Style: So, let's take a look at some other text styling that we can apply to the words on our screen using CSS. Here's our About page and for our About Jon, we have a heading, an image, and we've got some text. Well, let's switch up the text a little bit. For example, what if we want to center our heading? What if we want About Jon to appear in the middle of the page? Well, we can do that. To do that, we'll be using our text-align property. So, our text-align property is text-align. We have a few different properties for this, but as we want our tech center line, we're going to use the value of center. Now, when I refresh the page, you can see that About Jon is now centered within our website. You can apply text-align: left or right or justified as well. So, say we wanted things on the right. If we just switch that to right, now you can see our text is on the right. I'm going to set that back to center, and I'm also going to make all of our h2 centered as well. So, now all of our headings that we have so far will appear centered on the page. So, saving that, and now you can see our h1 and our h2 are centered in the page. So, that is text-align. We can also have a property called text-decoration. The most common use of text-decoration is to underline our text. So, in order to apply text-decoration, it's text-decoration and then in this case, we're going to say underlined for our h1, and go back over and see how this looks in the browser. I can see our heading has an underline. There's a few other value, some of which are honestly a little bit more tacky than others for this one, such as others using our Inspector here to show you a few of them. We have other choices such as overline for line above our text, or we have line-through, and that provides some strikeout text. So, if you ever need line-through, overline, or underline, that is how you would do that. In this case, let's set that back to underline in our Inspector here so we can see how it will actually look. This is another property I like. So, I'm going to go ahead and copy it to the h2 as well. We also have a text-indent property. So, say we wanted to use text-indent to indent the beginning of all of our paragraphs. We could do that. So, in this case, I will say text-indent, and then a value such as 20 pixels. Save that, refresh, and now you can see that my paragraph text is indented 20 pixels. Remember, this is also applied to my paragraph footer copy as well. The last one that we're going to look at is text-transform. Text-transform allows us to do things like make our letters capital. So, we can say text-transform: uppercase. Save that. Now when I refresh, our h1 is all in uppercase. Other values we have for this are lowercase, which will switch all of our text to lowercase no matter how it's typed within our HTML, and we also have capitalize, which will capitalize the first letter, which happened to be how we wrote it within our HTML anyway. So, you won't see any differences there. So, there's a few looks of some more things that we can do with our text and how we can control them on our page. Let's look at a few advanced things in our next lessons, such as letter-spacing and line-height.
12. Advanced Text Control: Let's take a look at our paragraph text and make a few adjustments here. First, let's get rid of this bold, it's a little bit intense and we don't really need that for body copy on the page. So, remember we can either do that by changing this to font-weight normal but by default, our paragraph text was normal, so we won't need that. So, we can just remove that rule altogether and now you can see we are back to just Georgia normal weight text. However, I'm finding that it's a little bit hard to read between the lines and I'd like to separate this a little bit more. I'd like to add some air to this. Often you might have heard this referred to as letting, in CSS as opposed to having a letting property, we call it a line-height property. So, if I go on down to our paragraphs, I can say line-height and then I can set it to the value I'm looking for. So, right now our font size is 20 pixels, I could set it to a pixel value such as 40 pixels. If I come back over here and refresh, you can see that the line-height has greatly jumped up which is pretty cool but maybe a little bit too much. We can also do unitless values for line-height. So, if we set it back to one and refresh, you can see that we're back to being too tight. I can set it to a value such as 1.5 and now you can see that's a lot easier on the eyes, makes it easier for me to scan this and be able to read these paragraphs on our page. So, I like 1.5, maybe it's a little bit, maybe I want to go to 1.4, that's pretty good. I can read this pretty easily and it's really good especially if we have a lot of body text. So, I'm going to leave my line height for now as 1.4. But feel free to play around with the line-height value and tweak it to be more towards how you would like your readers to see your text. We have a few other things we can tweak when it comes to our text. If you remember, we made our About John heading all uppercase. When you make things all uppercase sometimes that can be a little bit tight and hard to read, so what we can do, is we can adjust the kerning values of this, and the kerning is the space between each letter. We don't call it kerning in CSS, instead we call it letter spacing. So, if I come back to my h1, I'm going to apply a letter spacing property and then again I can use different units of measure. In this case I'm going to say one pixel and that'll apply one pixel of letter spacing between each one of our letters. So, now refreshing, you can see that it spaces out a little which is a little bit nicer for our heading. The last effect text CSS property we're going to look at today is word spacing and just like it sounds, that will affect the space between our words. Let's apply it to our paragraphs because we have a few words within here. So, word-spacing and then just so we can see things in action, let's say 15 pixels. Well, that's a lot of spacing but depending on what you're trying to do maybe that is up your alley, you could get even crazier of course unlike 115, wow that's not easy to read at all but maybe you're going for some website installation art. So, just take note that property is available to you, I'm going to remove the word spacing because I want the browser to render it as it does as a default which is quite easy to read but that is how you would add word spacing to your websites. So we're looking okay here, you'll notice that one thing that hasn't been affected at all so far, is our list items over here. So, in the next lesson, let's look at some of the things we can do to change our list properties.
13. List Properties: So, looking at our list items, we want to give them some love too. Right now they just have the browser default styling. We can check out anything that's applied to them so far. So, you can see over here that they do have the color from the body but that's about it. So, lets change that because we want them to get some love too, and just like we are able to select our paragraphs, our body, and our headers, we can do the same thing with our list elements. So, taking a look at that, our professional services is a ul marked up with li's. So, what we can do is use the li element as our selector and style them accordingly. I'm going to go and ask the end of our page. I'm just going to do a few extra returns just so you can see what I'm typing easily up here, and here I'm going to write li, and then I'm going to write color, and let's tweak the color a little bit. Let's make them 666 which is a medium gray. So, there is our first list changes, and you can notice that the text and the bullet that we see here adjusted to be that gray color. You'll also notice that the bullets in our navigation unordered list also changed to gray because that is also an li element. Let's also change the font here. Let's set the font family to be Georgia, and let's set the font size to 16 pixels. Font-size 16 pixels. We will save that, and there is our updated list. But what about these bullets? What if I don't really like these items? Well, we can also change that with our list-style-type property. So, to change the bullets, we will say list-style-type, and then we can switch it to a variety of different choices. So, by default, it's a disc. We can also change it to circle, and now you can see are unfilled circle. There's also choices of things like square, and now we have square bullets. If you don't want any bullets you can have that too, and to do that you would say none, and now we have no bullets. But for now let's set it back to square, because it's hip to be square and Jon Arbuckle's world and in all of ours. So, now we have squared list items. If you are using an ordered list, you also might want to change the bullet for that. So, just so I can show you how that looks, temporarily, I'm going to make this an ordered list. So, to do that we just switch this to an ol, I come back here and I refresh. Everything should look the same right now, because instead of styling the ul, we style the li and li's are also in ol's. But now let's switch it. So, remember that if I took this off by default, ordered lists have numbers. So right now we have list-style-type decimal which is what things are by default with an ordered list, but we could also say something like decimal-leading-zero, and if we come back over here you can see that adds a zero before our numbers, we also have other choices for ordered list such as lower-alpha, and now our ordered list is alphabetically bulleted. We could also say lower-roman, and now we have lower roman numerals for our lists. So, you can see there's a lot of options for this. I'm going to set this back to square, and then I'm also going to set my about page back to an unordered list because in this case we are typing up an unordered list, and save that. So, that's a little bit more about lists, and in the next lesson let's take a look at background images and how we can start getting more images onto our page using CSS and not just the image tag.
14. Background Image: Our site looks okay with this off white background but let's say we want to get a little more interesting. Let's get some more images onto our page. Maybe we want an image for our background of our website. So, let's get one of those and we can link to images the same way we would on HTML with an absolute path or a relative path. Let's say I want to showcase some John's work and I'm going to showcase this image and I want it in the background of our page. Well, I can view image and I can grab the link from here and then let's add it to our website with CSS. So far, we've just applied one background property and that's been our background color but we have other values and properties we can adjust for our background as well, starting with the background image. In order to write a background image, we're going to write background hyphen image and then from there, we're going to have to tell the CSS where that image is, and we do that by writing URL and then in parentheses, we'll have the URL of which we're trying to link to. That can be local or arelative path or, in this case, we're going to link to an absolute path, a image file that exists somewhere else on the Internet. In quotes, I will paste this Wikimedia Garfield and Friends PNG, I'm going to save the file, and then let's take a look at it in the browser. Here I am, and I will refresh the page and wow. I thought we were busy before but now things have gone to a serious image party. As you can see, we have the image in here and the background image is repeating throughout in our entire site. No matter how large or small this is, we can see that the background image is throughout our website. We are able to adjust how this is repeating with another of CSS property, the background repeat property. Background hyphen repeat and then the values we have are the default one which is repeating, we can certainly tell that is what's happening now. Then another thing that we have is no repeat. So, if we switch this to no repeat, come back and refresh, you can see that the image is just on the page in the background once. Because it's in background image, all the text will sit on top of this. Backgrounds by default also start at the left position, a background position of 0,0 going from left and top values. We can adjust that as well by using our background position property. So, background hyphen position and then currently, it's 0,0, same thing as saying zero pixels, zero pixels. We can change this so it's something like 20 pixels from the left and 100 pixels from the top and now you can see it's moved over from the left 20 and from the top 100. We can also use keyword values for this so we could say something like center, center. Now, you'll see that the image is centered vertically and horizontally based on the width and the height of our page. We could also say something like center, top and now you can see it's centered from the top of our page. We can mix values, so something like center and 30 pixels and that will be centered left and right but then 30 pixels from the top. Different repeat values we have are no-repeat repeat, repeat hyphen X, and then it'll repeat along the X-axis, and then we have repeat hyphen Y which, as you might guess, will repeat along the Y-axis just like that through the top of our page. This is quite busy and a little bit hard to read so maybe we want a different kind of background image. Maybe we want just a subtle background image, maybe a noise pattern perhaps. We could do that, it's a program like Photoshop in which I've just applied a slight noise pixelation to a background color, I can then save this file out. So, I'm going to save this as a JPG and I can take the quality down some and that. I'm just going to save that right into my images folder and I'm going to call it bg-noise.jpg. BG just for me, lets me know that is a background image and it's a noise pattern. I will save that within our John Arbuckle site folder, inside of our images folder. Now, in our CSS, there's a post linking to this absolute image which is good because we shouldn't really be linking to other people's content because of copyright reasons and/or because they might remove it as we have no control over their link to Wikimedia so they could always change that file extension or delete it. So, let's make sure that we are hosting our own files. To do a background image URL, we essentially want to do the same thing as if we were linking to an image within our image source attribute. Currently, right now, we are in styles.css. We're going to have to go into our img folder and then load the bg-noise.jpg. We have to go into the img folder and then to go into a folder, we'll type our /bg-noise.jpg. When I save that and come back to Chrome and refresh well, so we can see that our Garfield image is gone and it's really hard to see here but you can see, if you look real close, that in the middle of the page, there is this background noise repeating Y. Let's change that because we don't want it to just repeat Y. Because this is a background pattern, we want to repeat both ways. So, I'll save that and repeat. Now, you can see we have a slight noise pattern in the back of our website. You can use any sorts of patterns like this, diagonals, stripes, circles, whatever is your favorite background pattern to add. If you like the noisy background images, keep that in too. But this is how we'll add a noise pattern or any sort of background image at all to our pages. So far, we've really just looked at our about page, let's see how our CSS is affecting the rest of our pages and see how we can make adjustments in the future for specific items. That's coming up in the next lesson.
15. Adding CSS Files Throughout our Site: So far we've really only looked at how the styles have been affecting our about page. But remember we're applying our cascading style sheets site-wide. So we need to see what it's doing to our other pages. So here's our homepage, and we can see that the styles have come along here too along with text indents, centering, underlines on our h2's, all of these are affecting our site-wide content. Here's our work page, and lastly our contact page. So, I started to look at this maybe we realize that we need to make some global adjustments. Maybe the centering isn't working, maybe the text indent isn't working. Maybe we want to make some adjustments and in fact center our heading. Maybe we want to center that logo image. Wouldn't it be nice if we could get rid of those bullets on top of our work or our about contact, or at least make them appear next to each other instead of as that list? Well, we can do these things. One way we can do this, is to apply our text-align globally throughout our entire site. So, instead of just applying it to our h1, what if we applied our text-align center to our body tag? So, text hyphen align, then it helps to spell align correctly, and then centre. Now you can see when I do that everything on this page is centered, refreshing the other pages you will also see that happen, and there it is there, and there. You can see this looks a little funny around some things on the others, so maybe we don't want to do that site-wide. You'll also notice that when we center things like our list items, some bullets are left all the way to the left, and that looks a little bit wacky. It seems like what we need is a little bit more control over things. Sure, we can go in and say alright all Li's let's align them left, and we can do that just by overwriting. So, we say text-align left, and then those go back but that's not really a solution to this either. What we need to do is control individual things like the navigation list separately than other lists on our page, or the heading and the header logo differently than our other headings. We're going to be able to do that using a few other CSS selectors that we haven't talked about yet, ID selectors, class selectors, and descendant selectors. So, let's take a look at how we can fix up our site to have a little bit more unique aspects throughout it, in the next lesson.
16. Additional CSS Selectors: So, instead of applying this text-align center globally, we want to apply it to our logo image. So, let's go back to our CSS and remove the text-align center. Instead, we want it just on our header image. So, so far, right now, we've just looking at element selectors. That means if we want to center this, essentially we have an image and an A to work with. We're going to want more than that, though. We're going to want to target just this link or just this image. The other thing we're going to want to do for text-alignment, is wrap with so far is this inline element. Remember we talked about both inline and block elements in our html class and anchor links and image tags are both inline elements, meaning they'll appear on the same line, as opposed to block elements which will do a hard line return. In order to text-align center things, we need to apply to a block-level element. So, we're going to go ahead and we're going to nest this anchor inside a paragraph tag. So, we're going to add some html. So, P and then your closing P. You'll find that when adding CSS to a page, sometimes it's necessary to go back and add container elements onto your html in order to style things correctly. We try to avoid this as much as possible, but sometimes you're going to need things like this. Then we have this paragraph that's now holding our anchor and our image. Going back to Chrome, remember we took things off. So, we don't have text-aligning anymore on this area, we just have a paragraph surrounding it. So, what we want to do is basically text-align center that paragraph. We don't want to do it for all paragraphs because then every paragraph on the page will be center aligned. What we can do is use a class. A class selector allows us to target one or more specific elements with a class attribute on it. In order to apply a class, you would just add another attribute. In this case, we'll say class equals and then the name of what we're trying to do. In this case, we're going to say class equals logo. We want to name things, things with semantic meaning. So, things that actually make sense to what we're trying to do. This paragraph is holding our logo, so it makes sense for us to call this a class of logo, as opposed to a class of, like, elephant face, which would have nothing to do at all with what we're doing and would just be confusing to you, your teammates, anyone that stumbled across this. So, let's go with something that has meaning to it. So, something like class equals logo. Now in our style sheet, we can apply styles to that class. So, what we can say is.logo, because that's how we do a class. Then just like we would any other selector, our curly braces, and then within that, we're going to apply our declaration. So, text-align center. So, anything with a class of logo will be text-align centered. When I go back and click refresh, nothing's happened. Nothing has happened because I did not save my updated contact page. So, let me make sure I save that, and I recognized that because the circle was here. I come back to our contact, I click refresh, and now the image is centered because our paragraph with the class of logo has text-align center applied to it. You can also apply the class of logo to something else, such as this paragraph here. Now, that paragraph will be centered because it also has a class of logo. Similarly, class selectors are ID selectors. IDs are very similar to classes in that we say ID equals as an attribute with the name of it, just like if you wanted to name something ID equals logo. Two of the differences are instead of doing.syntax, to say that if a class, we use a pound or a hashtag to say that we're doing an ID selector. You can only have one ID on a page. Because of this, it can be kind of limiting if you decide you want to reuse this for something else. I tend to use classes because they're more reusable and are easier for browser processing. But, if you see an ID on the page or if you take over someone else's code and notice ID's, it's important to know what they are doing. For now though, we're going to stick with using classes. Let's apply some more classes. So, let's also center these navigation items. We can do that by applying a class to them. We're going to apply a class here of nav, for navigation. Remember, they need to go in quotations which I just did wrong, and I was easily able spot that because it wasn't changing to yellow. So, class equals quote nav, end of quote. We now have a class to target this specific UL so that we don't have to have the styles that we want for our navigation on other more general, unordered lists within our document. So, now in our CSS, we're going to do another class selector, the nav selector because that's what we just named our navigation elements. I went with nav instead of navigation just because it was a little shorter and easier to type, but still quite clear what I was referring to. So, here again, I can say text-align center. Pop back over to the browser, refresh, and it's not working. It's not working because you might remember, I specifically wrote text-align left onto our LI's. We want to remove that because everything has been set back to text-align left now. We'll look a little bit of why that's happening in the next lesson, but until then, let's change this to text-align center. But again, we have the problem with the bullets. Well, what about if we just remove those bullets because we don't want them, perhaps, on our main navigation. Remember, we can do that with our list styling. So, list, style, type none, then, and out of our navigation, we have a text-align center and a list-style-type none. I come back over here. Again, we've run into the problem of nothing has changed. This is because I actually have list item type square right on an LI element, and the LI is closer than the UL to our actual text. So, we're going to have to override that, too. How we do that is by using something called a descendant selector. A descendant selector targets an element inside another element. So, we could say something like all anchors inside of P tags and target it by saying P, space, A in our CSS. That would make all anchors inside my paragraph tags the color red. You target it with a space in between them. If you wrote P and A without a space, you'd get PA and then the CSS would be looking for a PA element, which is not a thing. So, essentially, it says any anchors inside of a paragraph, let's apply the style to. Well, we can also mix classes and elements for our descendant selectors, so what we can say in this case, is any LI's within nav, and then instead of putting this list-style-type none up here, we want to move that into here. So, now we have find any LI's within a nav class and then remove the list style. So, now when we go back over here, you'll see those bullets are now gone because we've specifically overridden the LI style with the nav LI. That's how you would use a descendant selector. So, let's do one other thing with our navigation item. All of our links are appearing as block-level elements because a list item in LI is a block level. That means we have the hard return one after another. What if we want them to appear next to each other? Well, just like how we can say things are block or inline based on browser defaults, we can override those as well. So, right now, by default, our LI items are all display block. Display is another CSS property and one of which we can override. Even though, just like our list had bullets by default, we can override those, we can also override the display. So, instead of display block, let's make them display inline. Now, when I come back to the browser and hit refresh, they display inline just like our m tags, or our anchor tags, or our image tags. So, that's another thing you can override with your CSS. So, changing things from inline or block is something else we can control with our CSS. One other selector that we have is the universal selector. The universal selector selects everything on the page. To do that, we use an asterisk. The asterisk says apply this style to everything. So, if we wanted to make text decoration overlying on everything, we'd use the universal selector. We refresh that, and then, just like we asked for, for better or for worse, there are our text decoration over line on all of our elements. So, that's how you would use the universal selector. We saw that we ran into some things that may be unexpected. Things with inheritance and cascading. In the next lesson, let's look a little more about that cascade and cascading style sheets and see how it's working.
17. The Cascade: So, in our last lesson, we saw how we are yet to use descendant selectors in order to get more specific with our styles to make sure that our list items were getting the styles we wanted it to. This is what's known as specificity as well as inheritance and the cascade. These are all ways of which when we're using CSS, will affect the styles being applied to our pages. So, let's take a look at some of the things that can happen. Let's get rid of this overlying we have on our universal selector, that is a little bit bizarre. Let's just not use that at all. So goodbye to that. Now, let's talk a little bit about how things are being applied to our page. Right now, our colon is being applied to our body tag, and that is cascading down to the rest of the elements. Things like our paragraphs are nested within our body which means that it's inheriting the style from the body. Anything that's nested within another element, will take on those styles for things like color. So, since we're saying body color is 27211f, the paragraph also gets that color. This is what's known as inheritance. What we are going to do if we wanted to change the paragraph color to be something else, is we'd have to use specificity to say that a paragraph should be a different color. So, right now, there is this dark black color. Let's refresh that, get rid of that gray. But what if we just wanted our paragraphs to be green? Well, if we put color green, what will happen is the paragraphs will be green. Let's look at our inspector and see what's happening. Essentially, when the page loads, the computer really fast goes through and it starts at the top of our CSS document. So, it reads the first rule, which is applied to the body and says "Okay, let's make everything black color." Does that really fast? We can't even see what's happening by the time it goes to our paragraph tag and says "Okay, wait, now it says make all paragraphs green." So, it switches from the color of black to this color of green overriding the body tag. We can see in our Inspector here where it says "P color green." If you scroll on down, we actually see body color gray and it's being lined out. It's being lined out because it's being overwritten by the specificity of the color green that's applied onto our paragraph tags. So, it can show you how specificity is affecting the styles that are applied to our text. This is really important if you want to know what's going on. Maybe you're expecting this to be black, but it ends up being green. This Inspector allows us a quick way to see how the styles are actually being applied. What happens if we switch our paragraph and our body. So, right now, when we talked about that cascade, we said it went from top to bottom. So, first it said, "make everything black," then it said, "make all the paragraphs green." If we tend to say this, do you think are paragraphs will be green or black? Let's go back and find out. You can see that they're still green. There's a few things in play here. First, it did make them black because that's on the body tag. But besides just going from top to bottom, the other thing that's important when it comes to CSS, is how close or specific the element is that we're targeting. So, because the body is the parent of the paragraph and the paragraph tag which is being defined as green is closer to the actual text, the style that will be read will be what is being applied closer to the elements. In this case, the paragraph style green is closer to the text of the page than the body. So, another thing about specificity is the styles applied to its most closest container element will be the one that will be applied to the text. This is definitely a little bit tricky. There's a few articles I'll put in the resources for follow up on. Sometimes honestly, playing around with this and seeing how the order will affect your code, is one of the best things you can do. Right now, we see we still have this p class of logo applied to our text over here, and that's turning green of course because our paragraphs are green. What do you think will happen if we say that the logo should be red? Well, let's find out. Color red and now when we refresh, you can see that that specific one will be overwritten with red. So you can see that it tried to get the color green but the dark logo had more of inherent power than the paragraph tag. So, first, it was this black then it was green. But the dark class had more of an impact onto the styling. You can see in this handy article, we talk about most specificity value and least specificity value. Style attribute, then ID, then a class, then element, is how it works. You can see there's sort of a point system here. So, things have inline styling or IDs or classes, how that will be determined what style it will take. I highly recommend reading this article and also just again playing around and seeing how the different styles, classes, and order will affect the elements on your page. I promise the more you work on this, the more you will get used to this and it will all start to make sense. Let's look at how we can group selectors in our next lesson.
18. Grouping Selectors: So, we always want to write efficient CSS and code in general. Let's go back and clean our CSS up a little bit, and make sure all our pages are looking how we want them to. So, remember we applied the paragraph with a class of logo around our logo but we all did it on our contact page. So, let's go back and update our HTML to make sure that all of our pages have that same text. I'm going to grab it from the contact page, get a copy, and then I'm just going to update this whole line. Save, save, and save. It's a little tedious, but we know exactly what we need to add, so let's make sure we update those four pages. We also remember, we're taking a look at the class of logo. We don't really want the class of logo appearing there. So, let's get rid of that. So, let's remove this class of logo. There we go. We also got left with these green paragraphs, which we don't really want. So, we took a little bit looked at inheritance, let's get rid of that red, and let's get rid of the green, which is up here. Okay. So, things are looking a little bit better than how they were. So, you'll notice that I remembered to update the header but we also updated the navigation, right? I didn't make that update when I made that change. So, we need to make sure that we're adding the UL class of nav onto all of our ULs. You'll notice that a lot of HTML and CSS can seem a little bit tedious, but once you figure out what you're doing a little bit more, you'll be able to spot these roadblocks that pop up a lot. Things like troubleshooting, and things like forgetting to copy things over will become a lot more natural. So, currently, you'll notice that our H1's and our H2's both have a text-decoration underline. They also are centered on the page. How we've done that so far is by repeating CSS properties and values. We've been repeating declarations between here and here. So, on this one, we had the color was both same in color. They also share font-weight normal, their font-family, their text-align center and their text-decoration underline. Surely, there's got to be a more efficient way to write this. Otherwise, I probably would not be talking to you about it. But I am so let's say yes. If we want to apply the same styles to two different elements, whether that sets of an element selector, a class selector, an ID selector, any of that we can do that. How we do that with a comma separated list of selectors. So, H1, H2 and then curly braces. This means that the H1 and H2 will both receive whatever I put into here. In this case, I could remove color from both of these and just list to that property up there. I could also remove the text-decoration underlined from here as well as from here and also the text-decoration, the font-family and the font-weight are all being repeated. So, let me close that up. Put that there. Get rid of the font-weight, the font-family and the text-align. There you can see everything that was being applied to H2 actually was applied to our H1. So, more efficiently, I could have just written this, but I didn't know that until we went through this experiment and maybe all want to override something on an H2 here. So, let's leave that as it is, save and come back and I can see things look exactly the same because we are applying the same styles in just a more efficient way. We can also say something like background-color purple. Now, you can see that the purple is being applied to both our H1 and H2 proving that this is indeed working. So, let's say we had that, let's say we also want to apply that to our H3s. We can just keep comma separating list, so that all of our headings get at least this base tile. Then we can override. So, let's say that we actually don't want the H2's background-color to be purple. We can say we want it to be yellow. If we save that, what the browser will do, we'll go through and say let's make background purple and then remember the cascade. So, it hits this first and then it hits this. So, if I refresh it's yellow. If I move to this H2 on top, is it going to be purple or yellow? It's going to be purple. Writing this is the same thing as writing this. It ignores all the other commas, so it's just what you ever wanted as first. The cascade goes top to bottom and it says H2 purple first, and then H2 yellow. That's how that works in terms of grouping selectors together. You can use this where you find it more efficient to be able to apply the same style to a group of selectors. Let's get rid of some of these keywords that we have here because we don't really need those littering up our eyes. Let's also uncenter our heading. Our centered headings can be a bit of a distraction with most of our tech. So, let's remove that from our general heading, and now move things back to the left. Let's also get rid of this text transform on our H1. It's a little bit of yelling at us. I don't think we really need to yell about John at anybody. That's a little more under control. So, our About page is looking okay now. Less yelling, it's a little bit easier to scan and read down with everything left aligned with the CSS that we've made so far. Our contact page looks pretty okay and easy to read. Let's check out how our Home page is looking. So, it's looking okay. Maybe we can make a few adjustments here and there. Maybe we do want to center our heading on our homepage, maybe we want to center our image and H1 on our home page. So, so far we have one class to do that. That's our logo class except our H1 and our hero image isn't really a logo. So, if we want to reapply this logo class to other things, let's name it something a little bit more semantic. Maybe we can name it something like highlights showing that we're using this style to highlight this information. It makes more sense because now we're not just applying it to our logo. Of course, the computer will read this just fine whether or not you call it logo or highlight. But it'll be easier for us as humans to understand our intentions when we come across something like this. If you hand this off to client or teammate, if they see something like highlight, it will make more sense to them why you're doing this and what style guide you're trying to provide by naming something this way. So, when I go back into our pages and remember we removed the class of logo. So, we have to update highlight. We're going to do that all round, highlights is fun word to type. So that's fine, highlight and now let's also apply it on our Index page. For H1, we can do class equals highlight and then let's add another one of those highlight paragraphs around our image. So, P class equals highlight. Remember, we'll need this for centering this and then close this paragraph tag. Now, you can see that the top of our homepage has a lot more centered elements and it makes it look a little bit more like a homepage area. In advance, CSS, of course will be able to make more adjustments to this. But for now, we're looking pretty good with our text styles and our alignment styles. Perhaps we also want to change the styles for blockquote to recognize that it's something different. Let's do that as well. So, under our last element, I'm going to keep our classes a little bit separated from now. I'm going to write blockquote and here I'm going to change the font-style to italic. Come back here and now you can see that our font-style is italic which is something common you'll see when it comes to quotes. But we probably don't want Dr. Liz Wilson to be a quote. So, let's change that and we can do that. That is on our homepage and we're able to target this blockquote P, we can't use the sentence selector, right? Because that will get both Ps, we can apply another class. Basically, we are saying who this is that said this quote. So, let's just make it a class of who. Back to our styles.CSS right under blockquote, let's write who and we'll say font-style normal. This is how you override this cascade. So, now when we refresh, it sets back to normal. Perhaps we also want to change our footer so you can tell that it's a little bit of a different copy than our other text on our page. Maybe will make it a lighter gray and may be we'll make it smaller text. So, currently you'll remember our marker for footer is just a paragraph. Let's add another class to that. So, class equals footer. Come back to our styles and we'll say dot footer and let's change the font-size to 12 pixels. Now, it's way more obvious that that's footer copy and not general body content. We also have this call to action for Hire John for your pet portrait needs! Let's give that class and it's a call to action. Let's give it a class of CTA. We want it to appear a little bit different, so it grabs some visual attention. So, we'll say CTA and we could say something like font-weight filled and see how that looks. I can see it's a little more obvious that again this is a different type of content that we have on our page. In this case, a call to action. So, lastly, we have the Work page. You know what I'm saying this I'm seeing that really the text underlines are not working too well on the H1s. So, let's go back up and let's actually remove the text-decoration underline altogether and see how that works. All right. Well, maybe we do need it on some of the others or maybe we should tweak this. Here, we have an H1 and H2 and an H3, you can see that maybe it's getting a little bit hard to see what the difference is in terms of what the heading organization is. So, let's make some adjustments to that. Let's change our H3 to be a different color. Let's give it a darker color like the body text that we have. So, we're not really using was H2s. Let's just go ahead and change that to an H3. You don't have to define everything of course. We're going to say that the color, let's add the pound sign in front will be this dark blacker color again. Maybe we want to add the underline back to our H2s. So, actually let's get that H2 back. So, H2 text-decoration underline and that looks okay. Maybe we want to change our H3s and we want them to be italic. Maybe we want them to be italic and we want to change the font-family. Let's make the font-family here, Georgia. I mean come over there and there are our H3s. You can see that our images are appearing on the same line as our links. That's because remember they're both images and links are inline elements. We can adjust that in a couple of different ways. One, we could put the link tag within a paragraph text inside of just on its own. Or we can add class and instead of doing display in line we can make a display black. In this case, I want to go back into the H2 actually a paragraph text around it. Because we could argue that it could be a paragraph. So, let's do that. We're going to say paragraph, paragraph and I'm just going to indent down so we can see this a little better and I'm going to do the same thing up here for Read the Lasagna Chronicles. So, P tag, P tag. Now, when I come back and refresh, you can see that they're getting paragraphs styles and appear on the next line. I can also see that maybe our H3s are getting a little lost with the font-size, let's pump up the font-size a little bit. So, we can do font-size. Let's do 22 pixels and see how that looks. That's a little better compared to our paragraph text which still might be a little bit big. Let's change our paragraphs to 18 pixels to chill out a little bit. Let's go back and see how that affects the rest of our site. Remember, when you make one change in your CSS, it'll affect all around. Let's make sure that things still look okay. They do. They're still looking pretty good. We missed one link down here, so let's make sure that we add a paragraph text around that. So, for "Buy this CD" paragraph and paragraph. When I'm confused about whether or not I should add paragraphs to something like this I try to imagine if there wasn't a link here. If we were just typing "Buy the CD" that would be a paragraph text, so I can go ahead and put that within a paragraph, going to save that and come back. Now, our page is looking pretty good except for one thing. These purple and blue links which are pretty gnarly. So let's in the next lesson, look at how we can adjust our link element styles.
19. Link and Pseudo Classes: Last, we're going to want to look at styling our links. So, we have these purple and blue links, purple for visited links and blue for unvisited links, and let's make them more of our style. So, a link is just like any other element selector which means that we could target it by using its elements name, which is just an A. So, let's keep our links blue. It will be really quite obvious to everyone that it is a link by being blue, but let's make it not as intensive a blue. So instead, let's use 42a795, and you can go ahead and of course choose a different blue or choose anything else, a purple, yellow or red there's a lot of colors for you to choose from. So, let's just change our links, so there are different than the default. We'll save our file and then refresh, and now you can see that it's less of a blinding blue. Also, our purple links changed to blue as well. Well, we defined all of our A's to be new blue, we're also now defining our visited and our link states. Links have what's known as pseudo-classes and pseudo-classes is another concept. In this case we have pseudo-classes for our links. A-link is our default pseudo-class, so that's what a link looks like by default. A-visited would be how we supply a different color or any sort of text property for links that have been visited. Hover and Focus, can do similar things this would be a good comma-separated grouping selectors and that's what happens for Hover, it's when you actually hover with your mouse over a link, and Focus is when you use your keyboard to navigate to a link. Active is for when you're actually pressing down on the link before you let up. So, those are link pseudo-classes. So, let's see how we can add that to our style sheet. Something else that's important to note, is the order of which you define as important. So, if you're going to find them all, you have to do them in this order link visited, hover and then active. You can leave some out though, so you don't have to define it in a visited link. In fact, I will leave that one out. But, we can define a link, a hover and an active. We also actually don't need to write a colon link. Because by default, a is the same as the a-link. So, now let's add a hover state. So, we're going to say a hover, comma a-focus. We'll define our hover and focus at the same time, because they're going to have the same effect. We want to make sure that our keyboard users when they're using the keyboard to navigate through our links, can also see what link there currently on and about to visit. So for this, we can just change the color and let's make the color darker when we hover over it. I'm just going to use the value 5f6b69. You could use something like black or 333 would be a hexadecimal number for something darker. I'm going to save this, I'm going to go back. Now you can see, that when I hover over a link, we're defining the hover state. Therefore, changing what the link looks like. If I'm using my keyboard, right now I'm pressing Tab, and the first link on our page of course is our logo, so that's what happens when I tab over the logo, we'll get an outline. Then I move to our work and you can see that we have the blue outline and the great change, because we defined our focus state as well. This let's keyboard users know which link they are about to click. We can also define an active if we launch, so a-active and maybe we want to say something like ominous, the background color will be white. So now, when I refresh, you can see that right now, I'm physically holding down my mouse button, and during that moment is when you get the active state. So, when I release, I actually go to that page. There's my hover and my active. We're gonna remove active for now, so it's not something that we really need. But, if that's something that you want to do, maybe you want to add a little Easter egg of a gem for people when they click on your links, and to show them something when it's active, you can certainly do that. That's how we apply different styles to our link. Remember, you don't have to just exchange colors, we could also change things like maybe we want to take off the text decoration, so we can say text-decoration none and then maybe on hover focus, we can put the underlying back on, so text-decoration underline. You can see how this looks here, so when I hover over, the line appears. Maybe I don't want to do a color change then, I can just do an underline as I'm hovering over. I'm going to set that back, because I like to make my links nice and obviously, and I want people to know that it's a link, so we'll leave that underlined in there. That's how we're going to style our links. In our last lesson, we're going to look at some shorthand property, so how we can write things a little bit easier for things like; colors, and fonts, and background properties.
20. Shorthand Properties: So far, we've looked at sort of the long ways to write things. We did look at color shorthand a little bit. So, remember that for hexadecimal numbers, if the values are the same. So, 666666, skip to six there, we can actually just do a 666. So, that's how we would do color shorthands, but we also shorthands for other things like font properties and background properties. So, right now, we're currently saying that the font size on our paragraphs is 18 pixels, and the font-family is Georgia and Serif. We can combine this together by just saying "Font." So, font 18 pixels, Georgia, Serif will be the same thing as writing that, but that's how we would do shorthand for font. You can see it's still getting the same styles, but font 18 pixels Georgia. When it comes to shorthand, the order in which we write things is important. So, let's say on our h2s, we had font size 40 pixels, font weight is Bold, font style Italic, and font-family, Fantasy. I'm always looking for an excuse to use fantasy, so we'll use it in this demo. Let's come back over here and see our h2s were adjusted. Now, if we want to write this as shorthand, we can, but it's important that we write them in a certain order. So, we're going to say "Font," and the order for our font shorthand will start with font style, so Italic. Then, font weight in this case, Bold. Then, we're going to do our font size, so 40 pixels. If we have any line heights, we could also put that here, and we do that by writing slash. We could write that like slash 80 pixel line height. This is going to be very large, and then we will put our font-family, so Fantasy. So, again, just to see how this will look [inaudible] let's add the line height here, so you can see, and this is how we write it in a shorthand. So, if I delete all of this and we refresh, we can see their h2s are still getting the style. They're also adding that line height that we added, which is why it got a little bit bigger before and after the text, and so that's how we write our shorthand. If you forget how to write shorthands, don't worry. It's just a Google search away for a font shorthand, and you can see many results here. I like the CSS tricks ones, so I will come over here, and just see if that they will remind me the order, so font-style, font-variant, font-weight, and an example of it in use. So, italic, small caps, normal 13 pixel/150%, Arial, Helvetica, Sans Serif, so really nice resource for just making sure that you remember how to write your font shorthand. We can also write shorthand for our background. So remember, we have the background on our body to do the noise. So, instead of writing all of these, we can instead write background. We start with our color, so efebdf, then we write our background image. In this case, img/bg-noise.jpg. Then, we're going to say our repeat, and since we're repeating, we actually don't need the background position anymore, so we could just start it back at the top left, which is 00. But, if you were to do a background position, it would be at the end after your repeat. So, I'm going to delete that. We get rid of those four lines, refresh, and everything still the same of course, because we are cleaning that up. If I switch it to no repeat here, then you could see we just have them in that top hand corner. Remember, we can always change these values, so 100 pixels, 100 pixels, and now we see our square has moved over here, 100 pixels. It's kind of like a Word Waldo game trying to find this noise pattern, but that is where it is. So, those are some ways that you can write more efficient CSS by using these shorthands. In the next video, we're going to look at CSS comments.
21. CSS Comments: So you might remember in HTML we had HTML comments but we also have comments for CSS. So when we're cleaning up our styles a little bit, we want to add some comments. So first, we're going to move the body above the paragraph just because the body contains everything. So I want to have that first on our page. Now what I'm going to do is write a note for myself up here and I will write my note to say something like, "Styles for the body background". Now of course, this is going to try to be read by the browser, so I have to put something around it that makes the browser aware that this is a comment. In CSS, you write your comments with a slash, star, and then star, slash, and you can see in Sublimetext, it turned to gray. It doesn't matter whether or not there are spaces here. I just like to put spaces so it's easier to read, and these are really good for making notes for yourself. So maybe down here, I'm going to make a comment that says, "heading styles", and down here, I'll start getting into class overrides, because these are where we're using classes to override our general element selectors. You can leave as many notes as you want in here. Remember, it is possible for people to view your notes. If someone wants to view your source and view your CSS, they can of course see this, so don't write anything mean or don't write anything in bad taste because people could possibly find this. You can also use comments for commenting out certain sections of code if you want to see how things will look. So what if I'm like, "You know what, I don't really know if I want to have this color but I don't want to delete it either." So for right now, I'm just temporarily comment it out, come back over here, and now I can see how things look if they are in the darker body class color. I'm not really a fan of that so I'm going to go back and either control Z or just go ahead and delete these. I'm unsure about this font family fantasy, so maybe I want to comment that out. So I will comment this out, and I can also leave some notes for myself. Anything within the comments will be great out like this and you can note that's a comment, and I can leave a note here for myself that says, "font shorthand for example". Then if I want to tell myself, "Commented out because it doesn't look pretty." or something like that, and that's a way for me to know why I commented this out. Later on, before I go live with my site, maybe I want to remove all of these comments, but for now, keep it in and decide later if I change my mind about that fantasy. So this is why comments are really good. You could also make some comments for yourself on the top of the page. Maybe you want to leave comments for your color palette. So you can say something like- and remember you can do any formatting that you want, so maybe I want to do all caps so it's easy to see, and I can say something like the black color we're using is number 27211f, the coral color we're using is this: e96f4p. This could be a way for people to easily see the colors. In that way, if you change your mind, you could update up here too, and it's a place where people can quick and grab these values and plug them in. So the blue that we're using is in our A. Let's copy that out, and put it up here. That's just some notes you can keep to yourself if you are interested in using a color palette and maybe you want to change it later on, just something quick and easy for you to keep your CSS organized. Let's talk about browser support, kind of a bummer but something to talk about in our next lesson.
22. Browser Support: So, just like an HTML where we have different specifications, we have different specifications of CSS. There's been different versions and drafts and documents that say how browsers should read CSS. You can see that there's been different standards and drafts of CSS, things like CSS Level 2 and Selectors Level 3, that define the different CSS properties we have to work with. Selectors Level 3 became a recommendation in 2011 and has some high support amongst most modern browsers that we'll be using. However, not everything is a modern browser. Sometimes, if you look at the analytics for your site, you'll see that people are coming to your site from sort of older browsers, maybe not the newest version of Chrome on a Mac or Firefox on Windows. You want to make sure the CSS properties that you're using can be used and will be well-supported. Caniuse.com is a great site that tells you compatibility for HTML5, CSS3, SVG, and other things in regards to how they will look and react in a browser. We can take a look at the CSS column on the left. If there's a property here you're thinking about using, you can see if you'll be able to use it. We talked a little bit about different color values before such as HSL and RGB. You can see from this chart that in the latest versions of a lot of browser, there is support for this. But back in IE8, it does not support all of these CSS3 colors. This is important to know, if your site is being visited by a lot of people on IE8, you might want to use hexadecimal values instead. If you're okay with the people in IE getting a backup color or providing two values, so you could ride in the hex color and then on the next slide provide an RGB color. That's another way that you could tackle this problem. It's a little bit of extra work to make sure people in IE8 can see this and get the support, but that's up to you and your timeline for your project. Let's comment this out for now and say instead the background of my page, I want it to be RGBA and it was 255, 255, 255,1. Essentially, that's white. What we can do instead if we wanted to support older browsers, you say background number fff. What happens here is browsers that understand this, like IE8, will read this. Then when they get to this line, we'll just ignore it completely. For browsers that do support this or read this, apply it, but then override it with this value. That's one way to get around the older compatibility. We took a look at background images earlier and there's other sorts of background things we can add in CSS3, such as background clip or background size, and we can see the different support for things like that here as well. When you are playing around with new CSS properties, which I highly encourage you to do after this class, just make sure you're referring to things like caniuse.com to see what kind of browser support is available. In the next video, let's see some of the things we can use and wrap this up.
23. Next Steps: Well, that wraps up our intro to CSS. I hope you guys had a lot of fun. I certainly did, so did Steve over here. Don't forget that there's lots more properties we can add to our site. If you guys want to check out CSS3 Generator, that will start giving you some examples of things. We look at some text properties we control but we can also control things like text shadow. So, if we take a look at something like this, you can see here's an example of how we'd apply text shadow to our page. So, we could copy up this text hyphen shadow, five pixels, five pixels, two pixels, and then this X value, and apply it to some of our styles as well. So, maybe we want to apply this onto our headings. Well, if we do that, you can see, wow, that looks not good. But as you can see, there's a lot more stuff we can start to add with CSS3 and other properties. We also have things like CSS gradients. So, you can see you can play around here, adjust colors like this. If you double-click on this, you can change the color. So, maybe we want to remove some of these as well, maybe we want to add a gradient to our background of our page and we could do that if we so desire. So, let's say I had a gradient like this. So, if I had this gradient here, I can click ''copy.'' Come on over to my CSS, go up to my body and instead of using this background, let's comment this out and paste in the CSS generated code here. Come back to my site and now you can see the background has this gradient image. Of course, I'll say it's important to understand what the CSS properties you're doing, but I also think it's fun to see what you can do and the sort of different properties we have to play with. So, I think it's important for you guys to know what's out there, know that there's a lot of cool things that we can do with CSS that go beyond what we did just today. So, I hope you keep trying out some of these rules, go back clean up your CSS, clean up your HTML, make sure things look efficient and legible, and try switching things. Try switching colors, try switching font sizes, and see the combination that you would like to use for your resume, and styles that you think would fit Jon Arbuckle perhaps differently than what we did here today. I hope to see you all in the next class where we talk about advanced CSS for layout and positioning and get to dig a little bit deeper into what CSS can do. Until then, I hope you have a lot of fun adding lots of colors and fonts to make Jon Arbuckle, or your portfolio site super awesome. Till then, I will see you next time.
Jenn Lukas, Front-end Developer and Consultant
