Lessons

Lesson Info

Creating CSS Rules for Text Styles

So as I scroll through the document here, this is something that search engines and computers absolutely love, everything is neatly organized, it's well nested, everything's sort of grouped together, but from a design standpoint, this is leaving a lot to be desired. So CSS exists to give us the ability to style and layout all of the html structure that we have in place. So it's HTML and CSS together that are gonna give us the ability to create those layouts. So, let's all switch over to our presentation, to our keynote and let's talk about what we do with CSS. So, where does CSS actually go? So, in CSS we have three different places, or three different ways we can apply CSS to our HTML. We can do a separate file, we can put it in the HTML, anywhere within it's own style element, or it can be in or on individual HTML elements themselves. So, common CSS properties, we have, I've talked about earlier, things you would typically see in a lot of latin design tools, font family, weights and ...

so forth, letter spacing, again, you don't have to memorize all these, these are the ones you'll use the most and for layout we have things like width and height, position and a float property which we're gonna use on the figure element to create a text wrap, and so we're gonna take a look at how to apply all of these elements to this HTML that we have in place. So, the way CSS works, is we have our HTML file, we're doing our CSS in a separate file, and what we do is in our CSS file, we hook it into the HTML and then by specifying a selector, in this case the h1 tag, we are saying, in CSS, we would like to target this item here in HTML. So, we're creating a relationship here within the CSS to the HTML elements themselves. Inside of the CSS rule, we have our selector, we have the property and then we have the value and so these three items together constitute what we would call a CSS rule. So, a rule consists of, what are we selecting, what do we wanna change, and what's the value of the things that we're changing in that particular element. Let's continue on real quick. So, the first thing we'll do in our CSS file, is we'll bring in a web font and so there are a couple of ways we can bring fonts into CSS. Now, since people are looking at your documents anywhere in the world, those fonts need to be served to the people looking at your webpage. There's a few things you can do. You can download your fonts, or fonts from different services, Font Squirrel is an example here, where you can actually download the true type and open web formats. You can put them on your web server, link to to them in your HTML and your web server will serve out the fonts along with your HTML. A lot of people, however, will use font services, that will serve those fonts out from multiple places. Google Fonts, for example, which we'll use today, has their fonts all over the world on different web servers. So, they will load lightning fast, so people won't see a delay, because fonts like graphics will take a little bit of time to download. So this is a lot of popular font services that you'll see. What we're gonna do today is, we're gonna use google fonts I'll just show you how quickly we can add a font into a page and we're gonna use Lobster and Oswald, so those are the two fonts and those we used in our sketch course to sort of design out our site. So we wanna just continue out the theme from this artwork and design style by loading those into CSS and taking a look at how we make that happen. So, let's switch back to our computer and let's first open up our CSS and let's begin by adding in a font. So, let's switch back to our project files, so, this is our root folder, we talked about that earlier. Everything about our website is in this folder here. So, let's come in here and let's open this style.CSS file on the right hand side we're still previewing the HTML and we'll have the document over here, actually you know what I forgot to do, is I forgot to hook in the CSS file, so, let's go back to our HTML and up in the heading area we wanna link to our CSS file. So, at the head area as we mentioned earlier, is everything related to the browser, so this is everything the browser needs to render our page and so this is where we're typically going to link in our CSS file as well. So, hit return, so after my title element, we'll use a link element and then a space we're gonna set an attribute of type and we're gonna set this equal to text slash CSS and then a space. Next we're going to set the relationship, so rel equals, two quotes and the relationship is a style sheet and then finally we're going to set an href, so, href equals two quotes, we'll end the tag, and here we wanna link to our CSS file and we're gonna simply link to style.CSS. This CSS file is in the same folder, so, we don't have any forward slashes like we saw earlier with our links, going into the image's directory. So, this is just linking to style.CSS, so, now when the browser loads this HTML page, the browser's gonna see all this content and know, again, how we're coding it, what the scale should be, what the title should be, and what style sheet it should use, because as we write styles in CSS, we are basically overwriting the browser's default style. We're saying we no longer want black Times Roman on a white background, we wanna use this style sheet and we wanna start redefining some of that content for ourselves. So, now with that in place, now we'll go back and we'll open the style.CSS and so this just has nothing in it, the way we write comments in CSS is a little different from HTML, they start with a forward slash and an asterisk then whatever your content is and then an asterisk, forward slash, and this by the way, if you ever decide to get into Javascript, this is the same exact way that Javascript does it's commenting as well. So, HTML uses the less than, exclamation point, two hyphens, forward, exclamation point is CSS's style. So, before we begin let's bring in our fonts. So, to make use of Google Fonts, we're gonna go to font.google.com and this workflow's gonna be very similar for lots of different services that we looked at earlier and so inside of Google Fonts what we'll do is come up to the magnification tool here, our little search engine tool, and let's come in here and let's search for the fonts we wanna use. So, the first one's gonna Lobster, so I'll start typing in Lobster. I can see this over here. To add this I simply click on the plus sign. The way the newly redesigned Google Fonts works is as you select a font, it will show up down here in a little drawer. If I click on the drawer, this will simply pop up. Let's come in here and let's add Oswald. Click on the plus sign, this now tells me I have two fonts selected, so now let's open this up. So now, Google is giving us a lot of information about how to use these fonts, and again you'll see this in other tools like Typekit and Font Squirrel, they'll all kinda give you hints on what we're doing, how to get this into your page. So, notice here under standard we have an HTML item here. So, just like we linked to a separate style.CSS file, you can link directly to Google Fonts with all of these parameters in here and basically load a style sheet directly from Google.com. So, that's what's actually happening here. Down here we have the CSS rules that we need to put with our font family property and the value of Lobster and a fall back of cursive, so if for some reason somebody's not connected to the internet but they have your files locally, for example, it'll be a cursive font, it won't look like Lobster, but it'll be not Times Roman, and same thing down here for Oswald as well, but notice there's two options up here. We have standard and then we have this import. So, add import is a way that we can basically import one style sheet into another style sheet. Now they've put this in a style element here, and as we've talked about we can have CSS rules in your HTML page instead of a style element, and the third option, which is what we're gonna do here, is we're going to come in here and copy just the add import and we can actually put this in our own CSS file, and I like to do that because I like to keep all of my CSS together, So we're gonna come in here and just copy that at import statement, we're just gonna copy to the clipboard, gonna switch back to our code editor and at the top of the document I'm just gonna simply paste this in our CSS. The one thing to keep in mind is if you use an add import it has to be the first thing you do in your CSS file before any CSS rules. If you have a CSS rule before this and then you have an import it's not gonna get imported. So, basically this is a way that we can include, or go out to Google, pull in all this stuff into our CSS file and then write the rest of our stuff inside of here, so again, I like to do it this way just cause I like to keep all of my CSS in one place. So, now with that in place, now we can start creating some of our CSS rules. So the first rule we're gonna create is gonna target the body, so the body is basically the presentation layer of our document and so we do that by typing in body, then a beginning and ending curly bracket and then inside of the curly bracket is where we put all of our different properties. So the first thing I'm gonna do, before I bring in the font is I wanna get rid of some of the space in the browser, and every browser renders HTML a little differently. Mostly, they're pretty close, they're within maybe five or ten pixels of each other, between Firefox, Explorer, Edge, Chrome, Safari, but if we look in here we see that the browsers will put a little bit of space, notice the type is not touching the left edge of the browser or any of the areas up near the top, and so we're gonna use something called a margin setting, very much like we have margins on paper and set the margins to zero, so that, that content will sort of move over to the edge. So, I'm gonna type the word margin, my code editor will sort of help me out, add a space, I'm gonna type a zero, and then a semicolon. So the property is margin, the value is zero, as soon as I do that, look at all my content, it now touches right on the edge here and that's great, 'cause I like to zero out the spacing and I wanna set the spacing myself, so that I can just be sure that everything that's happening in the browsers is gonna be much more consistent. We're gonna set another property of padding, and we're gonna set that to zero as well. So, margin control is everything on the outside of an object, padding control is everything on the inside of an object, but we typically use margin and padding even on the body element, even though it's the highest element, just to make sure that everything is sort of zeroed out, so that all browsers will sort of reset this. I'm gonna come in here and put these on separate lines. Next let's apply our fonts. So, now we're gonna go back to Google Fonts, and down here where we have the category that specify in CSS, this is where Google is giving us exactly the code we need to add, so we can simply come in here and copy this, so font-family, Lobster comma cursive. Let's copy that to the clipboard, actually, I'm sorry we wanna use Oswald as our base font. Let's copy that, otherwise everything will be all cursivey and let's come in here and just paste that. Soon as I paste that in, notice already that font is being applied to everything within the page, so with one simple property, a font-family, applied to the body and a link to Google Fonts, we've now applied that font to everything within our document. So, now we have the beginnings of a layout, that already looks better that Times Roman, and we've barely done anything yet. So, let's come in here and add a few more properties. Next we're gonna add a font-size property, and I'm gonna come in here and add 18 pixels and a semicolon, so on the web when we specify font sizes, typically, if you read articles about people who talk about CSS they'll say to set all of your font sizes in a measurement called ems, which is the, basically the measurement of the letter M in the font size. What I like to do on the body element, is specify a font size in pixels. What this does is every browser has a default size that it will render your fonts at. The windows platform, which actually renders to 96 dots per inch on the screen instead of 72, which is what other platforms will use, can actually result in some of the fonts being a little bit larger or smaller. So that's why I like to specify pixels at the body level, then everywhere that we specify fonts later, we're going to use ems and ems is a proportional measurement, so, if we set a font size to one em, that's going to equal 18 pixels, however the trick there is ems actually give the devices a little bit of leeway on how they render the font, so by ems, if we say a paragraph is one em, let's say your on an Android device and it's a 4k device with a super high resolution and this font, based on the kerning and the height will look a little better if it were 19 pixels instead of 18, by specifying ems you're giving those devices a little bit of leeway to make the font look just a little bit nicer, because every browser is tailored to the device it's running on. So, that gives us that leeway, so, we put pixels at the base, and then we do measurements for everything else outside of there. If we put 18 pixels on the paragraph for example, a 4k Android device will honor that, but the font might not look quite as nice. So anyway, this is a technique that we use at our studio and this works really well when we test this across different devices. Okay next, let's specify a color and the color we wanna specify for the base. It's gonna be sort of a darker color, and so to specify colors we have a few options. The first one, the most common is a hex value, and that starts with a pound sign, and then hex values have six digits and they're broken into red, green, and blue and you can get these numbers from Sketch or from Photoshop or any other design tool. So, the value's gonna be 50 for red, gonna put 35 for green and 2d for blue. Now hexadecimal just means that instead of going from zero to 16, because that requires two digits, the numbers go from zero all the way up to nine, and then after nine, we have a, b, c, d, and e, so that gives us 16 characters, so that's what the hex means. So, 50, 35, and 2d, that's gonna give us that individual color and so if we take a look at that out in the browser, it might be hard to see on the projection but that's gonna give us this sort of dark brown color. This is the color that we specified in our sketch course when we were coming up with the design for this particular piece. In a little bit we're gonna take a look at how we get CSS properties from tools like Photoshop and Sketch and we can see how those tools will actually give us these numbers, so you don't have to, certainly don't have to memorize a whole bunch of hex codes. Okay, and we set up all our properties, except for the font weight, so, we're gonna come in here and set font-weight to 300, and then a semicolon. So, that's gonna give us, make the font just a little bit lighter, and we can see all these different values inside of Google Fonts. So, just notice how that gets a little bit lighter, just looks a little more nicer-er, if, when we have this on our page than the base font, which is the regular, which just had a little bit more thickness to it. We're gonna keep on going. So, now we're gonna target the headings inside of here. So we're still inside of styling our text information, so, let's come in here and let's target our h1 tag, so type h1, put in our brackets, we'll split this open and now we want the font size for the heading to be much larger and actually we want this to be roughly 45 or pixels in size, but again instead of putting the actual pixels, what we're gonna do is use ems, which means we're going to multiply the value of font size. If I said 1 em, we would get roughly 18 pixels. We're gonna come in here and say font-size is 3, then the letters em and then a semicolon. So 3 ems means it's gonna take 18 pixels and multiply it by 3 and then give the device a little leeway to bring that up or down a pixel if it needs to on this piece. Next line, let's come in here and let's set our font-family. Let's go back to Google, for the heading one and twos, we're going to use Lobster, so I'll copy this. We'll paste this down here so now we're gonna use Lobster. It's looking nicer already and let's come in here and set some margin properties. So, again, margins control everything outside of an object so if you sort of imagine, and we'll look at a slide on this in a few minutes, everything in the HTML is actually inside of a box, or a rectangle, so if you've used design tools and you've drawn a circle in Sketch or Illustrator and you drop it into a page you'll get a square bounding box, even though it's a circle you're still gonna get a bounding box around that area that's a rectangle. Margin properties control how close something can get to the edge of that boundary and padding controls how close something can get on the inside of that boundary. So for margin, we're gonna set this four different properties and the properties go in the order of a clock. So, they start at the top, being twelve o'clock, next property is to the right, which is the right hand side, bottom and then left, so twelve o'clock, three o'clock, six o'clock, nine o'clock, so, if you always think of a clock, everything in CSS when you have multiple properties, goes in that order, so for margin we'll set 50 pixels and then a space and then we're gonna set zero, so that's zero on the right then a space, and then I'll use .4 ems, so just 40% of that 18 pixels and then a space and then zero on the left. So, now we have 50 pixels of space at the top of each one, we have .4 ems at the bottom, zero on the left, so the heading is hitting over here, and zero on the right hand side, so this is how we can start to space and move things around inside of our document, and actually I put the wrong values for the h1, that's supposed to be zero, space zero, space .5 ems for the bottom, and zero for the left. There it goes, I was lookin' at my h2. Okay, so with no margin on the top, this actually goes and touches the top end. Okay, so with that in place let's start going a little faster. Next, we'll do an h2, put in our brackets, we're targeting that element, gonna come up here and copy the Lobster font, so font face, we'll set font-size, we're gonna set this to 2.4 ems and for the margin this is where we're gonna set those properties from before, so 50 pixels on the top, zero on the right, .4 ems on the bottom, and zero on the left. Now since we have more than one h2 on the page, if I scroll down you'll see that all of those h2 tags have exactly that amount of space. So, this 50 pixels at the top, this is basically controlling the paragraph before settings if you were using a traditional design tool, so there's 50 pixels above spice, 50 above tumeric, 50 above production, and 50 above nutrition. As we go through we can see all of those moving into place. Next let's target the paragraph elements, so for the paragraph we're gonna set a color, we're gonna change the color of the paragraphs, so we're gonna set this to be for red, 33 for green, and 0d for blue. I'm sorry we are not setting the color for that. (laughing) So, for paragraphs we're going to set font size. So for the font size we're going to set this to 1 em. Now again, we did set the body, so everything is being set to 18 pixels, but again I wanna give the devices a little bit of leeway. So, we set the base on the body, and then for font-size for paragraphs we're gonna set this and let's set some margin properties for the paragraph as well, and I'm gonna scroll down here so we can see a couple of paragraphs together, so as we make some of the changes we can see how the spacing applies inside of the margins here. So, so for the margin, we're gonna set this to zero on the top, then a space, zero on the right, then .9 ems for the bottom, and zero for the left and then as soon as I do that, we'll see this space will get a little bit more consistent and just, not quite the 18 pixels or the one em we had from before, so we're just basically tightening up the amount of space in the paragraphs. Okay, so let's style two more elements before we get into starting to look at working with layout inside of CSS. So, we created our hyperlink earlier, and as we mentioned there's default styles for hyperlinks, they will be blue and underlined, so let's target the hyperlinks and let's change the way these behave. So, let's come in here and add an anchor tag. So a, that's our selector, put in our brackets, here we're gonna add a color property, and we're gonna set the color to a pound sign, we'll set this to be for red, 33 for green, and 0d for blue, again we'll take a look at how we can get some of these properties when we're in a graphics tool. So, that color's gonna give us that sort of dark orange, we see up here, and then let's also come in here and remove the underline, and we can do that by setting a text decoration and we're gonna set the text-decoration property to none. Let me format this a little bit so it's easier to see. So, text-decoration is none. So, now we'll see we still have our hyperlink, everything will work, the tool tip will work if we hover over it, but now we've just removed that underline, so it just can be a little more visually appealing and now anchor links have a couple of other properties that we can assign called a pseudo-class. A hyperlink knows if the user rolls over it. There's just some things that are inherent to the browser, so for example if I come over here and just hover over this my cursor turns into a pointer. The browser is aware of the fact that, through the HTML and that anchor link, something can happen if we move our cursor over here and click on this and so those things that can happen are called events or states and we can actually target those states with CSS so, this is a state, or a pseudo-class called a hover state. So, to target that we're gonna type in a, and then we're gonna use a colon and then type in the word hover and then put in our curly brackets. So, we are now creating a CSS rule that will only take effect if somebody actually rolls their cursor over top of that words, if they don't do that the CSS rule will never be invoked to the user and so let's do two things here. Let's bring the text decoration back, so set text-decoration to underline, and on the next line, let's change the color one more time. So, set the color to a pound sign, and then we'll set red to 6a, 87 for green, and 1c for blue, then a semicolon. So, now when I come over here and hover over this, this is the normal, or non-hover state, and if I hover over this we'll see the color change and the text decoration being brought in. Alright, so that's most of the stuff, most of the properties you'll use for formatting most of the content, at least from a text standpoint in your documents.