The web site of jiawp

CSS 3 From Scratch

Summary In this first module we discussed what you need to know to begin this course and that's a bit of HTML, but not necessarily any CSS. We also discussed what software you need, specifically a text editor, what hardware you need, which is just any PC, MAC or Linux box, and then we discussed our goals, which is to understand and be able to manipulate CSS3 to create web sites.

Style Sheets Introduction CSS stands for cascading style sheets and the heart and soul of CSS3 is styles and style sheets. Styles can be broken down into a few very simple pieces and once you understand the code, they're quite easy to work with. On the far left is one or more selectors. In this case we see the selector is p, which is the paragraph selector. Notice the selector does not have the angle brackets on either side of it. There is then an opening brace and a series of properties and values separated by colons and property value pairs that are separated by semi-colons. So the first property is color, the colon indicates that what comes after is its value, in this case blue. The semi-colon indicates that that property value pair is complete. The next property is font size with a colon and the value is 20 pixels. You can put the values in quotes, but that's generally not necessary depending on the type of value you're using. This style with a selector and property and value pairs is seen throughout all the work we'll be doing. Much of the early work we'll be doing will be focusing on the different kinds of selectors. How you can pick out just the parts of your page that you want to work with. There are two types of style sheets that we'll be working with. Internal style sheets are sets of styles that are delineated typically at the top of your HTML file. External style sheets are just like internal style sheets, except that they live in a file of their own. There are many advantages to external style sheets. They provide for a much better separation of concerns, allowing the HTML file to worry about the semantics and meaning and design of the page, while the style sheet worries about the appearance. It is faster to use external style sheets because the style sheets can be cached. To use an external style sheet, you place a link at the type of your page, typically right after the title. You set rel=stylesheet and then you set your href to the relative position of your style sheet and you're set. Most professional CSS3 developers use external style sheets exclusively, except when they are creating the page. Because of the caching that makes it faster to load, it also makes it more difficult and annoying when developing the page because you have to constantly force a refresh of that cache. Therefore, many professionals use internal style sheets while creating the page and external style sheets during production. To take a look at your first style sheet, let's switch out of PowerPoint and into code.

Your First Style Sheet To get started we need an HTML page. I've created this HTML5 page by extracting the HTML from one of my blog posts and simplifying it. While it may be simplified from what's online, it's still not exactly simple so let's go through it quickly. We'll begin by turning on line numbers. On line 1, we see the new HTML5 DOCTYPE. On line 4, the header begins and in that our title. On line 8, the body begins. The first thing in the body is an article representing a blog post and it has an ID. We're going to talk about IDs in depth, but the idea behind is that it uniquely identifies this selector. This particular article has the ID post 5946. Below that is a section. It's the first section within the article and it too has a unique ID. This is going to be the header for the article. We have an h1 that's a header 1 and that has a class. Class is the other side of the coin for ID. You can have many selectors with the same class and this allows you to apply your style to that class across different types of selectors. Our h1 says 8th Pluralsight course, HTML5 from Scratch and ends with a closed dash. We then have a general div on line 13 and its class is entry meta, indicating this is where the meta data is and then we have some spans, each with their own class, that indicate when this was posted. On line 18, the first section ends and on line 19 the second section begins with its own class. On line 20, we have a blank line, a paragraph with just a non-breakable space in it. On line 21, we have some text in a paragraph and that also has a link and an image. The next paragraph begins on line 26, which has a link and then some further text. Let's scroll down. We see the section end and we see an aside begin. Asides are typically used for side bars or for additional information about the text. This side bar, or this aside, has two sections. The first begins on line 34, which is the header for the aside and in there is an h2, and on line 38 is the second section in the aside and we have filled that with some Greeking. On line 49, we start closing out the section, then the aside, then the article, and we come to a footer, and in the footer is a paragraph, Copyright 2013 Jesse Liberty. Let's run this. In, for example, in Internet Explorer, and IE has made some guesses about how to format some of this so you see that the headers are bold and the links are underlined. It has picked a default font and all of the non-header text is the same size. We can now write our first style sheet to adjust this page and to get a sense of what style sheets are like and how you identify areas in the page. Let's minimize the browser. We'll go up to the top of the page and we're going to do an inline style sheet. As noted earlier, most professionals will use external style sheets for production, but internal style sheets while building the page to avoid problems with browser caching. To create a style sheet we'll go into the head below the title and we'll put in style and it automatically creates for me a closing style tag. If your editor doesn't do that you'll want to do that for yourself so that you don't forget to have the closing style tag. The first tag that we're going to address is the paragraph tag. I'd like to set how all of my normal text is going to look so I use the p selector, open and closed brace, and inside the open and closed brace I can put my property value pairs. The first thing that I'm going to do is to set the color to black and I can do that with a hex value 000000. This is red, green, blue in hex, semi-colon to indicate the end of the property. Then I'll set the font size and there a number of ways to set this. We can set an absolute an absolute size, a relative size, percentage, pixels, and so on. I'm going to use a relative size of medium. And then I'll set the font family and because I've been working in Windows 8, I'm very fond of Segoe UI so I will set that as my font family. I can bring up IE and immediately see the changes. Now these changes will be slightly subtle, but let's bring up IE, refresh it, and we can see the font has changed to Segoe UI. Let's go ahead and adjust what our headings look like. The h1 heading is going to have a color and let's set that color to something really clear and bold. We'll go ahead and set that to red. WebMatrix lets me pick that right out of a color picker, and I think what I want is fully red, so #ff00000; and then I'm going to set the font size to extra large, and once again I'll set the font family to Segoe UI. Now we will discuss later in this course how to avoid duplicating all of the font families to Segoe UI, but for now we'll go ahead and do that in each of these. And for h2 I'm going to copy and paste what I have for h1 and then modify it. So we'll say for the second level header, the color will be blue. So no red, no green, but all blue. And we'll set the size, instead of x-large, we'll set the size to larger and leave the font family Segoe. Finally, I have a footer and remember that in the footer I have a paragraph so I'm now going to use a somewhat more complex selector and again we will talk about these as we proceed, but this is our style sheet so let's get a feel for what can be done. I'll say footer and then p, and that indicates any paragraph within a footer and for that I'm going to set the font size to extra-small. Let's save the style sheet and bring back IE and refresh it and notice that all of our changes have taken place. Our first header is larger and red. Our second header about HTML5 is larger than the text, but smaller than the first header, and our copyright notice in the footer is nice and small. That's your first style sheet. In coming modules we will discuss how to work with all of the selectors, the different types of selectors, to pick out precisely what you're looking for.

