Getting Started with CSS
So at this point we're ready to start working with CSS and doing something with that content, so basically we have three ways we can add CSS into our content, we can add it as a separate file, which is what we're doing here, we can put HTML elements right in an HTML page, inside of a style element, I'm sorry, CSS rules inside of an HMTL page, and we can also put CSS properties right on an HTML element, so in the first example, up in the heading area, or really anywhere in the HTML, but typically goes in the heading area. We can link to a separate file, so that's what this would look like. And this is what we're going to be adding for both our screen and print versions. The second option is we can write the CSS rules right in the HTML page itself, and it can go inside of a style element, so it doesn't have to be in a separate file, the advantage of a separate file is you can reuse that one file across any number of HTML pages, so you could have 500,000 pages all linking to one CSS file,...
What determines how fast the font would load onto a server, or onto a computer?
What determines how fast the font will load is it's based on how many fonts you choose, and what Google does is they know how many bytes each font is, and then how many servers they have around the world, so they will calculate, how long it will take for that font to get there. What's really great about this is, you might have webhosting on a company in, let's say, California, and somebody might be in Australia looking at your site, they would get the fonts from Google's closest server in Australia, even though the HTML is coming from your site, in California, so that's why some of these online font services become so powerful, so you might be adding 60 or 70 kilobytes to your website download, but the fonts are actually coming from a different server than your HTML. So Google is giving you their time on how quickly they can serve just their fonts, this has nothing to do with your whole website, they're just saying, hey, we can get you the fonts, this fast, and if you come in here and start adding more and more fonts, or customizing this, so for example, if we go into lobster, and I just start adding a ton of fonts, and I say I want all these different fonts, Google's going to say, well, we're letting you know it's going to be a little slow, and you can decide if you want that to be slow or not. So I like the light 300, so we're going to go with that one. So the customize tab, here, again, allows us to set the customizations, there's only one size for lobster, so that makes it easy, if we go back to the embed, the embed is going to give us some information here on how to get this font into our webpage, so for the first option here, we have this link tag, so this looks exactly like the link tag we just added, linking to a separate file, what we're really doing here is we are linking to a style sheet, and all of the fonts that are on Google's web servers, so it's basically like they wrote a whole bunch of CSS for us already, and we're just linking out to those pieces, and so we would put this up in the heading area, or, again, anywhere in the page, but typically, you put it in the heading area for that content. Oops. Then down here, for specify in CSS, this is where we can choose the different properties, so again, they will give us exactly the names that reference the CSS that they're giving us to link to up here, and giving us the way that we can specify those individual fonts. Things like the color and size, we can do ourselves, but if we want to use the lobster font, we have to use exactly these properties. So next to standard is the import option, this is the option that I like, I like to keep all of my CSS together, so this is still giving me an HTML element, but what I want to do instead, is come in here, and just copy the URL to this import. This will allow me to put this string in my CSS and when my CSS loads, this will in turn load all the fonts through Google as well, so I'm going to come in here and just copy that line, let's switch back to our CSS document. And let's come in here, and let's paste that as the first item, when we're using an import, the import has to be the first item that we paste inside of the page, inside of our CSS, before any of our CSS rolls. So with that in place, we have our fonts loaded, let's start creating some styles, to style all of our content. So in our CSS, the first element we're going to target is going to be the body element. So we'll type in body, put in our brackets. Beginning and ending square bracket, curly brackets, let's hit a few returns, and the first thing I want to do is reset the margin and padding, so if we look in the browser, we have this little bit of space showing up in the browser, between the content, and the edge of the browser, and all browsers are going to have a little bit of space around the top insides, in CSS when we're working with our margin and padding properties, margin and padding control the space outside and inside of a particular object and we'll talk more about that in a minute. So let's come in here, and let's start with a margin property, so I'm going to type margin colon, space, then I'm going to put a zero, and then I'll put in a semicolon. Once I do that, you'll immediately see that the text will now bump up right to the edge of the browser, and I like to do this because I want to control the spacing in all of the different browsers, each browser will have a different default on how much room they will move the content in from the edge of the browser. So by zeroing this out, we can make sure that we can control all that in our CSS file. And in addition to margin, we're also going to set padding, so we're going to set padding to zero, as well. So in our CSS, let's continue and just add a couple more properties here, so the body area, again, is that, the main element that is basically our presentation layer, it's the entire stage of what we see inside of the browser. So let's come in here and add a couple more properties. We're going to set background color, I want to set this to white, so we're going to use hexadecimal here, so a pound sign, and three letter F's, so F for red, green, and blue. F is the highest value of the hexadecimal numbers, which is basically a way that we can get 16 numbers, we start from zero and get up to nine, and then we have A through F, so that basically gives us 16 characters. So basically, this is 100% of white, for red, green, and blue, I'm sorry, 100% of the value of red, green and blue, which gives us white, so, a little geeky, but that's how the hexadecimal stuff works. On the next line, let's go in and let's change our font size, we're going to set a base font size of 18 pixels, and the only time we'll use pixels, is going to be on the body element, here. So what we found with our web design, is we like to set a pixel value on the body element, and then we'll use a measurement called Em's for every other measurement outside of here. By using Em's, Em's is a proportional measurement scale, and it allows all of the different devices to vary that size just a little bit, so it will match the resolution of the individual devices, so later on, if we say, the paragraph is one Em, for example, that will translate to 18 pixels, because one Em is one times the base font size, which is 18, but if a device has a high or low resolution, and the font will look better at maybe 19 pixels, or at 17 pixels, we're basically giving the devices the leeway to just adjust that a little bit, so it will look great on those particular screens. If we said exactly 18 pixels all the time, some of the letters might get cropped a little bit. Most people might not notice designers will definitely notice, so, this really works for us. We set a base on the body, and then we use Em's later on. Let's come in here and set font weights, so we're setting the properties here for the entire document, so the font weight we're going to set to 300, that was the font weight we picked inside of Google, let's come in here and set a line height, this is basically setting the letting, and for this, we're going to set this to 1.25 Em's which is basically going to be 25% larger than the 18 pixels, and for the font family, we're going to go back over to our browser, we're going to go back to Google, we're going to come down here to specify in CSS, let's come down here and select font family, the name is oswald in quotes, and then a comma, and then sans serif in case for some reason that font doesn't load properly, or somebody might cache the page and look at it offline, they'll see a sans serif version of the font, they won't see exactly oswald, but they'll see something that's not serif, so it'll be a little closer in the design. And we'll come down here and we'll paste that content. And so now right away, as soon as we create this font family, and specify oswald, with a link to Google Fonts here, we'll now see that everything in the body, which is all of the content in the page, is now showing with that Google font that we now showed on the page, yes?
If font weight is already determined from the at import, why do we need to mention it again in the body?
I don't have to mention font weight here, if I left this off and the only font I was loading was the 300, then that's the font that would default into here, but if I go back at any point, and decide to add a 100 weight, or a 600 weight, if I decided to add something larger, then that's going to make sure that I've specified exactly that particular weight. So if I came in here, for example, and added 500, I wouldn't have to go back to my body element, and specify that 500 piece, so again, sometimes things are optional, but I like to be really specific, because later on, when I go and change something, I don't want to have to go back and keep modifying the content that I've already set into place. Same thing with like, the background color. Most browsers are going to show it as white, but I really want it to be white, so I'm going to put white, (laughs) and just make sure that that's the color that gets used. Okay, and so let's come in here, and the last item that we're going to set for, this is going to be the color. So in HTML the color, I'm sorry, in CSS the color property is actually referring to the color of the text. So we're going to use hexadecimal here, as well, so use a pound sign, for the red color, I'm going to use 54, for green we're going to use 46, and for blue we're going to use 3a, and then a semicolon, so that's going to give us that sort of gray-ish-y brown color, that's going to match the content and style of the site. Okay, so that's, that covers bringing in our font, and we spent a little more time talking about targeting a specific element and setting all the different properties, so what I want to do now, is let's go through and just more quickly style some of the other base text elements, and then we can move onto doing stuff that would be a little more fun than styling the type. So let's come in and let's first target our h1, let's come in here and add our curly brackets. So for this we want to use a particular font, and so let's go back to Google. Let's go to our embed, let's come down to our font family, we're going to use the lobster font for all of our headings, so come down to h1. Let's base that, as soon as that's in place, we can see the h1 up here, showing up with that font in place. Next, we're going to set a font size. The size is going to be 2.2 Em's so what that means is we're going to make this 220% larger than the base font, so if we took and multiplied it by two, and then added another 20%, that's going to give us this font size here, typically you would do that by going into a tool like Sketch or Photoshop, getting your measurement out, and so for example, if the desired size was, let's say, 36 points, you would take and divide it by 18, and you would get two, so we would set this to two Em's for example, so this does take a little bit of extra work, to convert your measurement to Em's but again, it's going to make the type and your elements on the high definition screen just look a little bit better, and you're going to again, give those devices a little bit of leeway on how they measure that out. Alright, let's keep going, so we're going to do font weight. We're going to set that to bold, so we'll let the browser just bold that up a little bit. And actually, I'm sorry, no, we're not going to do that. We're going to come in here and set margin properties. So for the margin we're going to set this to zero, and so we want to make sure that our heading doesn't have any space around the top, right, bottom, or left of this, so by setting this property here, we are basically taking away all of the individual spacing that happens outside of this element, so at this point let's switch back over to our keynote and let's talk a little bit about the box model because we've been doing a few things here with talking about how we have spacing for our individual elements, so when CSS is hooked onto our HTML file, there's this idea of a box model, and the idea here is that, every element on the page has sort of this bounding box or rectangle area around it, if you've used design software, and you've imported a circle let's say, like an EPS, into page layout tool, when you select a circle, you still get a square box around the entire area, so HTML does that with everything, and so when we're looking at something like this mark up here, we've got our main header element, which will have an entire box around it, and then the way the browser sees all of this is each one of these items is it's own element, some elements will go the full width of the page, and some elements will only be as wide as it needs to be for the content. So image tags for example, will only be as wide as the actual image itself. Things like div tags, h1's, P's, all the things in that structure we looked at earlier today, in the earlier slide, will most likely take up the full width of the entire browser. And so once we have that content, so let's take, for example, this div with a class of content, this is the piece that gets locked at a certain width, when we are setting margin and padding properties here, the margin is controlling how much space is around the outside of that object, the padding is controlling the amount of space inside of the object, so as we change these individual numbers we're going to either set margin properties to keep things from getting too close, to the outside of the object, and padding properties to keep things inside of that object. And one interesting thing to keep in mind, is padding, if we add padding properties, that does change the dimensions of the object that we're inside, so later on in the course, we're going to use something called a border box property, to make the padding not shift our elements around, and so some of that stuff, as you're working with your individual designs, you'll just come across on trial and error. So let's switch back, and let's just continue on with a few more of our properties. So by sending that h1 tag and getting rid of the margin, you'll see that now, that element, touches all the way to the top, because we took the margin and padding off the body, as well, and it touches on the left hand side, so, again, we're sort of zeroing everything out so we can start adding in our own spacing, as we go. So let's continue on in our CSS, let's add our h2 element, and so for the h2, we're also going to use lobster, so I'll come up here and just copy that. Next line we're going to set font size, we're going to set this to 2.2 Em's, and I just realized I was supposed to set the other one to 4 Em's, so let's come back up to the h1, let's change that to 4 Em's, there we go, that's supposed to be nice and big. So back on the h2, let's keep going, we're going to set the font. We're going to set the font weight. We're going to set this to 400. That's the default inside of Google Fonts, however, by setting a font weight here, the browser will not add it's full bold to this individual area here, because the browser will want to automatically bold heading tags so we're basically taking that off of this piece, and next let's go to line heights, and we're going to set this to just one Em. Since we styled in h2, if I scroll through our preview, we'll see all the h2's now have exactly that same style. So many choices, where in the world, and let's define before we dine. The space underneath the one Em is basically giving us that 18 pixels, roughly, underneath this element, so if we have our bounding box here, if you can imagine there's about 18 pixels before we get to the top of this next h3 item. So let's continue, so h3, we're going to come in here and set font size for this, we're going to keep it as oswald, so since we set that at the body, that value is going to cascade down through this element here, so we're going to get the oswald font automatically, and we're going to set the size to 1.2 Em's. And then we're going to set margin properties here, as well, so for this, instead of setting all of the margins the same, what we're going to do is we're going to set the bottom to .5 Em's but I want the top right and left to be zero. So in CSS, we have this idea of setting shorthand properties, which means we can set four different properties and separate those values with spaces. And everything in CSS, whether you're doing margin properties, or even if you get into some of this CSS, I'm sorry, into some of the 3D aspects of CSS, everything's going to go based on the clock, so the top, is the first item, so you think of 12 o'clock, right is going to be 3 o'clock, bottom's going to be 6 o'clock, and left is going to be 9 o'clock, so everything always goes clockwise, so the first value here is going to be zero. And then I'll hit a space, the right value is going to be zero, I'll hit a space, the bottom is going to be .5 Em's, so I want it to be half the size of the base font size. And then zero for the left, so that means that we'll have no space on the top of the h3's but we'll have some space underneath, again, if we scroll down through, we'll see all of the h3's will now have that same effect here, which is, what is a spice, and what is an herb, these two items here. Alright, so let's just do, we just have two more to do, our paragraphs, and our anchor links. So paragraphs are going to be real quick, we're going to set a font size, to one Em, and a space, then we're going to set our margin property on the paragraphs, we're going to do zero on the top, zero on the right, one Em on the bottom, and zero on the left. We'll see that showing up right here, and now that all of these elements, it wasn't until we had all of these represented with some of our margin properties, that we now see this really consistent space, across all of these, and so we can see the space inside of here, the space here, from the paragraphs there's just a little bit more, and again, you can spend as much time as you want, really just making the type look as nice as you want it to look, we'll see some things happening up here, the h1, and we have our content here that's sort of moving into this place, we're going to be positioning stuff up in the heading area, so we're not worried about sort of the layout happening up here, at the moment, alright, we know the hyperlink works. Alright, and then lastly, let's come down here, and let's style our anchor links, so in our CSS we'll type in a tag, put in our brackets, we'll split this open, for the anchor link color, we're going to set this to a pound sign, two F's for red, 4e for green, and 00 for blue, that's going to give us this orange color here, and to remove the underline, we're going to set text decoration to none. So now we're styling each one of these anchor tags that are showing up in the content. Now anchor tags have the ability to respond to mouse events, using something called a pseudo class, and the pseudo class for the mouse over is something called hover, so in order to specify individual mouse events on an anchor link, we can type in a tag, then type a colon, and then we'll type in hover. So now we're going to create a CSS rule that's only going to take effect if the user rolls their mouse over top of this item, and this is going to become really important later on, when we create our menu system, because the menu systems are completely triggered on whether you hover over an area and get the drop down menu to show up, so on hover, let's come in here and let's bring the text decoration back, so we'll set text decoration to underline, and then a semicolon. So now if we preview this in a browser, if we hover over these items we'll now get our pointer which is the browser taking this into effect, tool tip comes up, but the underline will now show up, because we are now, the browser is now paying attention to the CSS rule, which is detecting the mouse event from the user. Now of course you won't see this if you're on a touch device, you just tap on these and go to the link, but people who have mice or track pads will see that individual user experience.