Lessons

Lesson Info

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,...

and then when you want to change the site, you can change the one file, and then a third option you'll see a lot, especially with, like Javascript enable tools, and things that will need to style things locally, you'll see style elements right on an HTML element. The advantage here is that you can just apply that style right on that particular element and just use it right away, the disadvantage of this option here, is that you can't share that style with other elements within the page, and all of these have a really specific use case for when you're going to use all of these, most of the time you're going to use a separate file like we're going to be doing in this particular class, but there are cases where it might be in the HTML file, or cases where it's going to be in the style attribute. Now when we create our CSS, the CSS file's going to be hooked into our HTML file, and then within CSS we need to target individual HTML elements, in order to use them, so, what we're going to do here in our CSS is we're going to create a CSS rule, with something called a selector, that's going to match elements in our HTML page. Once we create this correlation, any of our properties and values are going to be applied to our HTML file. So a CSS rule consists of a selector, which is a way that you say, what do you want to target in the HTML page, what's the property, in this case color would be the color of the type, and then what is the value, and in this case, three zeroes with the pound sign would be black, so this is how we're going to create the relationship between content that we have in our CSS file, and have it target and manipulate the layout and style in our HTML file. The other thing we're going to be doing is working with web fonts, now there's a bunch of different web font services, the difference here is you can either download fonts and host them from your own website, just like you would host images, services like Font Squirrel for example, will let you download the image, same thing with Google, you can download those font files, and put them on your web server and link to them, and serve them yourself, or in all of these cases, you can link to services online. One of the advantages for systems like Typekit and Google Fonts and Fonts.com, they have servers all around the world, so you don't have to host the font on your site, the fonts will load lightning fast and they'll load, really fast for anybody, anywhere in the world. So for this particular class, we're going to be taking advantage of Google Fonts, we'll be linking to lobster and oswald, and Google will, through it's web interface that we'll take a look at, will give us the ability to search for those fonts, and add them really quickly to our CSS file. And so with that, let's move over to beginning to work with all of our fonts. Okay, so let's go back, let's go into our project file first, so we'll go back to our folder. We have in our folder, we have our style underscore print dot CSS file and our style underscore screen dot CSS, these are our two files, these are empty, we open these up they don't have anything in them except just a comment, and the first thing we need to do is link these CSS files to this HTML file. So we're going to go back over to the HTML, now you can link this anywhere in the document, typically we would link these in the heading area. So after the title tag, let's come in here and add a less than sign, we'll type in the word link, and then a space, type, equals, so this attribute, and we need to tell the browser what kind of file this is, so text slash CSS. Most browsers will be lenient, you can just do link, and link to the CSS, but in good practice, we want to make sure that we are a little more descriptive to the browser on what we're doing. Next is an rel attribute which stands for relationship, so relationship equals, two quotes, this is a style sheet. Let's end the tag, this is another self closing tag. And then the final, attribute is going to be an href, so I'll type href equals, put in our quotes, and we're going to link to... Our style, underscore screen, dot CSS. And we covered this in our basics HTML class as well, so by simply linking to this CSS file, any media type whether they're printing, whether they are using a speech device, or looking at it on any screen, is going to use the same set of CSS rules, now one thing we can add to this, is we can put a media type on this link, to this CSS file, telling the browser we want to use this particular CSS only during certain criteria, so what I'm going to do is before the type, you can put this anywhere, but I'll put this here so it doesn't wrap. We're going to set a media... So type media, equals a media attribute, and we're going to set media to screen. So now with this in place, let's copy this, so if we were to hit print, we would get a print document of just black times roman this style sheet would be completely ignored when printing, or it would be completely ignored for other media type instances, but if you're looking at it on a screen, then this CSS will be invoked. So let's copy this and let's paste it again. For the second one and for media, we're going to set this to media as print. And we're going to link to the style underscore print, dot CSS. So now the browser will take care of that automatically for us, we hit command P to print, the print style sheet will be invoked, and everything we do later on for print will be, will take effect once we use that particular media type. Alright, so now we have our CSS files linked in. Let's go back and let's open style underscore screen dot CSS. So let's get rid of some of the comments here. Keep this one at the top. So the CSS comments start with a forward slash and an asterisk so you can use these comments to comment out your code, especially if your CSS gets really long you can put comments in for the different sections, and so what we want to do here is first bring in our Google Font, so what we're going to do is go back out to the browser, let's bring up our new browser window, and we're going to go to fonts.google.com. This particular workflow will be very similar with a lot of those services that we showed you earlier. So on google.fonts on the upper right hand corner, I'll click on the search tool, and let's go search for the fonts we want to use. The first one's going to be lobster, so I'll just start typing this in. We can, you can filter your search based on different types of fonts you're looking for, and again, this will be very similar on a lot of services, as well, but I happen to know the name, so next to lobster I'll come down here and click on the plus sign, that's going to add this little drawer down here at the bottom, telling me I have one font selected. Let's go back and let's look for oswald. Shows up right here, let's click on the plus sign, now I have two fonts added to my drawer. So now I'll come down here, click on the drawer. So inside of this are here, Google's going to give me a lot of information about what I've selected, first is going to be the load time, the more fonts and the more weights you pick, the larger the font style sheet's going to be, so Google will give you an indication over here on how long that's going to take, this is going to be really important, because with web design and keeping the responsive design in state, or, keeping responsive design in mind, part of that design experience is how long does the site take to load, if the site takes a long time for fonts to come in, that's going to slow down the user's experience. Same thing with using really large images, or not compressing them, so it's not only just the design and just the responsive to the different screens, but it's everything about the experience, including download times. 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.