Selectors Introduction Key to working with CSS3 is understanding selectors. There are three main selectors: tag, class, and ID. Tag selectors we've already seen. They are page-wide and they're easy to identify. Take the tag, remove the brackets and you have the selector. So for the paragraph tag it's just p. Class selectors allow you to select every element on the page with that class, so it's more selective than tag selectors, but lets you select a number of related tags and they don't have to be the same type of tag. It can be that you have a paragraph and a heading, etc. with the same class selector. You declare the class selector in the element, but you use the dot indicator in the style itself. The most narrow selection is an ID selector. IDs are applied to a single element on the page, one specific tag. That tag declares the ID and you indicate which ID you want in your style by using the pound symbol, sometimes called the hash symbol, to indicate the selector. IDs have a couple super powers. They can be used by JavaScript to uniquely identify a particular place on the page, a particular element, and they're good for linking to a specific part of a page so that you can link deep into a page rather than just to the top. Let's take a look at working with these three selector types.

Selectors Let's return to our previous demo where we showed using tag selectors of p, h1, h2, and the more complex tag selector of footer, space p, that is paragraphs, within a footer. You will remember that the effect of these tags was to take our basic HTML page and make it look like this, adding styling based on the tag itself. In this particular case we don't see the down side of using an h1 tag because there is only one header. If there were multiple headers on this page, h1 headers, they would all have this coloring and sizing. That may be what we want, but not necessarily. Let's return to the code, collapse our tags to make a little bit of room, and add some more specific tags. For example, we notice that on line 37, the h1 tag has a class entry title. We can imagine that there would be a number of tags with the same class entry title. We can style the entry title using a class style. Let's indicate that with a dot and then the name of the class and then the values we want in that class, which in this case will just be setting the background color. And let's set that to a gray. When we run the application now, save it, bring up Opera and update it, our h1 has a background color and that would be true for any tag that shared that class. We could, for example, add that same class to our h2. To do that we scroll down to where our h2 is and let's give that h2 the class equal entry title, which admittedly does not make sense in this particular case, but we'll illustrate that the class will now have its style carried over. Let's save that, bring back Opera and update it, and notice the h2 gets the background as well. We'll go ahead and take that out. Another class that we might want to update is the entry meta data, which holds the posted on, who it's by, the author. That's all under this one class entry meta data, and notice that these spans are contained within the div that has this class. So anything we apply to this class will automatically be applied to everything within it. Let's go ahead and add a style for meta prep. Once again we use the dot operator (typing), the name of the class, and then what we want inside that class. And we're going to set everything inside that class to italic. Save that, bring up Opera, and when we update, notice that only the first part has turned italic. This is immediate feedback that I've gotten something wrong. Let's go back and look. Meta prep. Ahh. Meta prep is the class is for the span, not the div. What we want is entry meta. Let's change it (typing) and save it and try again. Now the entire entry is italic. That tells us that we have the option of having some of that entry not be italic and to do that we can override the class author. So we'll add yet another style for author, which again is a class, and so gets the dot operator, but we're going to set the font style for the author to be normal. When we save it and update, we see that the italic is applied until the overriding application of the class for the author. Now what about IDs? Let's go back to our code and note that this article has an ID post 5946. There could be multiple articles, each with their own unique ID. I'm going to choose that this article should have a background color. To indicate that I want to style the ID, I use the hash operator and put in the name of the style and now I can set the background color and what I want is a light gray, so let's open up my color selector and move to a light gray, very pale, and we'll take that and save that, and bring up Opera, and update. And the entire article, not the copyright at the very bottom and not the header at the very top, but the entire article, now shares a common background color. So you can see that you can identify multiple elements on the page, using the class, or a single element on the page, using the ID.

