Welcome to my Website!

What do you want to learn? Leverged jhuang@tampa.cgsinc.com Skip to main content Pluralsight uses cookies.Learn more about your privacy Introduction to CSS for Designers by Susan Simkins In this tutorial we'll learn how to use CSS to style a resort website from scratch. Software required: Adobe Edge Code, Google Chrome Browser. Start CourseBookmarkAdd to ChannelDownload Course Table of contents Description Transcript Exercise files Discussion Learning Check Recommended Introduction and Project Overview Introduction and Project Overview Hi. I'm Susan with Digital-Tutors and this is an introduction to CSS, or Cascading Style Sheets. In this course, we'll learn how to style text by changing the font properties, about how fonts are pulled into a site, and best practices like using font stacks and web safe fonts. We'll also learn how to have increased control over our fonts by using externally hosted fonts. We'll use pseudo selectors to target interactive content like links, and all about adding space between elements using margins, paddings and understanding the box model. We'll learn how to keep our page centered automatically in the browser window, style complex elements like tables and forums, and even how to spice things up by adding a full screen background image. So let's get started in our next lesson by setting up our project and our CSS. Introduction to CSS Setting Up Our CSS In this lesson, we'll be going over our project in creating and setting up our CSS. We'll be using Adobe Edge Code Creative Cloud for this course, which you can grab the Creative Cloud application or, if you don't have a subscription to Creative Cloud, you can also come to this website, Brackets. io, and download the open-source version of the exact same thing. It has all the great features we'll be using throughout this course, so you won't be missing out on anything at all if you download Brackets instead of the Creative Cloud version, which is Adobe Creative Code Creative Cloud. So, the first thing I want to do is open up our project. If this is the first time you've opened Adobe Edge Code, you'll be seeing a project called Getting Started, so let me come over here down to this dropdown menu and navigate to our project file, so that 02_begin folder. Inside, we have a couple of things here already in place. We have an images folder with two different images, and we have this index. html and reservations. html files as well. So I'm going to drag this over so we can go through this in both views. We use this live preview feature, which is going to be using Google Chrome to preview our HTML. So, if you don't have Google Chrome installed, this live preview feature isn't going to work, so you want to make sure and go ahead and grab that, which let's switch over to our index. html page. I mean, that reservations. html page, and we'll take a look at the HTML. We have an h1 heading here, and we have a paragraph of text, a figure with an image and a figcaption element inside. We have a couple of h2 headings, and unordered list which uses bullet points, and then we have an ordered list as well, which is this numbered list down here. At the bottom, we have two paragraphs, with the link to our reservations. html page, which if we switch over to this, you can see we have a table here with a couple of different rows. We have some table headings, some data in there. We're using a special character code for these pound signs to display, and then at the bottom we have a form with all kinds of HTML elements inside. We have labels, input fields, a field set with radio buttons, a date picker, and a text area, and then a button to submit our form. So, if any of this is confusing to you, any of this HTML, we build exactly this structure here in my Introduction to HTML course, so you can certainly go back and watch that. In fact, I recommend it, and you'll know how to build all of this from scratch just by going through that course. So we'll start, let's switch back over to our index. html course or file, excuse me, and let's take a look and see what we'll be building. I have this pulled up in Google Chrome as well, and we're going to be turning this vanilla default HTML styling into the styling you see on the left. We'll learn how to use all kinds of properties to change the font, add space between elements, the colors of links. And then our reservations page, we'll learn how to style this form to make it much more usable and pleasing to the eye, easier to read this table and things like that, so you can see how powerful CSS is for changing the look and feel that HTML has by default. So let's get started and add our CSS file or create our CSS file and link it to our HTML pages, and the first step for that is to create a styles folder. So, just like we have our images folder, where we add our images to keep things organized, we want that styles folder to store our style sheets. So, in this file pane, we can right click and come down here to create a new folder directly in Adobe Edge Code, and we'll call this styles. And then, inside of the styles folder, we'll want to create a new file and call it main. css because this is going to be our main style sheet and it kind of makes sense to describe it and call it main in that way. So, now that we've created our main. css file, we can attach it to our HTML pages. That way, the browser and the server know where to look for our styles. Right under the title and the head is where we'll want to add the link to our style sheet and the type for that is exactly that. We just link it to our page and we want to tell it where to look, so you've got a hypertext reference attribute, which is href for short, and we want to tell it the folder to look into. So Adobe Edge Code is pulling up the folders associated with our project so we can easily navigate to where we need to go, so we want to be in the styles folder and then use that main. css file, which is the only file in our folder. And we need two more attributes here. We need to tell it the relationship, what's the rel attribute, and it's a style sheet. So, inside the quotation marks we can go ahead and type that in. And then we also need to tell it what type of file it is, and this is going to be text and /css as our type. Now we can copy this whole code, which I'll increase this window so we can see this whole tag easily. So I'm going to hit Control-C to copy our link. I'm going to hit Control-S to make sure we've saved our index. html file. We'll switch over to our reservations. html file and we'll paste it directly under the title inside of the head of that page as well, that way we have our style sheet linked or attached to both of our HTML pages and will be affecting every page on our site and hopefully a couple more HTML pages. We just want to make sure we add this link tag inside of the head of every page the way you want to use that CSS file. So I'm going to hit Control-S to save this. If you don't know how to attach a style sheet or if you don't know the syntax of a selector, then you'll want to go watch our first day with CSS course and we'll go through all of this in a lot more depth and detail, and you can build the understanding and come back and start to use more types of selectors and properties in this course, Introduction to HTML. So now that we have our CSS files set up already to start adding our selectors, which we'll do in our next lesson when we begin changing the size of our text. Changing the Size of Text In this lesson, we'll begin adding our first rules to our style sheet to change the size of our text. So the first thing you want to do is make sure that you have the index. html file highlighted, that way our live preview feature will show our changes to this page, which is what we want to start with is our index. html page. And next I'm just going to come over here to our styles folder and then double click to pull it into our working files, which you'll see it's highlighted and right under our index. html so we can begin adding our first CSS. And I'm working out of the 03_begin folder so you can continue along from our last lesson, or if you're just joining in, you want to come over here to Open Folder and then navigate to the folder for whatever lesson we're on, so in this case 03_begin, and what I want to do here is increase the size of all of our text, and we're going to start with this first line of text here, Red Abbey Resort. So with our CSS rule, we want to choose whatever element we want to change, so if we look in here in our index. html file, it's that h1 tag that is marking up this first piece of content, so that's what we want to use in our selector. So I'm going to switch to our main. css file, and that's the h1 for our selector, so we're just typing in the tag name as our selector and then opening and closing our curly brackets, and you can see we've done the right thing, so if we click inside of our selector it's highlighting the correct element so we know this is what is going to change. And inside of here we want to add our property, which is the thing we want to change about our piece of HTML or HTML element, and we want to increase the size of the font, and the property for that is font size, so we can type in font-size, and then we'll want to put here what we want to change it to, what value we want to change it to. So I want to increase it to 42 pixels, so we can type in 42, and then pixels is shortened to just px and, as I added that, you can see it's already increasing our size. We just want to make sure we add our semicolon, because sometimes that won't work without it, so it's really important not to forget that. And you can see, as I added that, I'll just delete these last two characters right here. You can see, as I'm adding that value, it's increasing the size of our level one h1 heading. So, altogether, this is called a rule. We have our selector, which is the element we're targeting; our property, which is the thing we want to change about the element; and then the last thing is our value or what we want to change that property to. And then, altogether this is called a CSS rule. There's a lot of terminology there and it's really confusing to try to kind of comprehend all that terminology at once, so we'll be easing this terminology as we go along in discussing it, that way it'll hopefully start to sink in for you, but don't try to memorize it all at once. It'll kind of start to click and make more sense the more you use it and the more we go along, so I just wanted to talk about that real fast so you don't feel sad or stressed out if you don't understand all of those terms there. So the next thing we'll want to do is change our h2 heading down here, so we want to target that h2 element. I'm just going to just type in h2, open and close our curly brackets, and now we want to add our property, which is font size, so we're going to type that in, font-size, and we're going to change our h2 heading to be 27 pixels, so px for short, add our semicolon, and if you were watching over here on the right, you can see that this is now increased to be 27 pixels. The last piece of text we want to change is our paragraphs, and I want to increase them to be 18 pixels. So right under our h2 I'm going to target all of the paragraphs in our content, which is the p tag, open and close our curly brackets, and you can see, if we click in the selector, we'll be highlighting what we'll be changing, which is an awesome feature of Adobe Edge Code. It really can help you learn a lot easier what your code is doing. And then, inside of our p selector, we'll add that font size property and change it to be 18 pixels, and you can see it's increased the size of our paragraphs here. There's a couple of different units here that you can use for changing the font size. We're using pixels, but in your time with CSS you might see other units like ems or even rems, and don't worry about those right now because those are a scalable unit which is used mainly for responsive design, so that's why we're doing everything in pixels because I think it's really important to understand pixels before you move on to using other units which can change depending on the context. So, if you see those, that's what they are, is they're just different kinds of units for text. So now that we have all of our font sizes in place for our basic content, we have our h1 headings, our h2 headings and our paragraphs, so three rules altogether in our CSS. I'm going to hit Control-S to save, and in our next lesson we're going to learn how to change the font. Changing the Font In this lesson we'll learn how to change the font with the font family property. We're going to be using one font for our entire site, so how can we make that change to our site so that every element on our page is using the same font? Well, one way that we could do this is to apply individually to each rule, so we could take each selector we have in our site and apply it in each rule to that element, but this adds up a lot of unnecessary code. Since we're going to be using the same font, we can instead make that change in one place and have the same result and it won't be so tedious as adding it to each kind of element on our page, and it's also really easy to forget about something that way. So let's switch over to our index. html file and look through here, and what can we apply it to? What can we pull from our HTML as our selector that's going to make that change to every element we're going to add? One thing we can do is apply it to the body, and the body is where every visual piece of content on your site goes, so this is a really good choice for your selector because everything we add to our site is going to be affected if we target our body tag. So in our main. css file, right under our paragraph, we're going to use that as our selector, we'll use the body. So I'm going to open and close our curly brackets, and the property we can use to change the font is font family, so that's just font-family, and then I'll add a colon, and then what we want to put in here for value is the name of our font. Since we have a British resort here, I want to use a very fun, British-y font, which Gill Sans pops immediately into my mind as that font, so I want to use that. If you have a font that's made up of more than one word, you want to add that in quotation marks because otherwise the browser might get kind of confused and treat those as multiple fonts, each word as its own font, so you want to say these are together, this all makes up the same name, so we're going to add those quotation marks, and then our semicolon so we don't forget that, and then the name of our font inside. So keep your eye over here on the right, and I'm just going to type that in, just Gill Sans, and as I'm typing this in, you can see that there is no change on our site. So let's try a different font and see if this is going to change. I'm going to use let's say Calibri instead. As I type that in, if you looked, now the font of every element on our page is changing to use Calibri, so why is Calibri working but not Gill Sans? Well, the reason for this is because I have Calibri installed on my operating system on my computer, but I don't have Gill Sans installed, so since I don't have access to those files, it doesn't have that font information and it can't display it in the browser. If you were to type this in if you had Gill Sans installed in your computer, you would see that change, but that's why you might see it but I might not see it, so you want to be very conscious of this when you're using fonts on your site. So for example if you're mocking up a website in Photoshop, you can't come here to your text tool and just choose any font that you have available for you. You want to be thinking about whether another user might have that font as well. And there's some tricks and tips we can learn to get around this, to think about this and to understand what fonts we can use and what we can't use. So in our next lesson we're going to go over some of those fundamentals about understanding fonts for the web. Understanding Fonts for the Web In this lesson, we'll learn all about using fonts for the web. Just like in our last lesson, sometimes you'll be able to see one font but not another, so why would Calibri work but not Gill Sans? Well, the reason for this is because font information is stored in files, so just like you can use Photoshop, if you have Photoshop files and those are installed on your computer, well, fonts work in a similar way. So if a user doesn't at least have that font installed at their computer or access to those font files, then they're not going to be able to see the font you specified. So one important thing to think about is just because something looks good on your computer doesn't mean that it's going to be the exact same on all computers that are viewing your website, so you always want to be conscious of those other scenarios and how that can affect your content, and font is one of those huge things that you have to consider. So what font is used instead if the browser or the server doesn't have access to that font information that you specified in your CSS? Well, the browser is going to start looking for other options to use instead. If it doesn't have any options, it's going to use what's called the default font specified in the browser. So, for example, when we're creating our HTML, all our font is displaying using Times New Roman, and that's because our browser's default font for a serif font is Times New Roman, and so that's what it's using because we didn't tell it any other options to display the font as instead. So, if you don't want all of your sites to use Times or Arial, then what you want to do is specify what's called a font stack. And a font stack is basically this comma-separated list of fonts, so you're giving the browser multiple options to use just in case your first choice font isn't working or if they don't have that font installed on a user's computer, you're saying here are my next best choices. So this is an example of a font stack, and you can see it's essentially that, just a comma separated list of options for fonts, starting on the left, with your number one choice, followed by a list of backup options that you'd want to use instead. So Calibri would be your next best choice, then Helvetica, and then Arial, followed by your very last choice, which best practice is to have just a very generic fallback, that way if you don't have any of those other sans-serif fonts, at the very least use a sans-serif font over a serif font or a cursive font, or something like that nature, just a very generic fallback. So how do you know if any font is safe to use? How do you know that you can specify any of those fonts and maybe none of them will work at all? Well, there's a list of fonts that are called web safe fonts, and this is just fonts that are installed on most computers, so since most computers have these fonts installed there's going to be a greater than 99% chance that they're considered safe to use. A few examples of these web safe fonts are going to be fonts like Arial, Verdana, Comic Sans, things that are really commonly included with an operating system or a computer and you know that they're going to be safe to use, so at least you have that level of control, saying I know that at least in a worst case scenario I can use these web safe fonts for my font and they're going to work in 99% of cases, and you don't have to memorize this list. I would just do a search engine search for web safe fonts when you're creating your sites and at least test and choose a couple of these to use, so in a worst case scenario you know that this will look okay with your layout and not completely break the look and feel of your site. Now that we know a little bit about fonts, using fonts on the web, font stacks and web safe fonts, we're going to begin in our next lesson creating our own font stack to use for our site. Creating a Font Stack In this lesson, we're going to be creating a font stack of our own. A couple of lessons ago, we specified Calibri as the font that our site was going to be using, which you may or may not be seeing, depending on whether that is installed on your own computer. So let's take a look first before we start on our font stack by looking at how the browser default font affects our site. So I'm going to delete this Calibri value here and now it's going to be using the browser default font, so let's look at how we can change that, and, when we make those changes, how it affects our font depending on how we change our font family. To change the default browser font, it's done in the settings, so I'm going to come up here to this hamburger menu or these three lines and come down to our settings. If you scroll down here to where it said Show Advanced Settings, if you click on this, about halfway down you're going to see this section called Web Content, and if we click on Customize Fonts, it's going to allow us to change the defaults that are used for our browser. And this is going to be a little bit different in every browser, but this is where it is in Google Chrome. So, we have a couple different categories here that we can change, and the first one is the standard font. So if we don't have serif or sans serif selected as our generic category, then this is what is going to display. Right now you can see we have Times New Roman. Let's choose something different here as our standard font. So I'm going to scroll up here and I'm going to find Open Sans as my standard browser font. Now you can see that that's changed from Times New Roman to Open Sans over here, and let's change our serif font to something different as well. I'm going to change this to Adobe Garamond for my serif font, and then, for my sans serif font, just for fun, how about let's choose Aktiv Grotesk. I don't know how to say that, so it's probably completely wrong. Let's press Done and see how these changes affect our site. So I'm going to press Done. If we come over here now, you can see that that Times New Roman is now using Open Sans because it's pulling the information from whatever I set as my browser default font. But if I come in here in the font family and change it to serif, it's going to use whatever serif we specified is our default font for a serif. So now you can see it's using Adobe Garamond Pro, but if I were to change this to sans serif, it's using that one I can't pronounce, Aktiv Grotesk, instead for that sans serif, so it highly is dependent on whatever you specify in your browser default font. There's going to be settings there by default, but users can come in and change this to whatever their preferences are, so it's going to be highly dependent on what they've chosen to display. Hopefully that helps you kind of understand how that affects your site and how it pulls in based on those categories that you specify. This is different because it's using that standard font. If we use a sans serif, it's going to be the sans serif font we specified there, and so on and so forth. So I'm going to close our settings, and I want the last fallback for my font stack to be that sans serif, because I don't want a serif to display instead if that's what is set for that standard font. Now we have our sans serif font that's displaying. It will be completely different depending on what browser a user is using, or if they've changed that default to something completely different, like we just did. That'll kind of help you understand and think about how random that really can be, that generic category, but, at the very least, you can make a sans serif display over a serif or something like that. The next thing we want to specify in our font stack is a web safe font, because these are going to be shown on 99% of computers, so it's a good chance that a user's going to have that, and at least give you a next best worst case type scenario. So I'm going to use Arial as my next option. Now you can see Arial is displaying. And then, for the Mac, we're going to use Helvetica, as it's a lot better than Arial and if a user has Helvetica, I'd rather have that show for my site instead, so Helvetica. Now you can see it's using Helvetica rather than Arial. Now I'm going to use Calibri as my first choice, because even though that isn't web safe, it's still installed on a lot of computers and I'd still rather have that over Helvetica and Arial. So type that in, Calibri, and now I can see that's displaying for our website's font. The goal here, I'm going to add some spaces so this is a little bit easier to read. The goal here is to cover as many computers as possible with your font stack while still giving you the most control as possible, that way you're not just leaving it to chance of the browser default font, like so, "Oops, it doesn't have this one specific font "I want to use, so I'm just going to leave it "to chance what displays instead. " So you still have a controlled list of options here for your font stack, starting with Calibri, which would be my first choice, and it's installed on a good amount of computers, followed by Helvetica, which is installed on many computers. Even more have Arial, since that comes with Windows-based machines, and then, as a last option, at least a sans serif. But what if you're going through this and you're like, "I hate all of these fonts. "I don't like any of these web safe fonts "and I want a lot more control over what's displaying. "I don't want to leave this to chance. "? Well, there's another way we can specify fonts in a website, so in our next lesson we're going to go beyond web safe fonts and talk about using externally hosted fonts on our site. Beyond Web Safe Fonts: Using Externally Hosted Fonts In this lesson, we'll learn how to use externally hosted fonts for our site. Once upon a time, web designers were only limited to using web safe fonts to insure that they have a font displaying that's going to work for their layout, but thank goodness now we have more options for using fonts, and one way to do this is using externally hosted fonts, which is a way of providing the font information with your site so that you have more options, it's going to be included with your site files and you're going to guarantee or almost guarantee that you can use more custom, fancier fonts in your site. So we're going to learn a couple of different ways of doing that in this lesson, and one of the ways we can do this is directly in Adobe Edge Code you can see this nicely-standing out, bright green button over here, and this is going to use Adobe Edge Web Fonts in your site, which are some free fonts for everyone to use. If we come over here to font family and if we start typing in here, it's going to pull up a list of options, and we have this last one, browse web fonts. So, if we click on this, it's going to bring up Adobe Edge Web Fonts directly in Edge Code, and we have a couple of different things we can do here. We can sort and choose whether we want one that's good for headings or paragraphs, sort through different categories, and narrow it down to what we want to use in our site, or you could search for one if you already know which one you want to use. I'm just going to scroll through here and choose something because this isn't going to be how I choose my final font. We'll just see how this works. So let's say we want to use Bitter in our site, we can press Done and it's added the name automatically for us, so how it needs to appear. And the next option is we'd want to come over here to this little teeth for our font and it's going to give you some code for your site. And you can see here it says, "Add this tag to the head section of our site, " and so if I hit Control-C to copy this and press Done, you'd want to add it to the head of every HTML page in your site. That way, that information is going to be pulled into your site using that script, JavaScript. If I press Enter, we could add that underneath our link and I'll scroll over so you can see this better. We have these two little scripts here that are pulling in that font information for our site and you can see it's pulling up the Edge Fonts website with all that font information. And this is externally hosted, meaning another source is storing that information for us so we can pull that in from another location to use on our own site. And as long as the server still exists, then there's a very good chance that the user is going to be able to see that font. So I'm going to press Control-Z because I want to use a different font service for my site and I'm also going to delete that Bitter out of my font stack, which it replaced Calibri, so I'm going to type that back in. And what I want to use is Typekit for my font, which Typekit is included in your Creative Cloud subscription and it has a lot more options than Adobe Edge Code. So, although it isn't free, it's going to have a lot more options for our font. And the font I used in my mockup in Photoshop is available through Typekit, and that's called Effra. So I'm going to type that in, E-F-F-R-A, and pull it up. And, once this loads, I want to press this green button to use the font on my site, and we want not for the desktop but for the web. And with Typekit you want to create a new kit so we'll go through this process real fast so you can see how to do it. The first thing you want to do is give your project a name. So I'm going to call this Red Abbey Resort because that's the name of the website we're creating. And what we want to do in the second option, the domain, is something a little bit special here. And these fonts are not going to work unless they run through a local server or a server of some kind, and luckily our Adobe Edge Code has a local server that comes installed with it. So, in our live preview, you can see the IP of our local server here, so I'm going to come in here and copy this. And I come back to Typekit, and let me pull up that other window, and paste it directly into our domain. So I'm going to delete out that HTTP because we just want this little IP address here. So this is going to allow our font to render through our local server and we can see it in our local version of the site. So if you're publishing this live, you'd want to type in the domain name here. So, for example, if we had redabbeyresort. com, we'd want to add that is our domain name so we can see it there as well. But I'm going to delete that because we're just working locally on our own computer right now. I'm going to disable this badge here which will show a little badge saying you got your fonts from Typekit. I'll press Continue. And we want to copy the code from the section here so I'm going to hit Control-C, then make sure we get that code and press Continue. Again, under this section I want to select all these options because I want to use and have all these weights available in my site, which if you have any that you don't use, then you're going to want to not include those in your kit size because it's going to add to your loading time, so you want to be careful about that. And you can use all of these at first, but if you come back and find that you're not using one in your final site, it's a good idea to take those out. So, I'm going to publish this and it's going to distribute it across their network. Once this loads, it's going to be available in our site. So I'm going to exit out of here. We can come back to our site. And then once again we want to come over here in every HTML file and add that script. So I'm going to hit Control-V to paste that script for Effra font, hit Control-S to save, and do the same thing in our other page, reservations. html. So right under the link for our style sheet, I'll add those two scripts, hit Control-S to save, and now we can come over here in our style sheet and use that font, so we'll go over here. Well, you can see it's broken our live preview since we've made some changes, so I'm going to pull that back up. So if you see something that's not happening, if your little lightning bolt isn't orange or yellow here, then it's that live preview link is broken, but now it's working again. So if we come over here in font family, we can expect to see Effra when we type this in. So I'm going to type in Effra, E-F-F-R-A. Press R comma and we now have Effra displaying in our site. So this is a really cool way where we can really have a lot of control over what font is displaying on our site. We don't have to leave it completely to chance, but we have the other options at our font sect just in case if someone has JavaScript disabled or something like that, that we still have those fallback options as well. But this externally hosted font is going to work in most situations and we don't have to be stuck with using something like Arial, which is, in my opinion, just a horrible, horrible font. So, I hope you enjoyed seeing how to use other fonts, and in our next lesson, we're going to learn how to change more font properties on our site. Changing the Font Weight and Using Text Transform Now that we've chosen the font we want to use in our site, we're going to learn how to change other things about a font like the weight it uses and its case. I have the mockup I created pulled up real fast so you can see what weight I'm using for the mockup I created. You can see it's very nice and light and that's because I've used the light weight of the font. You can see, if you come up here, we have a lot of different options here and I want to use this version right here instead of the regular version that shows by default. So I'm going to switch back over to Adobe Edge Code and you can see in fact we have that normal weight using for most of our content and our headings are using the bold weight. And this is because the browser by default adds a bold weight to any heading in your site. So let's see how we can change this. So if we come in here to our h1, let's come down underneath our font size and we can change the weight of a font by using the font-weight property. And if I add the colon, you can see Adobe Edge Code is pulling up the list of options we have here, and we have a list of numbers and we also have some keywords we can use as well. So these numbers go from 100, which is the lightest weight of a font, all the way to 900 which would be the most bold version of the font, which is usually the black version or the bold version. And down here we can use keywords, which is going to be the browser's interpretation of that keyword, so it's not the most specific thing you can do. It's an okay way to change the weight, but if you can use these numbers, if you know which one you want to use for your font weight and you have that available, then that's a more controlled and specific way of changing the weight. So if we change this to normal, it's going to show the default weight of the font. So if I change this to normal, you can see that's exactly what's displaying. And if you're ever using a font for your headings and you're noticing that the headings look kind of funny and blurry and maybe even kind of ugly, the reason for this is because the browser will make its own version of a bold font weight if it doesn't have it available in the font you're using. So, for example, if we have the bold version of Effra, the browser is going to try to create its own. So you can imagine how hideous that can really be, so you want to be really careful and it's always a good idea to have multiple weights of whatever font you're using in your site. So I want to use the light weight of this font, which is 100 for that number. So, right here, instead of adding it to h1, I want to use that to all of the headings, so I'm going to delete this and we're going to add a new selector right under our h1 and h2. So right here I'm going to add the h1, the h2, and then my curly brackets, and just for a safe bet I'm going to add all the other headings as well. That way, we're covered if we come in here and add additional headings in our site where they're all using that same weight and we don't have to add it into our CSS again. So I'm going to hit font weight and then a colon and change that to 100. So now you can see all of our headings are using that nice, light and airy weight of our font. And the other place I'm going to add this is in the body and just so we have it in our paragraphs as well, so I'll paste that in, and now everything in our body is using that nice, light weight of the font, which is exactly how I have it in our layout. It has a very nice kind of light and airy feel to our text. And the reason I added it both here and both in the headings is because the browser's desire for the bold headings takes over this. So if I hit Control-X to paste this, you can see that even though we've said that everything in the body should use the font weight of 100, the pesky browser is still making it bold instead. So we need to specify that here, and here as well, so you want to be careful of cases like that, too. So I'm going to hit Control-S to save. And the last thing I want to do to our headings is, since this is all using the same weight of font, I'm going to make my headings on caps so those headings still feel nice and heavy even though it's using the light weight of a font. So in this same selector here for all of our headings, we can change the case of our text by using the text transform property, so I'm going to type that in, text transform. And if we add our colon, we'll have a full list of things we can do here. We can change all of our text to be lowercase. We can capitalize it, which is just how text appears by default. So what's supposed to be capitalized is going to be capitalized or we can make it all uppercase, which is what we want. So I'm going to make that uppercase and you can see it's automatically taken everything inside its tag and made them uppercase letters, which is really cool because if you are going through and typing stuff in your HTML, you don't have to hold shift and type things that way. The best way to do it is this way and do it directly in the CSS, so that's perfect. So now we have our headings nice and light, all of our content is using that nice, light weight, and our headings are displaying is uppercase using this awesome text transform property. So, now that we've learned about font weight and text transform, in our next lesson we're going to learn how to use pseudo selectors to style our links. Using Pseudo Selectors to Style Link States In this lesson, we'll learn how to style links using pseudo selectors. Overall, our content is starting to look pretty good, so we're going to move on and style a different kind of content, which is our link here at the bottom of our page. And links are a little bit different from other kinds of content in that they're interactive. So, our headings and our paragraphs, our lists, things like that are pretty static, but our links are different in that people are going to be clicking on them. And there is a different kind of selector we can use here to style those different interactive states related to links. So right under our body we're going to target our link, which is an anchor tag, then we need a colon and then the word link after it. So target an anchor tag if it's a link. So your anchor tag, if it has that hypertext reference attribute, that href, that's what turns it into a link to somewhere rather than just an anchor tag, so we're going to be targeting that a if it's a link as well. So we're going to add our opening and closing curly bracket and we're going to change the default color of our link. So I'm going to type that in and we're just going to use red right now as a placeholder so we're going to be using the quick edit feature of Adobe Edge Code to target that color. So, as I add in that red, you can see we go from the default blue to now using that red color, so we're targeting that link. So I'm going to hit Control-E and it's going to pull up this quick edit menu in Adobe Edge Code. This is really a cool feature. This text editor, we can edit our colors directly in here without having to switch out to another application or use something like a key code here, which is kind of inaccurate. Each browser has its own interpretation of a color key code, like red or turquoise or pink or something like that. So you want to be more specific here. And on the right you can see we've pulled in some cooler themes or I have some cooler themes being pulled in that are associated with my Adobe ID. So if you have some cooler themes you've created, you'll see them here as well, which is another cool feature. You can create a swatch in cooler and then pull it in here and easily use those color values without having to copy and paste anything into your text editor, so this is really, really awesome. And I've created one specifically for the links here at the top and I want this left color here, which if you want to use the hex code value, it's #a86d93, or I'm going to use the RGB value because I think it's a little bit more human readable than this hex code format, which is kind of just a string of characters. So RGB, that's Red, Green, Blue, and I really like this format better. So when you're creating your own style sheet, so you just want to choose one format for your colors and keep it consistent, so I'm going to choose RGB and continue using that for my colors. So I'm going to press X now that I have the color I want. And, if I look over here, you can see we have that color being pulled in for our links. It's kind of a light orchid color here. So now that the default state for our link is styled, I want us to target a different interactive state of our link, so right underneath here, I'm going to type in that anchor tag, a colon, and that's called the hover state of a link. So I'm going to open and close these curly braces and we'll see this in action right here. So if I hover over it without anything in here, so that's just taking your mouse and literally just hovering over it, you can see that there's no difference here at all other than by default our cursor is changing to that little hand picker there. But if I change the color to red right here, as I come over here and hover over it, you can see now that that property is being pulled in when we hover over our link and you can see it's a lot more interactive feeling just by styling that hover state. So it's a really cool feature of using this hover state of a link here and really doing a lot for usability and giving that extra visual cue for our link. So I'm going to hit Control-E in here and change it from red to this far right color, which is kind of a light pinky orchid, so that's #f49ed7, or the RGB, like I'll be using 244, 158, 215. So I'm going to press X to accept this, and as I come over here and hover over it, now you can see you have that nice, light pinky, purple color when we hover over our link. And one thing you just want to note here is you want your different link states to be visually distinct from each other, meaning that there's enough contrast in these different states for a user to be able to tell the difference. So, that looks pretty good. We have enough contrast between our two colors here that you can really see that when we hover over our link. The next state we want to target is called the active state. And when someone's clicked on a link, that means it's active, so we'll just see this in a couple of seconds so I'm going to type in that a, our colon, and then the active state of our link. So we'll just change this to that color red and I'll add this semicolon. And now, as I'm clicking on this link, I'll just click and hold, you can see it's active and that means it's being selected. So as I click between these links, for just a second you can see that it turns red and that's its active state, which we don't want to leave it as red, so I'm going to hit Control-E, bring up this quick edit menu, and I'm going to use the second to the right color, except we're not going to leave it at this color because I don't think there's enough of a contrast there. I'm going to drag this up in to make it kind of a bright fuchsia color, which is that #f714ad or RGB 247, 20, 173. So I'm going to exit out of this and test this out. And, as I'm clicking on it, you can see we have that bright pink color. It doesn't look too bright and it's enough of a contrast between those other states. So, our last state for our link is the visited state. So after someone's already clicked on a link, it's been visited, so we can change the color or different properties, if you wanted to, about how a link looks after you've visited it. So, that's a:, and then visited. And I'm going to open and close our curly brackets and just for a second we'll change this to red so it makes it easier to pull up that color picker in that quick edit menu, so I have that red. Now we can see, after we've clicked on our link, it's now showing as that red color. So I'm going to hit Control-E to bring up this quick edit menu and I'm going to choose the second option and that's still blending in with that text. There's not much of a contrast there for that visited state, so I'm going to drag this up until I can see a good difference there. And I think right around there, that's a good enough difference between the rest of our content and our other link states. So that's the #eb58b3 or RGB 235, 88, 179. So I'm going to press X to accept that. And now you can see that that color is showing since we've already visited that link. But if I hover over this, you can see we don't have that hover state pulling in and that's because these selectors here need to be in a specific order in order for all of these to show up in the browser. And there's a mnemonic device for this called LoVeHAte, so LVHA. So we need our link state, our visited state and then our hover and our active. So I'm going to take our visited state, Control-X to cut it and paste it right after our first one, our a link selector. So now that I've pasted that, we have our a link, a visited, a hover and then a active, so LoVeHAte. And if I hover over this, now we can see we have that hover showing back up again and all of our selectors are going to be working. So just remember that little mnemonic device, LoVeHAte, when you're adding your link styles. And one thing to note here is these special selectors, you'll see they look different from these selectors up here, which these are called element selectors because they're targeting an element in your HTML and these are called pseudo selectors because they're targeting a pseudo state or an interactive state of an element. So, that's just one difference in these two different types of selectors in that terminology there. You don't have to memorize it, just know how to use it and know what it is when you hear that term used. So now that our links are looking pretty good, in our next lesson we're going to learn how to add space between elements on our page using what's called margins and padding. Margins and Padding In this lesson, we'll learn about the universal selector in adding margins and paddings to elements. As we've been changing our elements with our CSS selectors, you may have noticed that there are some styles that the browser already applies to elements by default, such as making headings appear in a bold font weight and already adding some colors and an underline to our link state such as that default blue color and the default purple color that shows after you've already visited a link. And there's a couple of other things that the browser adds by default and one of those things is really easy to ignore or not notice, but it's a space that occurs between elements by default. So, for example, the space between this heading here and the start of our list. And the space between those elements that's added outside of the element itself is what's called a margin, so let's remove the default margins from elements and see how this affects our page. So right under our a active selector, we're going to use a new type of selector that's called the universal selector and that's the asterisk and then we can open and close our curly brackets and we'll see what this does here in just a second. So I'm going to start by changing the color of everything to be red, so I'm going to add that red color again just so we could see what this is selecting here. And you can see that everything on our page is now using that red color except for the colors for our link because the selector is slightly more specific than this universal selector, so these styles are overriding the red color, but everything else has changed to use that red color. And that's because this universal selector is taking and applying whatever properties we put inside to everything in our site. So rather than the body, which would have a similar effect if we added that color of red there, you're actually applying it to the body element itself and then everything inside is inheriting those properties versus this universal selector is the same as typing out every element on your page manually and then applying the color red to it. So it's the same as saying h1 add that red color, h2 add that red color, paragraph add that red color, and so on and so forth, automatically pulling every element on your page and then applying that selector. So there's a little bit of a difference there. So, we're going to take this universal selector and remove the default margins that are being applied. So we're going to type in margin and we're going to set this to zero, so I'm going to put zero in here. And, as I added that, if you look over in our browser, you can see it's removing all of that space that's there, so all of the space between our elements is now gone and we've reset that. So you can see that there's already a lot of margins that have been applied to our elements by default. So let's add something else that's called padding and let's see how this differs from margins, because padding is another way of adding space to elements. So I'm going to delete this universal selector for now and let's select our h2 here and see how this affects our h2. So I'm going to target our h2, open and close our curly brackets, and I'm going to set the background color to be red so we can see the full width and height of our element. So background color red, you can see it's applying it to every h2 in our document, so these bottom two. And this is the default width and height of the element, so you can see our h2 element, even though it only looks like it stops here after our S, we can see that it really extends the full width of the browser. So the wider I make my browser, it's going to take up that full width, so that's the width and height of the actual element itself. So now let's add a margin to our element, so we're going to take this h2 and let's add a margin-top of 60 pixels, so I'm going to type in 60 pixels, add that semicolon, and, as we add that, you can see there's now 60 pixels being added to the top of our element. If we scroll down, you can see that our other h2 is also pushing away 60 pixels from the previous element in our document, which is our unordered list. So if we add a margin bottom to these elements, you can expect to see it pushed away from the next element in the document, so pushing away from the unordered list and from our ordered list 60 pixels. So, I'm going to type that in margin-bottom and add that 60 pixels there. And as I added that you can see that indeed now there's 60 pixels between the element and the next elements, which for this one is the unordered list, and for our second h2 is that ordered list. So now let's apply a padding to this element and see how this differs from the margin. So on the same h2 element, I'm going to come down here and add a padding top of 60 pixels, so padding-top and then give it a 60 pixel value. And it's added 60 pixels and it's also moved away 60 pixels, but you can see that this padding is actually adding that space inside of the element, so it's increasing the total height of the element, which is why we have this extra space because this background is applying to the whole h2 and now we have 60 pixels more of background on our element. So if we add a padding bottom of 60 pixels, we can expect to see the height increase on the bottom by 60 pixels also. So let's go ahead and take a look and see what this does. So padding-bottom and then 60 pixels and that will do the same thing. You can see that the full height of our element is now the default, which was whatever the height of our text was, plus 60 pixels on top and 60 pixels on the bottom as well. And with both margins and padding, we have four different values we can add here. We can add a value on the top, on the right, on the bottom, and on the left. So, for example, if we wanted to add a padding-left of 60 pixels, also you can see it will push away and move 60 pixels and it's going to increase the width of our element by 60 pixels, so, if I add that, you can see that's exactly what it's done. There's 60 pixels of space here on the left and the same with our other h2 as well. And this is kind of showing you something that's called the box model. So in our next lesson, we're going to learn about what the box model is and more about how margins and paddings work. The Box Model In this lesson, we'll talk about the box model and how it can help you picture how margins, padding and borders affect an element. The box model is really just a way of helping you visualize what effect margins, padding and borders have on an element. At the core of the box model, you have the element itself and it either has a width and height value that's automatically calculated by the browser depending on how much space it will need in your HTML document or it's set manually by whoever is writing the CSS using the width and height property. Affecting that width and height that's automatically calculated or set in the CSS, you have paddings which are going to increase the width and height of that core element. So you can increase the padding on four different sides, on the top, the right, the bottom and the left, and altogether, depending on what is added on each side, it's going to affect that default or calculated width and height. And on the outside of your padding or in addition to your padding you'll have borders and they're also going to increase that width and height of an element itself. And borders can be added on four different sides, just like paddings, so it can be added on the top, to the right, the bottom or the left or also on all four sides. Outside of the element, the padding and the borders, all which contribute to the full width and height of an element, you'll have your margins, and these just add space outside of all of those different factors that go into creating the width and height of an element. So, even if you don't have a background color, like for example you added to our h2 to give it that red background color, if you didn't have that background color, padding and margins really would look identical. They both look like they're adding some space and pushing away the element from other elements but, really, the padding is added to that width and height of the element even though we can't see it and margins is adding that space as well, but it's not increasing the width and height. So sometimes this can have a really funny effect on your layout, so it's really important to understand how each of these affect an element in each individual way. So to take a look at this specifically, let's say we have an element and our element has a set width or a calculated width of 100 pixels and a width of 400 pixels. And let's say we add a padding of 20 pixels on all four sides. So how would you think this would affect the width and height of an element? Well, if we added 20 pixels on all sides, we can expect to increase the height by 40 pixels so it would be 140 pixels and the width by 40 pixels as well, so it would go from being 400 pixels to having 440 pixels total width. And let's say we add a 10-pixel border to our element on all four sides as well. Well, how would you think this would affect the width and height of an element? Well, if we add 10 pixels to all four sides, we can expect it in total to increase the height by 20 pixels and the width by 20 pixels as well and that's exactly what will happen. It will increase the height to 160 pixels from 140 and the width to 460 pixels from that 440. And if we added margins, then they're not going to have any effect on the width and height of an element. It will just add that white space or extra space between whatever elements are surrounding our core element. So you can see how really this is just a bunch of boxes affecting an individual element. So you can picture that box and it will help you think of each of the four sides that can be affected and how this may or may not add to the width and height and how it will affect the elements in your document. And I know this can be really confusing and overwhelming at first because there's a lot of stuff that's new and a lot of things to think about as you're adding this, but this is a good starting point to just thinking and visualizing how you might be affecting an element when you add these different things to it. So that's just a little bit about the box model. In our next lesson, we're going to start to see the box model in action. The Box Model in Action In this lesson, we'll continue learning about the box model and see how it can be applied to our page. A couple of lessons ago, we took our h2 and added that red background color and added margins and paddings to see how it affected our element. So let's apply this to a different element and see how it affects it. So I'm going to delete the margins and padding we added and we're going to apply this to our paragraph instead. So I'm going to delete this h2 and type in a p and now I can see every paragraph on our page is using that background color. So, even though paragraphs are slightly different from a heading, you can see that there's still that box there in essence. So every piece of content we're wrapping in a tag is going to be put inside of a box on the page. So, you can see we have our two boxes down here, which are completely different, then the height of our paragraph is here. So it's going to take the full height it needs on the page. So if I increased the width of our browser window, you're going to see the width of our element's actually increasing to take up as much width as it can. So that's a pretty interesting thing to note as well. You can really see how that's automatically calculated by the browser, but we can also change this manually in our CSS. So right under a background color of red, as I come over here I can actually decrease the width of this element to be something very specific. For example, I'm going to use the width property so you can just type in the width. If I only wanted this to be 200 pixels wide, I could type in 200 pixels and you can see that now our element is only 200 pixels wide and it'll stay that 200 pixels wide that our text is going to take up. And now our height has increased to encompass the full amount of content here, so we're increasing the height that way, so that's really interesting as well. And if we added padding, so we're starting with that 200 pixel width, I'm going to use the padding shorthand, which is just padding, and if we specify one value here it's going to apply that value to all four sides. So if I add 60 pixels of padding, it's going to add it to the top, the right, the bottom and the left, in that order. So I'm adding that 60 pixels and you can see that our original element is still taking up that 200 pixels. But now we've added that 60 pixels of padding and our background is increased by that size on all sides, by 60 pixels on all sides, so you could really see, if we didn't have that background color, it might look like it was applying margins or something instead, but really it's having a different effect here. So I'm going to apply a border to this now so we can see how this affects our element. So I'm going to use the border shorthand to apply a 10-pixel solid border, which is just going to add a black border by default. So now you can see we have the original element we started with that we decreased its height to be exactly 200 pixels wide. We have that 60 pixels of padding on the outside and then our border is going to be added on the outside of that padding. So all of this together is considered part of the element but they're each having their own effect in different ways. So you have that core element, our padding added outside of that core element, and then our border on the outside as well, so that's really, really interesting. And if we added a margin to this, I'm just going to use the margin shorthand. If I specify one value here, it's going to apply it to all four sides. So I'm going to do 60 pixels here and you can see it's added 60 pixels of white space outside of the border, so you can really see the box model here in a very visual way, which is just really cool. So if I increased the original width of the element, what do you think is going to affect the element? How is that going to change this? Well, if we increased this width to 300 pixels, for example, we're going to see our original content take up that full 300 pixels and then we'll see the 60 pixels on the outside of that and then our border as well. So I'm going to change this to 300 pixels. And you can see that our height has changed because it's still adjusting to only take up the full height that it needs. We have exactly a 300 pixel width. That 60 pixels is added on the outside of that new 300 pixels as well, followed by a border, and then our 60 pixels of padding, so -- or, excuse me, 60 pixel margins on all sides. So hopefully this helps you visualize how the box model affects these elements in the browser. Even if you can't always see it happening, it's definitely there, and these are each affecting an element in a different way. I'm going to delete this paragraph here and we're going to start adding some margins now to the elements on our page to increase the amount of margins that are here by default, which we saw when we used that universal selector to remove all that space there. I'm going to leave that there because I don't want to go in through here. I think this is a good starting point. I'm just going to add a little bit additional space here instead so we don't have to go through and apply margins to every single element on the page, which can be pretty exhausting. The first thing I want to do is I'm going to come in here into our paragraph selector, since we already have one, and I'm going to add a margin bottom of 10 pixels and then a margin top of 10 pixels as well. So we're going to scroll through here and you can see that we've added the 10 pixels of space for our paragraph, so this is adding a little bit extra space between our elements. So, in addition to the paragraphs, I want to add 30 pixels of margins to our figure. We don't have a selector for our figure, so I'm going to add it at the bottom of our style sheet. And then, inside of this, I'm going to add a margin-top of 30 pixels and I'm going to add a margin-bottom of 30 pixels as well. So margin-top 30 pixels and then margin-bottom 30 pixels and you can see it's added a little bit of space between our figure and our h2 and then our figure and our prior paragraph here. And you might have noticed something funny here, when we added the margin to our paragraph here, for example, I'm going to take off this margin-bottom. I'm just going to Control-X to cut it. You can see that it's not having any effect at all, which might be kind of confusing and you're right because it is a little bit confusing and there's something funny that is actually happening here. When you have two margins applied to the same area, so, for example, if we have a margin-bottom here and a margin-top applied to the other element, they're both affecting the space between these two elements. What happens here is the largest is going to get applied. So one of these margins is collapsing and not having any effect. If I paste this in, you can see there's nothing happening because this margin is collapsing, there's no effect here. But if I increase this to be larger than the other margin in this area, larger than that 30 pixels, we're going to see an effect. So, for example, if I change this to be 60 pixels, you can see that now it's having an effect there, so that's really interesting as well. And does that mean we want to delete that 10 pixels? No, because if we don't have any margin there, that 10 pixels is going to be applied, just in this case, it's not going to be applied so we have a bigger margin being applied in that scenario, so that's really interesting. And you don't see that happening. It doesn't happen with a left margin or a right margin. It's only with vertical margins that you see that kind of funny thing happening. If you are applying a margin and you're feeling frustrated because it's not having any effect, then go and look through your other elements and see if there's a different margin applied to that same space on a different element, and that's where that's kind of occurring because that's something that happens and something to watch out for. I'm going to add a margin to a couple more of different elements. So right below our figure, I want to add a margin between our list items, because they're kind of cramped here so we're going to target that li selector to target those list items. And I'm going to add a margin-bottom to each of these list items, that way it forces a little bit of space between these. So margin-bottom 5 pixels and you can see that now there's a little bit more breathing room and it's easier to scan. It's not so tight in there. We're going to finish up by adding margins to our h2 and our h1. So, on our h2, I want to add a margin-top of 40 pixels, which add just a little bit of space between these elements now, and then, for our h1, I'm going to add a margin-top of 60 pixels. So margin-top of 60 pixels and you can see now it's not so close to the top of the browser window. There's just a little bit more space there between our h1 and the top of our document. Scrolling through it, I think all of this looks pretty good, there's nothing that really needs more space between it. So, in our next lesson, we're going to learn how to center our web page in the browser. Centering Web Pages in the Browser Window In this lesson, we're going to learn how to center a web page inside of the browser window. In our last lesson, you might remember, when we increase the size of our browser window, the paragraph always increases to take up the full width it can, and this is because we haven't specified a width for any of these elements so our paragraph is taking up the full width that it can and every other element is as well. So if I highlight the body here, if you come back you can see that no matter the size of our browser window the body is going to take up the full size of the window. And this has a couple effects here, which I'm going to stretch this back up. One effect is that our paragraph is going to take up the full width of the body. And this means, as people are reading our content, they're going to come through here and they actually read all the way down this line and when they get to the end, they have to come all the way back over here to the left side and repeat it for every line. So you can imagine how exhausting that could be, and maybe you've even noticed this yourself if you're using a very widescreen monitor it can be really exhausting to have to read content that stretches out that wide, and that's not really good. So we can fix that by giving this a set width. Another effect here of having no width or anything with our web page is that the content is always going to start here on the far left side. Especially if you have a widescreen monitor, you're going to always start here on the left and you have this awkward amount of space here on the right, which I think is kind of tacky. It almost makes me feel like I'm straining to read things all the way over here on the left. So one way we could fix this is by centering our web page in the browser window, which we'll learn how to do right now. So I'm going to just put this back here, and in our body, the first thing we need to do is set a width. I'm going to set a maximum width of our body, so we'll see what this does in just a second. So I'm going to apply a max width and I'm going to do about 1200 pixels, which I think is a nice, happy medium for a desktop-sized website. If we come over here to our web page and start dragging, you can see it's going to still have that flexing, so it's going to take up the full width of the window until it gets to 1200 pixels and then it's going to stop there. It's only going to take up a maximum space of 1200 pixels. And I like to use a maximum width rather than a set width, because if you're using a smaller screen then that content isn't going to be flowing outside of the window. So if I Control-X this max width out of here, we'll see how this is different. You can see now we have this tacky, horizontal scroll bar if we have a smaller monitor, which we don't want. You don't want to have to scroll over here every time you want to read our content. So that's why I like to add that max width in. The next step besides having a specified width for our body is to give it a margin, because the centering isn't going to work without that set width, so we're going to give it a margin using the margin shorthand. We're going to apply zero as our first value and then auto for our second value, and I'll explain what this does here. When we have two values in our margin shorthand, the first value is going to apply to our vertical margin, so we're going to be applying zero on the top and zero on the bottom. And then our second value is going to be those horizontal margins, so it's going to apply an automatic margin on our left side and the same on the right side. When the browser is calculating our margins automatically, it's going to put an even amount of margins on each side, which is going to have the effect of centering our page in the window. So if we come over here and drag this, once we hit that full 1200 pixels, you see we have our web page perfectly centered in the window. We have an equal amount of space to the left and an equal amount of space to the right. Especially if you have a really wide monitor, you don't have that effect of having it always start here flushed on the left and I think there's a lot less strain to read our content this way, so it's really good to center your website for this reason. I'm going to shrink this again so we can see this. I'm going to apply a max width to our paragraph as well. That way it's not too wide to where people have to strain and go all the way over to the left to read our next line. And I'm going to try about 700 pixels here and we'll see what this is like. So I'm going to come over here and look at our page, and I think that looks pretty good to me. If you're coming through here and reading this, I don't feel like my eye has to jump too much to read the next line. So, as we're changing the width up here, I've noticed that our figure here has an automatic either a margin or a padding here, so let's remove that so it starts in alignment with the rest of our content. It looks kind of awkward, jutting out here. So I'm going to shrink this back and we'll come down here to our figure and let's see what we have. I'm going to start by trying a margin first, so margin left zero, and you can see, that's exactly what the browser has done. So setting that to zero has fixed that little gap there. And if we increase the width of our window, now we can see that that's a lot cleaner looking to not have that sort of 60 pixels or whatever the value is, it's already added there. So you want to watch for those types of things as well. When we have the small size like this, our content is still kind of jutting up right with the left side of our browser window, and one way we can fix this is by adding a padding to our body. So, right under our margin, I'm going to add a padding of 60 pixels which is going to add 60 pixels on all four sides of our body box. So I'm going to add that 60 pixels and let's take a look and see how this looks. If I stretch the full width, then I think that looks pretty good. We don't have too much space anywhere and if we shrink our window it's going to have at least that 60 pixels of space on all four sides, so we have a nice amount of breathing room, a nice amount of space around our body here. So now that this page is looking pretty good, I think it's time to move on and start styling our other page, our reservations page, which is what we're going to do. In our next lesson, we start to style our table on our reservations page. Styling Tables In this lesson, we'll style the table on our reservations page. Now that our home page is looking pretty good, I think it's time to move on to our neglected reservations page. So if we switch over to this, you can see it's pulling in all the styles that we've added to our website so far. So when you are working on web pages on your own, you just want to make sure and switch between your pages and see what kind of effect your CSS is having on all of your pages. We're going to come over here to our main. css, and overall I think this page looks pretty good, but there are a couple of things I want to change to make this a bit better and we're going to start with our table first. Our heading for our table here, our guest rooms, I think it looks kind of small and very out of place because in our hierarchy of content it has an equal level of importance to our h2. It's marking the beginning of a new section of categories, so I think it makes sense to rather have this kind of funky styling where it's centered and really tiny to style it just like our h2 heading, so that's what we're going to do. If we look at our reservations. html, you can see it's marked up with a caption so that's what we can target to style that heading for our table. So we're going to target that caption tag and we're going to copy and paste the styles we already added to our h2 just to save us some typing here, so I'm going to paste those right in here. And there's a couple more things I want to do, one being I want to align this to the left and remove that pesky center alignment which really breaks from the rest of our content. The way we can do that is with the text align property, so text-align, and you can see we have a couple of different values we can do. We can center it, like it is right now, we can tell it to inherit that property from another element on the page, we can justify it, or we can align it left and right. I want to align this left, and now you can see it's starting with the left of our body here. I also want to use a text transform property to make this uppercase, just like our other heading, so text-transform, and then we'll just change it to be uppercase. So as I add that, you can see it looks pretty good and we're almost done with our heading, but I want to add a margin-bottom to this as well because you can see there's no space here, so this really feels kind of cramped. If we add a margin-bottom of let's say about 20 pixels, if you look up here, I think that looks pretty good. This amount of space below our heading looks pretty even with our other headings as well. So now that our caption looks good, we can move on and style the individual headings of our columns. Those are marked up with a th tag for table heading, so we can target that, and the first thing I want to do is fix the alignment for this as well. So even though these look like they're left aligned, you can actually tell that they're centered aligned because, with the shorter heading, it's being centered. So I want to keep that consistent so that it doesn't look so messy and change that text alignment to be on the left. So with that text-align left, now this already I think looks a lot cleaner. I want to add some space between these headings as well because they're really jamming up with one another, so let's add a margin and see how we can change the space in our heading, so margin-right, and the reason I'm using right and not left is because if we add that left, although it'll apply it to this element just fine, with our first element we're going to have a gap in the start of that element and the body, so we don't want that, and by doing it on a margin right, we won't be able to see the effect over here like we would over here. So I'm going to add a margin-right of 30 pixels and we can see that nothing's happening. The reason for this is because we can't add a margin inside of our table. We actually need to use a padding here to increase the width of these elements in order for this to work. So, if we change this margin to padding, you can see that now we have that space added to our headings, which is exactly what we want. Could you imagine how frustrating it would be, if you didn't really understand the box model well, to apply that margin and not know why it's working? Because, if you understand the box model, you know that if the margin is not doing anything, you could always try padding, and if you don't have that background, it's going to have that same visual effect and it's in fact doing something different here, we're adding to the width of our table headings here. So we've saved ourselves some frustration there. Overall, I think our headings look pretty good, so let's move on and style our individual cells. So, right underneath this, I'm going to target those, which is the td tag, open and close our curly brackets, and I want to add that same padding-right of 30 pixels here, that way, there's a good amount of space between our cells as well and we don't have these jamming up with one another. So padding-right of 30 pixels. It looks pretty good to me. And I want to finish up by adding a little bit more space between these individual cells, so, right underneath this, I'm going to add a padding-top of let's try 10 pixels, so I'll add that in and exit out of here so we don't have that highlighting, we can see pretty well. I think our table now is looking a lot better. We have a lot more space between these elements and our headings and it's a lot easier to scan and read our information rather than it kind of be all scrunched up and jumbled together like it was by default. So now that our table is looking pretty good, in our next lesson we're going to move on and style our form. Styling Forms In this lesson, we'll learn how to style our form for our reservations page. The first thing that stands out about our form to me is that our label here and our input fields are really jammed up next to one another. There's not much space at all between our text and our input fields. So that's the first thing I think that needs to be or could be styled better about our forms. So if we look over here in our reservations. html at our code, we can see what we can style to kind of make that change. We have our label here, which will affect this entire line or we can just target the input fields which will allow us to add some space to the left of that element, because our text right here, there's nothing we can do to apply it to the right of that since it's inside of this entire label field. So, we'll target that input, so I'm going to type in that input tag and we'll add a margin-left of let's try about 10 pixels. So I'm going to go ahead and add that and that looks pretty good to me now. We have a good amount of space between our input fields and the label for our input. I'm going to also add a little bit of padding here, which is going to increase the size of our input fields, because, remember, padding adds space inside of an element. So if we add the padding shorthand and add 10 pixels on all sides, if I exit out of here, you can see it's increased the size of our individual input fields. The reason I've done this is because it can look really small and cramped at that default size and I think it's a lot easier, especially if someone is elderly and they have maybe hands that shake a little bit, they can easily slip something that's bigger than this, and if someone is using a phone it will be a little bit easier just like these as well. So our input field overall is looking pretty good, but I'm going to pull this up in Firefox, that way we can see how this looks different in a browser, because while our form looks pretty good in Chrome, if I pull up this form in Firefox, you can see that the default styles for this browser are a little bit different and it's adding some what looks like a drop shadow to each input field, but its actually a border and I don't really like how that looks. I think it makes our form look really dated, so we're going to remove that. We're going use the border property and just set it to none, which is going to remove all of those default borders. So if I hit Control-S to save this and we come back over here in Firefox and refresh, you can see it's removed all of these default borders, which you might be freaking out because now we can't see our input fields at all, but we're going to apply a background color so we can still see this, so right under here, we're going to add that background-color and then I'm just going to use RGB 147, 147, 147 -- Oops, 247, 247, 247, so it's not so dark. And it's going to give us a nice, kind of subtle, light gray background, that way we can still see our input fields and we don't have that tacky border. So I think this looks a lot more clean and modern. So our input fields look good, so I want to come over down here and style this guy so it matches the rest of our input fields, because while this looks pretty similar, it's actually using a text area element, so we're going to target that text area, open and close our curly brackets, and inside of here we're going to remove that default border, set that to none and then change that background color to be the same kind of light gray, so RGB 247, 247, 247. So if I come out of here so we don't have that highlighting covering that up, that also looks pretty good to me. If we are increasing the size of our window, our field set is taking up the full width of our body and in a large size like this, it can look pretty tacky stretching out that full width. So if we set the width of that to be smaller, then we're not going to have that issue here. We're under a text area, we're going to target our field set and set its width to, let's try about 400 pixels, so use that width property, set it to 400 pixels for our value. If I come out of the selector so we can see this, you can see that I think that looks pretty good. It takes up just the right amount of width for all of our radio buttons in here to fit nicely inside. And if we increase our width, it's only going to be 400 pixels. It's not going to look kind of tacky and stretch out that full width. So the last thing I want to style about our form is our buttons that's using those default styles and it definitely looks really dated here. So we're going to target that button. It's just a button element. And the first thing I want to do is give it some padding, because it's a tiny, little button by default and I think it will look a lot better if we have some padding which will add space inside of the element is going to increase its background size. So if we add that 10 pixels of padding, you can see it's made our button bigger and I think that looks a lot, lot better already. The other thing I want to do here is it also has a default border, so I'm going to set that border property to none, so we remove our border, now it looks a lot more flat. I think it looks a lot more clean and modern here this way. So, it might be hard to tell, but I can tell it's using a different font here, so I'm going to come up here to our font stack and copy and paste this into our button tag or button selector as well. So right under here, under our border, I'll paste our font family and now it's going to be using Effra, just like the rest of our layout, and that already looks like it feels like it fits in a lot better with the rest of our site. Right under our font family, I want to change the color of the button from gray to match the color in our color scheme, so I'm going to set the background color property, so background-color, and I'm just going to set it to red to start so we can use that quick edit and use something from one of my cooler themes. I pulled up the quick edit by hitting Control-E and I just want this far left kind of orchid color. So I don't want the hex code, I'm going to use this RGB value so it matches the rest of the color codes in my layout. I'm going to exit out and if we look, I think that looks a lot better, except for now that black doesn't look so nice against that purple, so I'm going to change the color, which is going to target the color of our text and change that to white, which I almost used that key code, but I'm going to use the RGB value just so we keep things consistent. So I'm going to do about 250, 250, 250, which is going to be 100% white, so I'm going to hit that Control-E and maybe drag it a little bit down here, that way not quite gray, but just so it's not so harsh with our 100% white, and now our button looks a lot, lot better to me now. So the last thing I want to do to our button is, if you'll notice, it has no default hover state here. We have no default hover properties applied, so there's nothing to indicate here that there's interaction. Just like with our links, we can really improve this by styling that hover state of our button. So we're going to target that button and we can use that hover pseudo selector with our button so we can do button hover, open and close our curly brackets, and we're going to add another background color here to make it darker and kind of feel like you're almost pressing the button when you hover over it. So, background-color and I'm just going to type in red, so we can use that quick edit menu. I'm going to hit Control-E to bring that up and I'm going to start by trying this darker color, or how about this color? It's a little bit prettier than that one. And I'm going to hit Control-X. Well, actually I'm not, because I used the hex code, so I'm going to switch this back to RGB, so that will be RGB 117, 41, 90. And now we can exit that quick edit menu now since I've got my color code consistent. If we hover over this button, you can see that now that hover property really has done so much to style and to add that extra kind of interactive cue here for our button. So now, looking at our page, I really think that this page looks just as nice as our other one and there really isn't anything that I would want to change. So now that our pages are looking pretty good, in our next lesson we're going to learn how to add a background image. Adding a Full Screen Background Image In this lesson, we're going to learn how to add a full screen background image to our site. Overall, our site is looking pretty good. We have our content looking really nice and we've added some margins and paddings to add that white space between our elements, but I think there's something else we can do here because it's pretty plain and we have this black text against a white background, which is completely fine, but I think there's something else we can do here to spice this up, which would be to add a full screen background image to our site. The way we do that is by applying an image, a background image, to our body element. So inside of our body text, we can use the background image property to add that image, so background-image and then we'll give it a URL which is going to specify the location of the image we want to use for our background. So URL and then parenthesis, we're going to put the file path to tell it where to look for our image. This file path is going to be relative to our CSS file, so since we're in our CSS file, which is in our styles folder, we want to tell it to look back a directory and find our images folder, and the way we do that is with two little periods here. So I add those two little periods, which tells it to go back a directory, and then a / to tell it to look inside of a new directory or folder and we want that first option, the images, and then our second image in that folder, the red_abbey. jpeg, so I'm going to add that in. Now you can see that we have our image taking up the background of our site, which is really cool that we can do this really pretty simply. But, if you scroll to the bottom, you can see we have a little bit of a problem here because by default the browser repeats our image, so we want to change that so we don't have that kind of distracting break between the start of our next image. So, right under our background image, we're going to tell the background-repeat property and we're going to set this to no repeat, so don't repeat this image. As I add that semicolon, you can see we fixed the fact that it's not repeating, but our image isn't wide enough to take up the full height of the browser, so it's just taking up a one to one ratio of the original resolution of our image. So, we can also fix this with CSS. How awesome is that? So right under our background repeat, we're going to tell it the background size is going to be set to cover, so background-size, and then cover the full width and height of the browser. So now, if we stretch this out, you can see our image is taking up the full width and height that we don't have that weird gap and we also don't have it repeating as well. Which one thing you want to note here is you want to make sure your image is high enough quality to where it looks good at this size, so you're not going to have it look fuzzy or distorted at this large size, but you also want to make sure that it's not so high quality or such a high resolution that you have really high loading times. So, what this is, is kind of optimizing your image as a balance of quality and loading times. We have a great course which can teach you how to do that and optimizing images for the web and Photoshop, so if you don't know how to do that, I really recommend you go and watch that course, and I'll teach you how. So, now that we have our image looking good, we want to change our text color here so it stands out more against our background, since it's pretty impossible to read. So right under here we're going to set our color property to be RGB 250, 250, 250, which is going to change our color to a nice kind of white. And there's something else which I think can make our text a little bit more readable. It's a lot better than black, but I think there's another step we can take here as well, and that's by adding kind of an opaque color behind our text to make it stand out, so we can still see our background image showing through and it'll be easier to read our text against a little bit of a colored background, which we can add that to our body element and get the same effect because we already have a background on our body. So we need something else here that we can apply it to that's going to show behind all of our content but isn't the body. So what we're going to do is we're going to add another element in our HTML. So I'm going to come in here to our index. html and there's an element called the main element, which is new to html5 and it's meant to be semantic and signify the main content of your page so it's perfect for this case because we're going to tell or wrap all of our content in that main element all of our main content. So I'm going to add that main element in. I'm going to Control-X to cut that closing tag out, so we have our main opening tag right under our opening body tag and then right under our closing body tag we're going to paste that main element. We need to do the exact same thing in our reservations page as well, so we're going to hit Control-S to save and then on our reservations page we'll just do the exact same thing, so open that opening main tag right under our opening body tag and paste the closing tag right under our closing body tag also. So I'm going to hit Control-S to save and now we can add our background color to our new main element. So, right under our hover button, or button hover, we can target that main element and we're going to give it a background color, so background-color and we're going to use RGBA here rather than RGB because that A is going to allow us to change the transparency of that color. So rgba, and then I'm going to use just 100% black and then we're going to set it to 0. 5 for the alpha transparency, which is going to be halfway between being opaque and completely transparent. So, if I come out of here out of our selected element, you can see we have a nice, subtle transparent black overlay and it makes our text a lot easier to read. You can also see here something else, and that's our silly little box model coming into play. Again, we can see we have a gap here between our heading and the top of our browser, and I want our background to stretch over here and also have some space between our background color and the start of our text as well. So if we know anything about the box model, we know that margins add that space outside and padding adds that space inside the element, so we'll see where that knowledge comes in handy once again, and right at the top, let's come up here to our h1, we're going to change this margin top to be a padding top. So, if we change that, you can see we now have almost that full space fixed, which it will be fixed in just a second, which, if we be scroll down to our body, we can see we have a padding adding to our body, which is adding that gap. So I'm going to Control-X to cut that padding out of there and we're going to add it to that main element instead, so it's going to have a similar effect but we'll see in just a second why this is a little bit better, so I'm going to paste it right under that main element so it's adding that padding to our main element itself. If I stretch this out, yay! We can see we fixed that gap at the top and we also have that nice amount of space to the outside of our element as well. If we scroll down, we can see we have the same thing, so we can really see how much frustration you can save yourself and fix these kind of issues just by understanding the difference between margins and padding. So let's scroll over here to our index page and see how it looks as well. Overall, I think our site is looking really fabulous. So let's compare our site now to how we started off in the beginning. I'm going to shrink this a little bit and I'm going to pull up our site in a different window here and this is where we started and where we ended. So you can see how drastically you can change the look and feel of your site with a little bit of time and a little bit of CSS. If you want to learn how to do things like apply styles only in situations, maybe to one paragraph but not for another, well, stick around and we'll learn how to do that in one of my other CSS courses. But our site is looking pretty lovely, our background is looking beautiful and I think that's all we have to do for our course today. So, we've learned how to style text by changing the font properties about how fonts are pulled into a site, and best practices like using font stacks and website fonts. We've also learned how we can have increased control by using externally hosted fonts. We've used pseudo selectors to target our links and all about margins and paddings and the box model. We've learned how to center our page in the browser window, style complex elements like tables and forms, and even how to spice up things by adding a full screen background image and then how we can use the box model to fix the issues with our background. So, I hope you've enjoyed our introduction to CSS and I can't wait to see you next time to learn even more CSS. Course author Author: Susan Simkins Susan Simkins Susan is a web design tutor for Pluralsight. Growing up, Susan was both a passionate artist as well as a computer tech aficionado. When she discovered the world of web development, she found that... Course info Level Beginner Rating 4.6 stars with 231 raters(231) My rating null stars Duration 1h 48m Released 10 Aug 2014 Share course