Nested Tags Introduction In HTML5 we nest tags. The outer most tag is HTML. Nested within the HTML is typically a head and a body. In our example within the body we have an article and a side and a footer and this can continue indefinitely. Often, it's profitable to turn this nested diagram into a tree diagram that represents the same relationships. We start with the HTML tag. Nested within the HTML tag is the head and the body, but we now show them as descendents. The relationship between HTML and body is parent, the HTML and child, the body. A child of the head tag is the title tag. The body tag has three children: article, aside, and footer. Elements that are at the same level and share a parent are siblings so article, aside, and footer are siblings. Title is not a sibling because it does not share a parent and we do not recognize the cousin relationship. Under article we have two sections. In the first section we have an h1 and a div. The div has three spans. The second section has a p and an unordered list. Inside the unordered list are list items, two of which have hyper links or anchors. The relationship between section and body is ancestor and descendent. The section is a descendent of the body. The body is an ancestor of the section. The immediate ancestor is the parent. The body is the parent of the aside. The aside is the child of the body. The relationships that we've described are ancestor and corresponding to that descendent, parent and corresponding to that, child, and then sibling relationship. And to review briefly, article, aside and footer are siblings. The two sections are siblings. The h1 and div are siblings. The p and the ul are siblings, but the h1, div, and ul are not are siblings to each other; you must share a parent. The three spans are siblings, as they share the div as the parent. Let's put this into practice and see how it helps us select different elements in the page.

Nested Tags As noted in the previous clip, we've added to the second section an unordered list, in this case a list of books I've recently read, two of which have links to the book page on Amazon. We'll use this unordered list in our style sheet. I've collapsed the styles that we've added already and let's add some new styles using some of the relationships described in the introduction. We want to explore the descendent relationship and to do that we're going to want to differentiate between the anchor tags added in that list and other anchor tags so let's add an anchor tag to some of our Greeking. Here I've added an anchor to my web site for the first two words in the Greeking. Let's look at the page as it exists right now. Update the page and we have two links in our list of books, and if we scroll down we have a link in the Lorem ipsum in the Greeking. Our goal is to set the color for the links in the list, but not in the Greeking. Let's return to our style sheet. The way that we indicate this anchor tag is through the parent or descendent relationship. The anchor tag that we care about is a child of the li element, which in turn is a child of the ul element, which in turn is a child of the section element. We can be as specific as we like. For example, we can make a tag that simply says li a. (typing) That says any anchor tag that's in a list tag should be colored yellow and no other anchor tags. Now if we had a number of list tags we might decide that we only want that for our unordered list, in which case we could further specify by putting the ul in front and we can do that indefinitely to specify exactly which anchor tags we have in mind. If we save this and switch back to our page, update the page, notice those who have become a hideous yellow, and this link has not changed at all. I really can't stand the yellow. Let's make it red. Go back, and update, and one of the nice things is that you see that immediately. To further explore using the child and parent and ancestor relationships we need to stop for a moment and talk about pseudo-classes.

Pseudoclass Introduction A very powerful technique for finding just the elements you want is to use pseudo-classes. Pseudo-classes work just like classes for identification purposes, but you don't need to add anything to the element. These work on relationships. For example, first child. When you assign first child with an element, it identifies, as you would expect, the first child of that element. Corresponding to first child is last child. And a surprisingly useful pseudo-class is nth-child, especially when combined with odd and even, as we'll see in the upcoming demo. Corresponding to these three pseudo-classes are three that work on types: First of type, last of type, and nth of type. You can also manipulate what item is selected by taking advantage of the sibling relationship. You can find the first adjacent sibling using the plus sign and you can find all adjacent siblings using the tilde. Finally, another very powerful and useful pseudo-class is the not pseudo-class and this allows you to say all paragraphs that are not set with the class test, foo. Let's look at a demo of using pseudo-classes.

Pseudo Classes The first pseudo-class we'd like to work with is first child. If we scroll down to the section marked entry content, we see that it consists of a number of paragraphs. Let's set the first paragraph to have its text in blue. The way to do that, or at least one way to do that, is to use the first child pseudo class. However, notice actually that the first child of this class is an empty line and we didn't really want that there anyway so let's delete it. Now the first child of the class entry content is this paragraph. We'll go up to the styles and we will say class entry content first child, and then color, and we'll just put in blue. Let's save that. Bring up Opera. Update. And notice that the first child is now in blue. The nth child turns out to be remarkably useful. Let's scroll down again and see that we have a ul that has a series of li's in it. Before we look at the nth child, let's remove the links from these two listings. That gives us a clean set of li's. We have five of them. Let's go back up to the styles and we're going to find the nth child of the surrounding ul. I've commented out a previous style that might conflict with what we want to do now and what I'm going to say is for the ul, find the nth child where the value of n is odd and set the background color, and the color we'll set it to will be d5c1ff. Then we'll do the same thing, setting the nth child, but this time setting the even rows, and we'll set this one to be the hex value #ffffff. With those saved, let's bring back Opera and update it, and what we see is that every other line is now colored purple. All of the odd numbers, 1, 3 and 5, and the even numbers have a background of white, making this list very easy to distinguish. You can do a very similar thing with first of type, last of type, and nth of type as you do with child. For example, I've changed our Greeking to now be a series of paragraphs. If we run that in Opera, update the page, we see that it's now separated into paragraphs. If we want to change the background on every other paragraph, we can do the same trick here. This is in the class aside body and it's every other paragraph that we want to change. Let's come up and rather than using nth child we could do that, but let's assume there might be other things in that aside besides paragraphs. There might be images and so forth. We identify the class, then we identify the type, and say nth of type, and we are ready to set the background color. Let's go ahead and set odd and even and we'll grab the background color, and then just copy that, paste it, change it to even, and change the color. This says find the class aside body, find all of the paragraphs tags, and for nth of type, where n is odd, set this background color, and where n is even, set white. Save that. Bring up Opera. Update. And sure enough, we have every other paragraph with a different background color. I didn't say this would be pretty, but you can see how you can use this in selective ways to get exactly the effect that you want.

Summary In this module we looked at style sheets and we focused on the selector. The selector is to the left of the open brace. Inside the brace are property value pairs. We looked at tag selectors, which use the same syntax as the tag, but without the arrow brackets. We looked at class selectors, which use the dot, and we looked at ID selectors, which use the pound sign or hash sign. We also took a look at a set of pseudo-classes that can be used to identify specific sets of elements based on their relationship to a given element. We looked at the fact that HTML creates containment and that containment can be represented as a tree.

Inheritance and Cascading Introduction In this module we will talk briefly about the important topics of inheritance and how the cascade works in cascading styles. To understand inheritance, we need to review the inheritance tree. You will remember that we were able to describe the containment relationship by showing the inheritance tree where items lower in the tree are descendents and items higher in the tree are ancestors. Descendents inherit styles from ancestors. This inheritance can save a great deal of time and effort in your writing your CSS, as it avoids having to duplicate styles for descendent tags and properties. However, some properties are not inherited: Placement tags, margins, borders, background colors, are not inherited and that's a good thing because you typically would not want to place a style in, for example, a section and have all of the margins and borders and background colors carry through to all the contained items. Remember that browsers may override inheritance, but they cannot override explicit settings and when there's a conflict inheritance, the more specific style wins out over the inherited style. To get an idea of how all of this works, let's take a look at a demo.

Inheritance To understand inheritance let's return to our page where we have a number of styles. Inside the body of our HTML we have an article, inside of that is a section, inside is an h1, a div, and some spans. We have a second section with paragraphs and we have an unordered list, and then we have an aside. Finally we have the body of the aside, which also has paragraphs. There may be some properties and styles that we would like to assign to everything on this page. The easiest way to that is to add a class to the body and then to go to our styles section and add that class. The first thing that we'll do is to add a font family. Now I've taken the font family out of the other styles so the current look of this page before we add the style looks like this and you can see it's using the default from the browser. We'd like to set it to use Segoe UI and we'd like that on the whole page so we'll say font family Segoe UI (typing). Because the browser may not have Segoe UI, we'll then give it a fallback of Arial. If it doesn't have Arial we'll ask it to use Helvetica. Failing all of that we'll say use any sans serif font. We want the font size to be uniform and we'll set that to 18 pixels. Let's set a color and we'll have all of the font be bright blue. We're going to set a width for the body (typing) and we'll set a margin (typing). Save that. Bring back the browser. And when we update we see the margin. We see that many things have turned blue, but our paragraphs have not. That's a clue as to what's wrong. We have a paragraph style and that paragraph already has a color and a font size in it and that is overriding the inherited whole page style. If, temporarily, we comment out the paragraph (typing), save the page, and bring back the browser, now the page style is being applied to the paragraph as well. We can find out what style is being applied in any given location by placing the cursor on the content that we want to examine, right clicking, and choosing Inspect Element. Notice that the inspector on the left shows us what we're looking at and on the right we have a number of tabs, one of which is styles. Let's open this up. This is the computed style, which consists of the explicit styles and the implicit styles, the inherited styles, the default styles. Below the computed styles is the actual style. This is being styled using the pseudo-class nth child. It's also being styled because it inherits from ul. And it's being styled because it inherits from body. And so we see the color is blue because of that inheritance. The font family is set through the inheritance, and the font size is set through the inheritance. The inspector is available in virtually every modern browser, often by right clicking or by pressing F12.

Specificity Introduction Remember that the elements in an HTML page create a tree and a given element can be the descendent of numerous other elements. The inherited styles accumulate in each element so if I have a p tag, which is the child of a div tag, which is the child of a section tag, which is the child of a body, the styles in the body and section and div will all be inherited by the p tag. If there's a conflict between those styles then the nearest ancestor wins. So in the case we were describing, if there's a conflict between the div and the body, the p tag would inherit from the div. Explicit styles in a particular element win over all other styles. Sometimes, however, it is difficult to know or determine which styles should win when there are many conflicting styles. The actual rules for determining this are the specificity rules, which are mildly complex. Here's how you do it. You count the number of ID selectors, set that to A. You count the number of class and attribute and pseudo-class selectors and set that to B. You set the number of type and pseudo elements to C. You then concatenate A, B, and C to get the specificity. So let's look at the fourth line in the illustration, UL OL LI.red. There's no ID selector so A is set to 0. There is one class selector so B is set to 1. And there are three type and pseudo elements. We then take that 0 and 1 and 3 and concatenate them and we get a value of 13. With #x34y we have just one ID so A is set to 1, and B and C are set to 0, but that gives us 100 and a much higher value. Even higher than that is the last entry, which has an ID, which sets A to 1 and a pseudo element, which sets C to 1, giving the value 101. You can greatly simplify this system by simply assigning the value 1 for each tag selector, 10 for each class selector, and 100 for each ID selector, and then adding. In the vast majority of cases, this will give you the same answer, with a good bit less work. Remember to treat pseudo elements as one point and pseudo classes as 10. Be sure to use the inspector to examine your styles to double check that you're getting the style you expect. Let's take a quick look at a demo that shows the difference in specificity.

Specificity In order to explore specificity, I've added a couple classes, rearranged the HTML a little bit, and this is the result. The first question you have to ask yourself is, "how did this line become orange?" Let's take a look. Here is a list of books I just read, is simply in a paragraph. If we look at paragraph, the color is black. Clearly something else is affecting that. It's inside the class entry content. Let's see if we can find a style for entry content. (typing) Nothing. Coming down one more time we see that section also has an ID book list. It's a paragraph within the ID book list. If we go up to our styles we see there is an ID book list paragraph and that has a color, which has a higher specificity value than the value for the class alone, or the paragraph alone. One way to tell that a bit more quickly is to go to the paragraph itself, right click, inspect that element. And when you inspect that element, you can look at the styles and immediately identify that the style we're seeing is the ID book list paragraph and that's where we're getting the color. And in fact it goes so far as to show you that it's overriding the color from the paragraph style itself. IDs are so powerful and overpowering that many CSS authors avoid using IDs altogether and use classes instead.

Summary In this module we saw that descendents inherit their styles from their ancestors and that those inherited styles accumulate. We also noted that some properties are not inherited. When there are conflicts between two styles, they're resolved by the specificity rules, which can be simplified down to the idea that an ID is worth 100 points, a class 10, and a tag 1. However, rather than trying to compute the specificity rules, we strongly suggest that you use the inspector to determine where the rule that is being applied is defined.

Application to the Page Introduction In this module we will look at some more ways that you can modify your page and improve its appearance with CSS3. Let's start by talking about fonts. There are a number of different types of fonts. The three important types that we'll care about are: serif fonts, sans serif fonts and monospace fonts. Serif fonts have those tiny little legs at the bottom that make reading easier, especially in large paragraphs. Among the serif fonts that you might consider are Times New Roman and Times, Georgia, Baskerville, Palatino, Linotype, or you can you can just mark a fallback of type serif. Sans serif fonts do not have the tiny little legs and are very good for headlines. Among the sans-serif fonts that are popular are Arial and Helvetica, Verdana, Geneva, Tahoma, Lucida Grande, as well as Trebuchet MS, Century Gothic, or the generic sans-serif. Monospaced fonts are excellent for code. Among the popular monospaced fonts are: Courier New, Courier, Lucida Console, and Copperplate. All of the use of fonts depends on the font being available on the user's computer. However, that can be overcome with web fonts. With web fonts you instruct the user's browser to download the font that you need to the user's machine. However, this creates somewhat complex code and can raise legal issues as to the ownership and licensing of the font. One easy way around that problem is to use a font server such as Google Web fonts. Using Google Web fonts turns out to be fairly easy. You navigate to Google. Pick the fonts that you want. Request the code, which is a set of links, and put those links into your style sheet and then you just use the fonts as normal. When you use the fonts they will be downloaded to the user's machine. Let's take a look at how that works.

Fonts Let's return to the example that we've been working with. Here in Opera you can see that the fonts are all uniform and that is not surprising given our decision to set the whole page font family to Segoe UI. Let's comment that out for now and we will start up at the top with the paragraph font and we'll give the paragraph font a font family of a serif font, which is supposed to make reading paragraphs somewhat easier. We'll then go to our header and we'll give our headers a sans-serif font and we'll take that and apply it as well to our header too. Since we don't override it in the footer paragraph it will inherit the paragraph style. We're not overriding the font family anywhere else so we should be ready to go. Let's save that. Bring back Opera. Update and you can see right away that the paragraph fonts are now serif and they have those little legs or extensions on the bottom of each letter. You can really see that distinctly if you look at the U in about and compare it with the U in About HTML5 where the header is sans-serif.

Web Fonts To get started using web fonts we turn to Google fonts at google.com/fonts. You can search by name. You can search categories. Let's take out display and handwriting and search only for serif and sans-serif fonts and you can set thickness, slant, and width. In addition, you can choose whether you want Latin, Cyrillic, Greek, etc. We'll stick with Latin. You can choose the preview text that is shown to you to describe the different fonts and you can choose the size to examine those fonts and there are various ways to sort the fonts. There are, as you can see, many, many fonts to choose from, as we scroll down through this list. Once you find a font that you like, you have a number of options including adding it to the collection and that adds that font family to your collection. Some font families have only a single style. Others have multiple styles to cover such things as bold and italic. We can review the font we've chosen and if different weights are available we can set it at different weights. We have it look like a headline or we have it look like a paragraph and we can move that to full size as we narrow in on what we want. Another very nice feature is the pairings feature, which indicates to you other fonts that are often used with the font that you've chosen. Returning to the main page we can click use. This indicator on the right shows about how long it will take to download this font on your page. That is the impact that this font is going to have on the load time of your page. Scrolling down we see the instructions on how to embed this code into your web site and below that how to use the font in your CSS page complete with an example. Notice that the instructions on how to add the font to your page have a standard tab, which uses the link which must be added to each CSS page, or the import directive, which can be used just once, or the JavaScript, which can save time, but can be enormously complex. We'll use the standard, mark this and copy it, and then we will return to our code and notice it says, "copy the code as the first element in the head of your HTML document." Being obedient, we will go ahead and do that and let's break that up so we can read it. So we have a link with an href to the Google fonts. It tells what family we're choosing right in the URL. It has a relationship equals style sheet and a type equals text CSS. This type is not needed in HTML5 and so we can delete that. We're now ready to use that font as the font family for our paragraphs. If we go back to the Google fonts page, it shows you how to do that. Let's copy that code (typing). And again return to our style sheet and we'll copy that code right into place. Save the page. Bring up Opera. Update our page. And there's our font in use. So even though this font is not on my machine it's able to very quickly download it from Google fonts and integrate it into my page.

Jazzing Text Introduction There are a number of things that you can do to make the text on your web page stand out more, pop, and generally be more interesting. One of the simplest things you can do is to vary the font size. You set the font size using em or percentages and em is printer's measure and for purposes of CSS, 1 em equals 100% so .5 em is equal to 50%. You can also set the font size using pixels, or using keywords such as small, medium, large, extra-large, and so forth. You'll also want to adjust your text by setting the font color. There are a number of ways of doing so. Two of the most popular are RGB where you pass in a hexadecimal value where the first two characters are the red character from 00 to ff, and then the green and then the blue. A more powerful way to do so is to use RGBA, which works just like RGB, but adds an additional value between 0 and 1 for opacity where 0 is completely transparent and 1 is completely opaque, so you can have a little bleed-through of an image behind the text with .9 or a great deal of bleed-through with .1 or .2. You will, of course, also want to set the font style, setting such things as italic and bold, and if you don't want italic or bold you can reset it to normal. Capitalization can be done automatically in CSS using the text-transform and you can set your text to uppercase, lowercase, or even capitalize, which will capitalize the first letter of each word. You can use font-variant to set small-caps and you can use text-decoration for underline and overline. If you want to take precise control over your fonts you can set the Kerning; that is the space between the letters by using letter-spacing or word-spacing, and you can set the leading, that is the space between the lines by setting the line-height, which can be set either to a percentage or to a fraction. Let's take a look at a little of what you can do with fonts.

Jazzing Up Text You'll notice that we've already done quite a bit of jazzing up of our text by using color and font sizes. In the paragraph we have font size medium, in h1 extra-large, in h2 larger, and we've set the color of our headings. We've set the footer font size to extra small. There's still more we can do, of course. We've set entry meta to italic and author to normal, but we haven't played with capitalization. Let's see if we have an opportunity for using small caps. How about the header, "Here is a list of books I just read?" That seems like a candidate for small caps. Let's return to our page, find that line, and that's in the entry-content section. But we're going to need to add a class to the paragraph that we want to make small caps, so let's call this entry header. With entry header as a class we can go up to the styles and add yet another class, and in that class we can set the font variant to small caps. Save the page. Return to Opera. Update, and there we have small caps, giving a nice sub-header effect to that area. I'd like to tighten up the leading. Returning to the HTML we see that the paragraph where I want to tighten up the leading are in entry content. Let's go up and create a style for entry content and in that we'll set the line height to .8. Save that. Bring back our browser. And when we update we get a much tighter line height, but just for that one area. If we feel that we've overdone it, we can go back and set that to .9, refresh, and get a little bit more room.

Margins Introduction We now turn to a discussion of margins, borders, and padding and to understand these three concepts we really need to explore one of the key concepts in CSS3 and that is the box model. To a CSS3 developer a paragraph is just a box, an image is another box. In fact, each tag is a box and the page consists of boxes within boxes and boxes next to boxes. The margin is the space that separates one box from another, while the padding is the space between the border and the contents of a box, and the border is the line around each edge of the box. We can get a picture of all of this by looking at the content which is surrounded by the top right left and bottom padding, which in turn is surrounded on all sides by the border, which in turn is surrounded by the top right left and bottom margin. Tags can be thought as block-level or in-line. Block-level tags typically have space before and after them. Think of the paragraph and div tag. Whereas in-line tags, such as strong or emphasis or an image, do not have a space above and below. You can apply both padding and margin to all of these tags, but the in-line boxes do not have top and bottom margins and padding. Let's take a look at borders. You can set individually the border-top, bottom, left, and right. Or you can set the border all the way around with the single entry. This entry sets a 2-pixel border that is solid and black. You could've broken this down by setting the border width, the border style, and the border color. On a related note, you often want to round the corner of a box, and you do that by using the border radius. Let's take a look at working with margins and padding and borders.

Margins To get started looking at margins and borders, I've made a few adjustments to our styles, to simplify the styles and the page. Let's take a look at the page as it stands right now. As you can see, I've turned all of the text color back to black and removed the line spacing and the leading that was crowding up the list of books. Otherwise it's pretty much the way we left it. Our whole page tag affects the body. Let's come in here and make a couple more adjustments. We've set the font size to 18 and the color to black. Let's change the margin so that we have a margin for the top of 20 pixels, which will push the top down just a little bit and then let's set a margin on the left to auto, which allows the browser to determine the margin on the left, and we'll do the same thing on the margin on the right. Let's also set the width of the body to 750 pixels and put a border around it of 3 pixels. We'll make that a solid border and we'll set its color. Let's take a look at the impact of those changes by bringing back Opera and updating. And you can see that it has put a black border around the entire page. It has put a little bit of a margin at the top. It has automatically managed to equate the margins on the left and right given the size of our page and that makes for a tighter look for the page entirely. Let's add a shadow effect to the border. The first two values, 00, indicate that the shadow won't be offset to the left or right, or to the top or bottom. The 5-pixel value is the spread value. This pushes the shadow out 5 pixels around all four edges, and the RGBA sets the color, but also sets the opacity to three-quarters. Let's look at the effect by bringing up Opera. You can see the shadow effect is sublite, but makes the page stand out. Let's do a little work with our heading. We scroll up and find the h1, which already has its font family, color, and size set. We can center it with a text align and let's add some padding. Save that and bring back the browser. Watch that h1 heading as we update and you can see we've given it a little bit of room around the background as well as centering it. We can adjust the spacing between the h1 and the line that follows by changing the margin. Remember that the margin is listed in left top, right bottom, and while negative values make no sense for text size or even for padding, in margins they can be used to tighten up the box model. Let's bring up Opera and refresh and you can see we've been able to tighten up the header. We'll talk a good bit more about using margins and padding when we talk about float and creating floating boxes in our web page.

Summary In this module we discussed fonts; however, it must be admitted that one could do an entire course on fonts alone. We also discussed web fonts, which allow you to have the user download the fonts that you need and we looked at how to do that with Google fonts. We took at look at jazzing up your text in various ways and the implications of margins, borders, and padding and how you can use them to improve the layout of your page.

Page Layout Introduction In this module we're going to look at layout in CSS3 and the CSS3 box model. CSS3 goes well beyond fonts and color. One of the primary questions will be how we lay out the block-level elements on the page. There are two major approaches. Fixed width or fluid? In fixed width the width of your page stays the same no matter the size of the window or the width of the browser. In a fluid page the width of your page responds to changes in the width of the browser. Fixed width is certainly easier to do, but it may not be optimal for a given browser. Fluid is more flexible, but a bit more work. We're going to be working with tags and positioning our tags on the page. We'll use HTML semantic tags where appropriate and we'll use div tags where we don't have the appropriate semantic tag. To create a column we're going to set its width and then we're going to set the keyword float. Let's back up and talk about how you start creating your pages. It always starts with content. Once you know what your content is going to be, you want to identify the boxes. That is, the rectangles that represent the various divs and others block-level tags on your page. We'll then use the float keyword to float items into columns or within columns. To make sense of all of that let's take a look at some CSS3.

Layout Let's return once again to the page we've been working on and bring up Opera and take a look at what it looks like right now. There are a few things we'd like to do. First of all we'd like to take About HTML5 and have it be a column on the right-hand side. To do that we need to make a couple changes to the HTML itself. When you're creating a column, you want to have the HTML for the column before the main body of your HTML page, so we're going to take the aside out and move it above the article itself and drop it into place. The next thing we're going to do is give our aside a class so that we can identify the entire aside at one time (typing). So we'll give that the class sidebar and let's outdent that to indicate that the aside contains these two sections. The second thing that I'd like to do is add a little bit more content to the page itself so that the page is a little bit longer. So let's add two sections to the article. We'll scroll down below the section that has recent books and drop in another section with two paragraphs. Let's save that. Return to the browser. We don't expect that to look the way we want, but we do expect to see those changes. And sure enough, the content of our column is on top, and our page is now a bit longer with a little more content. We're ready to create our column. To do so, we're going to take the class that we used for the aside and create some CSS to indicate that that should float to the right. So let's go up to our CSS and we'll add a new rule, which will be sidebar. In this sidebar we will use the word float and we will indicate where we want it to float, in this case, on the right. Let's set a width for our sidebar and we'll set a margin on the top so that the sidebar is fit nicely into the page. We also need to mark off the main section so that we can give it a margin on the right that is larger than the width of the sidebar that will push everything over so that there's room for the sidebar and a small gutter, that is, a small vertical blank space. In order to do that we need to come down to our article and we're going to scroll down below the aside and find the beginning of the main area that is not within the aside and we're going to surround that with a div that we can give the class main section. Now of course, you can name it anything you like. (typing) We'll take the closing div, go to the end, and put the closing div right above the footer. That will cause the main section to stay to the left of our column. Let's save that. Return to our browser. And update. That's looking much better already, but they're running into one another. Let's go try adding that margin for the main section. Notice I make the margin larger than the width of the sidebar. Save that. Notice that the column on the right is separated by a small strip of white space. A little hard to see because the background of the column is white. That extra space is created by making the right margin on the main section a little bit bigger than the size of the width of the column. We would like this image to float over to the right and then have the content flow around it. To do that, let's return to the code, and add a class to the image itself. We'll scroll down and find the image. Set its class equal to image, and then scroll up to the CSS and add an image rule. We're going to set the width of the image here rather than inline as we had before. We'll set the height of the image here, and we'll give it a margin of 5 pixels all around. Most importantly we will tell it that it can float right and it will float within the column that it sits. Let's save that. Return to the browser. Update the browser. And now not only has the image floated to the right, but the content has floated around it. Let's review. This is very important. We did not want the content to float under our sidebar so we created a div for the main section and gave it a right margin that would keep it away from the sidebar. Here we did want the content to float around the image so we simply set the image to float right, but this content was not segregated from the image and no margin was set on this content, although a margin was set on the image, which is why it's not crowding against the right margin or the content on the top or to the left of it.

Layout Summary In this module we looked at layout with an emphasis on creating a column. To create a column, take the content that you want in the column and move it to the top of your HTML. Set the width of the column and set float. Remember to enclose the main section in the div and set the margin for the main section greater than the column width. To float an image, set its width and height, set its margin, and then set float.

Nav Bars Introduction In this module we're going to talk about navigation bars. Until CSS3, creating navigation bars could be a lengthy and tedious process. However, with CSS3 it's very straightforward. A navigation bar is really a set of links. A set of links is really a list of the different areas in your site and lists are implemented with ul tags. The first step is to remove the bullets from the tag. The second step is to eliminate all the padding and margins. You then want to set the display to inline block, which will take your block-level tag of ul and make it an inline tag, that is, there will not be a new line between each entry. You're then free to style the links any way you like. You could, for example, remove the underlines and set the color. You might even surround it with a border to create what look like buttons. Let's see how all of that is done.

NavBars This is what our page looks like right now. Let's add a navigation bar to the top of the page. We return to our HTML file and you'll note that I've added three new files, Opinion.html, Courses.html, and Books.html. They're all the same. They all have nothing but a header and that header indicates what page you're on. Returning to index.html, we're going to begin by creating an unordered list, which will become a list of links to the various pages we've added. Let's scroll down below the sidebar, but before we get to the main section and we'll add an unordered list, and let's give that a class so that we can refer to this unordered list and style it accordingly. Within the unordered list we're going to add some link tags. The first link is to this page, index.html, because presumably this menu would be on every page. The second link is to our books page, Books.html, and we'll have two more links, one to our courses page and one to our opinion page. If we look at the page now, without any styling whatsoever, we see that we've got a bullet list with these links. It has the background because it's in a list, and it's not positioned where we want it. The bullet points are over here. A little bit of style will fix all of that. Let's scroll up to the style section. The first thing that we want to do is to style the menu class itself. (typing) We can identify it. It is the menu class within an unordered list and our first change will be to set the list style type to none. That one change makes a significant difference. Let's bring back the browser, update, and notice we've eliminated the bullets in this list. Next we're going to set the padding left to 0 and we'll set the margin left to 0, and we'll set the border bottom to be a 1-pixel border that is dashed and we'll set the color for that. Let's save that and look at the results. Looking much better already. We want to change the style of each li item and the first thing we want to do is set the background color to be white (typing). We also want the display to be inline (typing). Let's save that. Once again, return to the browser and update. And that looks considerably better. What we have done is eliminated all of the confusing colors in the background except on the links themselves and we have set it inline rather than block so that they are next to each other. All that's left is to style the anchor tags. We can do that by saying that we want to style just the anchor tags in the menu. We'll set the background color to a nice neutral color. We'll set the foreground color to a 333. Display needs to be inline block. Let's create a border. Once again, a 1-pixel, dashed, and we'll set the color to be black. We don't need a border on the bottom so we'll set that to none. And we'll set the padding to give a little bit of space. We're almost done, but let's take a look at it right now and go to Opera. Update. You can see why we didn't need a bottom border because we're going to align it right on the dashed line that runs all the way across. And we have what look like buttons with links in them. We'd rather not have the links in them. We'd rather not have that underlined, so let's return to the style and tell it that the text decoration is none. Also notice the color was red instead of the color I wanted because I left out the pound sign. Now we have a valid color. Let's save the page. Return to Opera. Update. Much better. We now have what look like buttons. When we hover over them the cursor changes automatically because they are in fact links and we can navigate to the various pages using our navigation bar.

Summary In this brief video we took a look at how to create navigation bars. To do so, you use the unordered list. You start by removing the bullets and the padding and the margins. You then set the style to inline block and set the style of your anchor tags to whatever you think looks best.