Web Typography for Beginners: Decorate Your Text With HTML and CSS

1. Introduction : Hi, I'm Brent Miller and today I'm going to teach you how to implement creative and eye-catching typography on web pages. For the past few years, I've written code behind websites. I've worked on business apps with the focus was on input labels and tool tips and a clean professional style. I've also worked on plenty of brochure websites with bold, artistic headers and long-form content. After you've finished this course, you'll be able to take a sophisticated type design from a designer and implement that design in perfect detail in an actual working web page. If you're the kind of person who likes coming up with your own designs, you'll have a much better understanding of how styled text works for the web. You'll have a set of techniques at your disposal for experimenting with those details. You'll also develop a stronger knowledge of HTML and CSS in general. If you're interested in web design or web development more broadly, you'll have a stronger foundation of knowledge in those areas. I'm assuming you're at least interested in lettering or typography or web design. You don't have to be a professional designer to succeed in this course. But if you are, you'll pick up a few new tricks. You also don't need to know any programming before getting started, though, if you have a very basic knowledge of HTML and CSS, you'll find that knowledge helpful. If you have any questions as we progress through this course, please feel free to post them here in the course. You can also reach out to me on Twitter or LinkedIn. I also highly encourage you to post your projects here in this course, whether you finished them or not. If you get stuck in a problem, please feel free to post your project as a ''work-in-progress'' and ask for feedback. No matter how you reach out, I'm committed to helping you succeed and answering any questions that you might have. That's it. We're ready to get started. Let's dive in and I'll see you in the first lesson. 2. Setting Up the Project: This lesson is all about the course project. It covers what you're going to make throughout the course and how to get started. On the screen, we see a simple webpage. It's the about us page for the fictional Letterville Library's website. There's not much going on here besides the typography. For those of you who want to keep things simple, making this page will be your goal. I'll take you through all the steps needed to go from plain text to this. If you plan to follow my project example, here are two important links. I posted these links in the course notes, so feel free to copy and paste them. They show you what you're going to start with, and what you're going to end up with. You don't have to follow my example project. However, some of you might have your own goals and projects in mind for web typography. Some of you might think, I'm a horrible designer and that you can do way better with this example page. Both of those stances are completely fine. Feel free to implement whatever project you like. For the rest of this course, however, I will use this Letterville Library demo as my principal reference. Now let's talk about CodePen. You might have noticed all this extra stuff on top of our webpage. That's because I'm hosting this project on CodePen. Codepen is a playground for building simple web projects and prototypes, which is exactly what we're doing in this course. If you plan to follow my project example, you're going to use CodePen. Now a lot of you are probably asking, ''hey Brent, are you asking me to create yet another online account?'' Well, the answer is maybe, strictly speaking, no, you don't have to create a CodePen account to succeed in this course, but you will find it easier to share your work or come back to it later if you have an account. I'm not going to go into the details of creating a CodePen account in this course because it's super simple. Once you're on CodePen, just click that sign-up button on the top of the screen to get started. The last step in getting your project ready to work, is to fork my starter project. Forking is just fancy programmer lingo for making a copy. Let's go to the Letterville Library starter project. There was a link on that slide, and there's also a link down in the course notes. This is the starter project. The text content is on the right, and then we have these code boxes on the left. Once you're logged in on CodePen account, for those of you who are going to use your own account, click this ''Fork'' button here on top of the screen. Once you do that, you should see this username over here change from my name to your name. Or if you don't have account, you'll see the words captain anonymous there. Once you see that username change, voila, you now have your own copy of this project. You can change it, save it, do whatever you like with it, it's your own project from this point forward. Now, CodePen has a tone of features, but we're not going to cover most of them in this course. We're going to keep things simple. I'll show you just enough features here to complete your projects. First, this panel over here on the left with different sections. We're only interested in two of the sections here, the one marked HTML and the one marked CSS. If you don't know what any of that means, don't panic. It's okay. We're going to cover all of this, I promise. The HTML and CSS boxes are where your code goes. Notice there's already some in there. CodePen will take the code from these boxes, and turn it into the output or results on this larger part of the screen. It does this in real time, meaning as you make changes to your code, the results update immediately. For example, if I had up to our Letterville Library header, and I've put my cursor there, and I delete the E character, wait a second. Notice the E just disappeared from our results page. That's because CodePen reloads our code live on our sample webpage. If I go back, and type the E back in there, wait a second, and then the E returns. That's all you really need to know about CodePen. 3. Structure your Text With HTML Tags: This lesson is all about HTML. We cover what HTML is, what it does, and how to use it. HTML stands for hypertext markup language. The definition gives us a clue of what HTML does, it marks up language with tags which give the written content meaning. In this course, we'll use HTML for two things one, to give our text structure, and two, to provide a bit of basic styling. Looking over our existing HTML code here, notice it isn't just a giant blob of text. It's broken up and wrapped in these matching sets of words called HTML tags. Let's take a look at our page title for example. So here we have the Letterville Library, and this phrase is wrapped in a pair of matching h1 tags, and it translates to this header output over here, on the right. Note the second tag called the closing tag, has this forward slash in front of the h1 part. All of the tags in this course will have this opening and closing tag duo which leads us to our next bit of vocabulary. An opening tag comes before the text content and does not have the forward slash. A closing tag comes after the text content and has the forward slash in front of the tag name. When we put the opening tag, and the text content, and the closing tag together, it forms an HTML element. Our second use for HTML is to provide basic styling. Some HTML tags, but not all, will provide your content with a bit of default presentation. Let's take a look at that page title again over here in our code. Notice that it's bigger than all the other text on the page besides the other headers over here in the output. The browser sees it, we've wrapped to the title in that h1 tag in our code, and makes the title big and bold over here as a result. Here's a list of all the HTML elements from our Letterville Library project. Don't panic, we'll come back to each of these at different points in the course, but for now, I'll explain just a few of them. First, we use the p or a paragraph tag to define a single paragraph of text. By default, browsers will give paragraphs extra white space above and below. Here, notice the paragraph beginning with, we aspire, here in our code is wrapped by opening p and closing p tags and then here in our output, notice it's kind of styled like a paragraph with a bit of top space and a bit of bottom space. Second, the strong tag gives us elements of bold style. So notice here we have the word empower wrapped in the beginning strong tag, the opening tag, and a closing tag with the slash over here on our output has taken that word empower, and it's made it bold. Third, the em element sets its text in italics. Notice the first two words of each list item down here are wrapped in em tags and notice how they're italics in the results. We scroll down in the code and notice em tag here around we foster, em tag here around we act, et cetera. Finally, we're going to implement the last element of this lesson together. You've probably gotten the main idea behind tags by now, so this is a good point for you to start working. The mark tag highlights texts with a background color. Let's go back and look at the first sentence of the last paragraph, beginning with, how we pursue. Here in the code, there is how we pursue wrapped in opening and closing paragraph tags. So we're going to highlight this with a mark element. We place our cursor right after the opening paragraph tag, we'll type in the word mark in our angle brackets, and then here at the end of that sentence after the period, we'll have mark with a forward slash meeting at the closing tag, and there we go. We've set this first sentence as a mark element, and notice here on our web page, our browser has given it this background color as a means of highlighting it. There are many more tags in the HTML language than what we've used in this project. If you're interested in learning more, I recommend reading Mozilla's HTML elements reference guide. 4. Lists: This lesson explores lists in webpages. We'll cover how to make lists and how to adjust their presentation. We already have an example of a list here in our project down towards the bottom. Making list is pretty straightforward and we do it with just HTML. All lists have an outer tag, which is either an OL or UL tag, and one or more inner LI tags. Here in our HTML we have an outer UL tag which contains the entire lists. Inside of that we have five LI tags each of which contains the content for a single list item. Over here in our results, notice how the browser gives our list a bit of default styling. Each list item begins on a new line and has a bullet symbol in front. There are two principal types of lists. The first, which we see here in our project are unordered lists. Unordered list show bullets, disks, or other non-numerical symbols in front of their list items. We make a list unordered by using the UL tag. Ordered lists on the other hand, display a sequential order. Each list item begins with a number or a letter in front of it. We make a list ordered by using the OL tag. Here is another exercise for us to complete together. Let's temporarily change our list from being an unordered list to being an ordered lists. We highlight the U in our UL tag here in our HTML, we type an O instead of the U. Notice CodePen just updated our closing tag for us to be an OL tag. Now over here in the results, we see that we have numbers in front of the list instead of the bullet points that were there before, because now we have an ordered lists. But for our final project, we don't want the numbered list in here. We want that bottle list. We'll go back to our HTML, take out that O, put the U back in. CodePen just updated our closing tag for us, and now we return back to this unordered list again. You can nest one list inside of another. Let's try this. Let's add a list item at the end of our set. We go down here, we'll add another LI tag. Then inside of our LI tag, now we have a closing tag. There we go. We're going to add in another list. This is going to be an OL tag and that we're going to close this with our OL. Now we have a second list inside of a list item. We're going to add two list items to our interior list. I'm just making the tags here, our content is going to be I love. Then we're going to add in an LI. This is going to be letters as our second list item. Let me do the close. There we go. Now we see we have this nested ordered lists inside of our outer unordered lists. We can always change this. If I change the O to the U, like we did before, there we go. It updated for a second and they had the bullets there. It has a different bullet style because this is a nested list, but we still see it as part of the outer list. Now we don't want this extra list item in our final project. So we're going to delete it and get rid of it. Now we're back to the way it was before. That concludes our lesson on lists. If you've decided that you love lists and want to learn more, check out this tutorial. 5. Sizing Font With HTML: In this lesson, we'll learn a few techniques for making text bigger and smaller with just HTML code. We'll begin with header elements. Notice how we already have a few section headers on our screen. They correspond to these H1 elements that we have in our code. There are actually six different levels of section headers in HTML. We define the level of section header by the number in our HTML tags. Notice that all of our section headers are the same level, H1, this is H1, this is H1, this is H1 and so on all through the different headers that we have. Thus in the output over here on the right, they all have the same size. This doesn't work very well from a design perspective, it doesn't give a visual hierarchy to our content. From a programming perspective, it makes our code harder to understand since our elements are not communicating our intended hierarchy. Let's go to the pages subtitle elements, the About Us element and change it to an H2 elements. I'm just going to replace the number 1 and this opening tag, the number 2 CodePen is updated our closing tag for us. Now notice in the results, the subtitle just got a bit smaller. Next, let's change this section header above each paragraph to an H3 element. For our mission, I changed it to an H3 for our vision, I change it to an H3 for our values, a change it to and H3. Now we've updated these to H3 tags and notice the section header is now communicate a visual hierarchy and the code we have over here communicates our intended structure. Another element which changes the size of text is the small element. The small element is typically used to represent fine print in a document such as a copyright or legal text. It makes his text content one size category smaller. Notice the last sentence on the page describing the copyright license is the same size as all the other text. Since it's a copyright notice, let's make it smaller, like a footnote over enter HTML box we'll scroll down to the bottom and we noticed that this written content starts the sentence inside this paragraph tag. We're going to write the opening tag of small here in our code. There's the opening tag of small. Then at the end of our content, at the end of this closing a tag, we're going to do the closing small tag just like that. Now notice over in the results, the sentences now one size smaller and it looks like a footnote. There we have it. We just adjusted the size of our text content using HTML tags. 6. Sizing Fonts With CSS: In this lesson, we'll continue learning techniques for making text bigger and smaller. This time, we'll get our first taste of writing CSS code instead of HTML. CSS stands for Cascading Style Sheets. Web developers use it to define the visual presentation of content in the web pages. Let's take a look at this CSS box I briefly mentioned earlier. It already has some stuff in it. Most of these are comments and they don't change the results. Instead, they're only for developers to read and they help developers understand the code. For our first piece of CSS code, we're going to set the font size of a few of our elements. At the bottom of our existing CSS code, we're going to write our first complete CSS rule set. Let's write an h 1 and then we'll write an opening curly brace like that. CodePen realizes what we're doing and just gave us a matching closing curly brace. Hit the "Return" key to give us our code on a new line. Then we're going to type the word font, dash, the word size, a regular colon, a space, and then the number four, the letters r-e-m, colon. Now, notice what just happened to our header, our title up here on top. That was because we just changed its font size. I should mention that CSS is Case Sensitive. When we're writing CSS code in this course, it has to all be lowercase for it to work correctly. Let's break down what we just did. Each CSS rule set consists of a few components. The h 1 part of our set is called the selector. Selectors can get complicated but in this course, we're keeping it simple. The h 1 means that the rules will apply to all h 1 elements in the results. The opening and closing curly braces establish the section where the declarations will go. Inside the curly braces comes one or more declarations. A declaration is a single thing you wish to change about the selected elements. The property of each declaration comes before the colon and it's the thing about the element you want to change. In this case, we want to change the font size of all h 1 elements. The Property Value comes after the colon. It's the appearance you want to assign to the property. In this case, we want the font of our h 1 elements to be four times the size of our body font. The REM unit means we're multiplying the root font size by a given number in this case, four. Finally, it's a best practice to always end a declaration with a semicolon. Technically speaking, you don't always have to but make it a habit and you'll be covered. Now, let's set the font size of our other headers after the h 1 rule set, add an h 2 selector. We add h 2, opening curly brace on a new line. We'll use font size again. So that's font dash size, colon, space. This time we're going to assign 2 rem as a value. That means make it twice the size of the body font, and notice over here our subtitle just got bigger based on our CSS code. Finally, let's do the same for our h 3 elements. It's going to be the same code but this time we're going to change the appearance of three elements at once. After our h 2 selector, we'll add an h 3 selector, we'll have our curly braces. We're going to write the font-size property again for the font-size value. Let's do 1.75 rem. You can play with sizes if you want to, it's your projects. I'm using 1.75. Then notice our headers here on the right are just slightly smaller than the page subtitle. They all changed in value because our h 3 rule set selected all three h 3 elements in our HTML code. That concludes our lesson on sizing fonts with CSS. If you want to get much more precise with sizing fonts, I recommend this tutorial on different ways to size things in CSS. 7. Web Font Basics: In this lesson, we cover what web fonts are and how to use them in your project. A web font is a font that the browser downloads from the Internet when it loads a webpage which uses that font. This differs from native fonts, which are already installed on the user's computer before the browser loads the page. I assume you already know what a typeface and a font are. If not, check out this Wikipedia article on the subject before continuing this lesson. One of the easiest ways to incorporate a free web font in your web project is Google Fonts. If you want to follow along with me, navigate to fonts.google.com. Google Fonts has hundreds of free web fonts that categorize dozens of different ways. I encourage you to explore this site on your own. For this course, we're going to find and use the Lobster Two font family. So in the search box, type Lobster, and you'll notice it comes up with two results. We are going to use the Lobster Two font, and so we're going to add this Plus icon next to the font name. This collapse panel down to bottom lets us know that we have selected the font. Click this little panel down here to expand it. The panel gives us the controls to customize an import our selected font for our project. First, let's check out this customize tab over here. This gives us the font in different styles, four of them. Regular and bold refer to the font weight, or 400 and 700 respectively, and each weight comes in an Italic and non-italic style. In this project, we'll only use the bold, non-italic font face. So I selected those options. Switching back to the Embed tab, Google is telling us how to embed our selected fonts in our project. To keep things simple though, we're going to do things just a bit differently from what Google suggests. Let's switch over to the import technique, then select the code in between the style tags here. Be careful to exclude the style tags from what you're selecting, and then copy them. Now let's turn back to our project. At the top of this CSS box, right after this comment about import statements, Paste the code we copied from Google. Now the Lobster Two bold, not italic font face is ready to use in our project. Our next step is to assign the Lobster Two font to the headers with the font family property. Let's look at a slightly more complex CSS rule set. Notice there are two selectors, not one. They're each on their own line separated by a comma. This means that the declarations here will apply to each of the specified elements. In this case, the font-family decoration will apply to all h1 and all h3 elements. The next difference is in the property value. Here we have two values separated by a comma. The first value is in double quotes. The font-family property lets us specify a primary value followed by a series of backups. If the browser can't find the first font-family we asked for, it will use the second one. Here, we're telling the browser to use the Lobster Two font if it can find it. If the browser can't, then it should use the user's computer's default cursive fonts, whatever that font happens to be. Specifying backup font-families like this is a best practice, since you never know what kind of problems might arise when a user loads your specified web font. Finally, since the same Lobster Two has a space in it with a name, we need to wrap it in quotation marks. The quotation marks tell the browser that Lobster Two is a single font name, not two font names. The quotes are required here. Let's implement that same rule set in our CSS code. In our CSS code, we're going to scroll down. Right in front of the h1 rule set we've already written, we're going to write a new one. We'll write h1, and then h3, and then we'll have our curly brackets, and then we're going to use the font-family property. So that's font-family, and then a colon. We're going to write out Lobster Two inside of our double quotes, and then we're going to list cursive as our backup, and then a colon. Now, notice that we have just applied this nice font to our page title and our section headers. 8. Custom Font Faces: This lesson will teach you how to implement a custom font-face. In the last session, we downloaded a web font from Google fonts. Even though we didn't see it in the code, Google provided us a font-face definition for the lobster two bold, non-Italic font when our browser downloaded it from Google's servers. We don't always have that luxury. Sometimes we only have access to the raw font files themselves. In these cases, we have to write our own font-face definitions. I'm not going to go over the different font file formats as many topography enthusiasts are already familiar with them. If you're not, feel free to check out this article. Reading it as optional for our purposes in the course. I will point out though that as I'm recording this video, the most reliable file format to use on the web is the WOFF format W-O-F-F. I'll show you how to use it later in this lesson. For our project, we need to define three custom font-faces, Roboto regular, Roboto regular Italic, and Roboto bold. Font-face rules can include several properties. In this project we'll just use four. We have covered the font-family property before. One difference here is that in a font-face rule, we don't specify fallbacks. Fallback font families are better specified in the rule sets which style elements such as header rule set we wrote earlier. The font style declarations sets whether a font should be styled with normal Italic or oblique face from its font-family. In this project, we use normal and Italic faces. The font weight declaration specifies the weight or boldness. To keep our project simple, we're just using the normal and bold values, though we could get much more specific if we wanted to. Finally, the SRC, or source declaration, tells the browser where to find the resource which contains the font data, such as all the cliffs that make up the font. In many cases, such as ours, the source value will be the location of a font file. In this project, we'll use the URL parenthesis format value, which provides the browser with a specific file location. Finally, this format parentheses value after the resource location helps browsers to understand the type of resource we're providing. Let's implement a few custom font-faces in our CSS code. In our CSS box, just under this import at rule, you'll notice this comment I've put in there about Roboto font-faces. This will come in handy in just a minute. By the way, we call this an at rule, not a rule set because of that Ampersand symbol in front. Just below our comment about our font-faces, let's start writing font-face at rules. Let's start with Roboto-regular. We'll use font-face. We'll use our curly braces, we specify font family. We're assigning the Roboto font family. We're going to use font-style property. We're not using Italics for this particular face, so our value here will be normal. We write the font weight property. Let me spell it correctly W-E-I-G-H-T. There we go. We're not using a bold font-face. In this case, font weight is normal. Lastly, we're going to use that source property to find the data resource. Here is where these three comments come in. Up here at top, I've given you a file locations for our three different font-faces since we're there to find the Roboto regular font-face, I'm going to copy and paste the Roboto-regular file location. We need to include the quotes inside the part that we're copying. We use the URL and then parentheses. We're going to paste that file location inside the URL. We're going to add the formats helper with parentheses since this is a WOFF file, we're going to put in WOFF as our helper and close the declaration as always with a semicolon. Now that we've defined our robot or regular font, it's time to apply it to our page's content. Even though you don't see it in our HTML box up here, all our results have a body element. All webpages have a body element. In this case, Code Pen is hiding the body element from our HTML box to make our lives a bit simpler. But just imagine that all of the HTML code and our HTML box lives inside of a body element. We can still style our webpages body element though. Here in our CSS box, we scroll down a little bit and you'll see this comment I've written about the body element. Just beneath this comment, let's write a new rule set. We'll select the body element, curly braces, the font-family property. We're going to use Roboto as our first value and then comma. Then we're going to give us the default sans- serif fallback in case the browser can't find Roboto and then that's it. Notice in the results here that most of the text now use the Roboto font. You're seeing the result of inheritance in CSS. In this case, except for the header elements which already have the lobster two font assigned to them. All the text elements of the page have inherited their font-family property from the body element. Generally speaking, unless the CSS rules have specified otherwise, each HTML element will inherent most styling properties from the element which contains them. This can establish a chain of inherited properties all the way through to the root HTML elements. Now, I know that was a lot to take in, but you don't need to worry about those details too much to succeed in this course. Consider that a preview of a more advanced topic. Now, here's an exercise which you are going to do on your own. Your task is to define the other two Roboto font-faces, Roboto-regular Italic, and Ruboto-bold. Just beneath this first font-face at rule, you're going to write two more font-face at rules, one for each font-face. Use the URL values I provide here in the comment above. If you need a hint on how to do this, go back and review the font-weight and font-style properties from earlier in the lesson. You can also use my completed project has a reference. Again, I posted the link to that completed project in the course notes. You won't see any changes in the results when you implement these new font-faces, we'll apply them later in the course. If you're interested, there is a lot more to learn about font-faces on the web. Here are a few resources to get you started. 9. Making a Text Column: This lesson focuses on constraining the width of textContent within a vertical column. Notice how our longer text elements like paragraphs and list items span the entire web page and then wrapped down under subsequent lines. As a neat trick, we can resize our results section here just by grabbing the center divider and dragging it towards our results. Maybe that's what our content will look like on a smartphone, and you can restore the size just by dragging that center divider back out towards the center. Right now, these lines of text are pretty long. To boost readability, most designers recommend line lengths somewhere between 40-80 characters. Our first task is to constrain the width of our text elements so that the lines don't run longer than some specified width, like 60 characters. To create a column of textContent on a web page, we first placed that content inside a containing HTML elements. I have already done this for you. In our HTML box, notice this div element, which wraps all the other HTML cod. Notice it's opening tag here as closing tag is down at the bottom, at the end of all of our other content. We can say it contains all the other HTML elements in the project. A div by itself is a fairly generic HTML element. It doesn't provide any styling on its own, but developers often use it to hook their own styling code into a specific place in the HTML, which is exactly what we're going to do here. Switching down to our CSS code box, I've placed a comment and row set for the column just below our body row set. As my comment here states, I've already provided the div element with a bit of styling, which I won't cover in this course, since they really don't have to do with styling text. Now, to restrain the width of this column we'll use the max width property. As you can see, there are several different types of values we can assign to a max width property. Fortunately, we're not going to use all of them in this course. Since we want our lines to be no longer than 60 characters, we'll go with this ch unit of measure. The ch unit represents the width of the 0 character of the font associated with the element. As a side note that tutorial on the screen there will take you into much more detail on how to use different units in CSS, so explore that resource at your leisure. Let's finish our declaration by setting a value of 60ch. In our div, we add the max-width property and we give it a value of 60ch; and now notice the width as wrapped all the way down to about 60 characters at the max, is now contained in a nice simple column. I want to close this lesson by mentioning two more CSS properties which you might find useful. If your texts contains a super long word which is longer than the maximum width for that element, you can specify how you want the browser to treat that super long word. Use the break word property to tell the browser to break up the word into pieces and separate those pieces over multiple lines, or to let the original word overflow the maximum width on a single line. When this word breaking happens, you can use the hyphens property to tell the browser whether to insert a hyphen symbol in between those broken up word chunks. I'm not going to demonstrate these properties, but feel free to dive into this tutorial to learn more. 10. Horizontal Alignment: In this lesson, we'll learn how to horizontally align our text. We begin with the text align property. In short, text align works just like the alignment options in word processors, letting you align text along the left edge, along a right edge, down the center, or justified out to both edges. Let's apply the text align property to our page title and subtitle. To make our code a bit more efficient, we're going to apply the style rule to the header element rather than to each of the H1 and H2 elements. We can see in the HTML box that our header element wraps both of the H1 and H2 elements. By placing the rule on the header, the H1 and H2 elements will inherit the rule from our header element. Down in our CSS box below the rule set we wrote for our development, we're going to add another rule set. We'll select the header element and then add curly braces like that. We're going to add the text align property like that. Now, if we add the right value to this property, we're going to see, look, our page title and subtitle have aligned towards the right edge of our center column. I'm going to use center in my project. So we see that the page title and subtitle are now aligned in the center of our column. Pretty simple, right? Well, it looks that way. One caveat here is that text align only works on block level elements and table cells. A block level element automatically appears on a new line. With an inline element, however, you can place several inline elements next to each other and they will all appear on the same line. We can see examples of both types of elements here in our project. Looking at this first paragraph of text. Remember these strong tags that make their comment bold, we use the strong tags over here in our HTML. These are inline elements. Notice how they don't break, they don't cause any line breaks in the results, that's what makes them inline. By contrast, let's look down at our list items. Notice how each list item automatically starts on a new line, these are block elements. The key thing to remember is that the text align property only works when you use it on block elements. The goal of this rule is so that all texts content in a single block, like a paragraph, will have the same alignment. This technique works for centering the text content within a block element. But what if we want to center the block element itself? Take our column, for example, wouldn't it look nicer if this entire text column were centered in the page? The easiest way to center a block element which is thinner than its container, is to set its margin property to auto. Elements margins helped to determine the amount and type of negative space around the element. Let's return to the rule set for the div, which forms our column here. We're going to add a new declaration with a margin property, so we do margin and then we're going to add the auto value, and there we go. Look, the column is now centered in the page. Just remember that this technique only works when the block element is thinner than the element which contains it. If the center element is the same with as its containing element, this technique won't accomplish anything. For those of you interested in learning more about setting the negative space around elements, feel free to check out this tutorial. 11. Spacing For Letters, Lines, and Words: This lesson is all about spacing, we'll cover how to precisely set the spacing between letters, between words, between lines in a block element, then between block elements themselves. Let's tackle letter spacing first. This will change the amount of space between individual letters, or what designers often call the kerning. Let's take another look at our H2 rule set in our CSS box. Add a second declaration with a letter spacing property. So letter spacing is letter-spacing. You can use a negative value to decrease the default amount of letter space. So let's try negative 0.2 REM, negative 0.2 REM, and then a semicolon and then notice the letters of our subtitle just got a little bit closer. Personally, I think this is kind of hard to read. So let's give it a positive value of 0.1 REM, I get rid of negative, change the two to one, and now we have a little bit more space. The word spacing property works much like letter spacing, but it adjust the space between words instead of between letters in the same H2 rule set, let's copy and paste the letter spacing declaration. I copy it, and then I paste it in and lining it up. Now let's change out this letter forward. Now we have the word spacing property. Also just to make this really obvious, let's set the value to one REM and now notice how we have a nice wide gap between our words. Personally, I don't like the extra space. You can keep it if you like. I'm going to remove it. So I removed the word spacing declaration in our CSS and now we have a little bit tighter word alignment there. For the last of the three simple text-based and properties, we can adjust the line height of text elements with a line-height property. This property will specify the height of each line of text on the page. In our LetterVille Library Project, we want all the paragraphs and list items to have the same line height and we want that height to be a bit taller than the default spacing. So down at the bottom of our CSS box, let's add a new row set. We'll select all the p elements and then we also want to select all the LI elements. Do our curly braces. We're going to add the line-height property, so that's line-height. We're going to give it a value of 1.5 and what this does is it sets all of our lines of our paragraphs and lines of our line heights to one and a half times their font size. So notice here in our results and we now have taller spaces between our wrapped lines of text. For the final technique for spacing text on the web we'll cover margins. Take a look at our list items. Though each new list item begins with a bullet in front, it can be hard to tell at a glance where each list item begins and ends. I think the list would be easier to read if we had extra space between the items. Unfortunately, we can't use the line-height property here because that would add extra space to all of the lines of text. So we'll use the margin bottom property to add extra white-space to the bottom of each list item element. So at the bottom of our CSS box add a new rule set for adjust LI elements. We're going to use the margin-bottom property and I think 0.5 RAM does the job nicely. So do 0.5 REM colon and now notice we have a little bit of extra space between our list items that makes it just a little bit easier to read. That's it for our lesson on spacing text for the web. In your own projects, feel free to experiment with these properties and the different units of measure in CSS. See what kind of creative designs you can come up with. 12. Decorating Characters and Words: This lesson will cover a range of CSS properties which decorate characters and words with Visual Flair. Let's start with color. I'm assuming you already know the different ways to specify a color. If you don't, I highly recommend reading this free Mozilla tutorial before proceeding. Once you understand color values, the changing the color of text elements is pretty simple. It's boring for all the text on our page to be black. We can make the header stand out with a bit of color. So in our CSS box, in the h1 and h3 row set we already wrote, let's add another declaration. The property is simply color. For this value, we're going to use a forest green. I provided a few color values up at the top of the CSS box here in this comment. So I'll just cut and paste this light green value and then come back down to our color property and paste it in. Now all of our headers, the h1 and h3 headers now have this forest green color and the color palette has a bit more variety. If we scroll down towards the bottom, we'll notice our hyperlinks have the default blue color that most browsers assigned to links. Since we're going with the green and black color palette, we need to change those links to green. Down at the bottom of our CSS box, add a new rural set which selects a elements. Those are hyperlink elements, curly braces, and then the color property. Now, unfortunately, the green we use for our headers is too late to use on body text. It doesn't provide enough color contrast and wouldn't meet accessibility standards, so we'll use a darker green. I'll scroll back up to our comment about color values and then I'm going to copy this value for dark green for links. Then I'll come back down to the a tag styler and I'll add in the color value. Now I noticed our links have changed to that dark green text. Another color property we can change is the background color. Notice this highlighted sentence which begins with 'how we', if we look in our HTML here, we notice that the sentence is wrapped in a mark tag. This tag provides a default background color behind the text content it contains. I don't know about you, but this yellow, it's kind of bright and distracting. I'd like to tone it down a bit. Down at the bottom of our CSS box, I'm going to add another row set. This time we use the mark selector for Mark elements, curly braces. We're going to use the background color property, so background color and then a space. Now we're going to go back up here to our color comments and I'm going to copy the pale yellow color for our mark tags. I come back down and I paste that value. Now we go. Now much easier on the eyes and it's still highlighting the text, but now it's not nearly as distracting. For the final style property of the lesson, text transform changes the casing of text Content. It's pretty straightforward. It changes texts to be either all uppercase or lowercase, or capitalize, which says the first letter of each word to uppercase and all the other letters to lowercase. Let's set the page subtitle to all lowercase letters. So scroll back up here, we have our subtitle and an h2 tag. So that's what we're going to change down in our CSS box. We're going to go up, find the h2 row set. We're going to add a new declaration. This time it is the text transform property. We're going to use the lowercase value. Now notice the subtitle is now all in lowercase. 13. Text Shadows: Our final lesson of the course is, for me, the most fun. You can get really crazy with text shadows and create styling effects which look like Word Art. The finishing touch on our Letterville Library project is to add text-shadow to our page title, to make an eye-catching and memorable. The text-shadow property takes three or four components for its value. The first component, the offset-x, is required and it specifies the distance to shift the shadow left or right with zero placing the shadow directly behind the text. A negative value shifts the shadow to the left of the text. The second component, the offset-y is also required and it specifies the distance to shift the shadow up or down with zero placing the shadow directly behind the text. A negative value shifts the shadow above the text. The third component, the blur-radius is optional and it specifies how wide and light the shadow is. If not specified, it defaults to zero. The fourth component, the color, is required and it sets the color of the shadow. Let's put this into practice. In our CSS box, return to the H1 row set. We'll add a new declaration with a text shadow property. So that's text-shadow for the property. We'll use an offset-x of negative 4px, standing for negative four pixels, to pull the shadow to the left of its text. For the offset-y, we'll use four pixels to shift the shadow below its text. We'll skip the blur-radius and for the color, lets grab a lighter shade of that forest green from the top of our color comment. Here we see light green for the text shadow. I'll grab that, copy it, come back down, and then use that to finish out our text property. There we are, you can see a lighter shadow of the original text just to the left and below the text. A cool thing about text shadow is that you can layer multiple shadows on top of each other for a more complex visual effect. When you specify multiple values for a text shadow property, the browser will apply the shadows front-to-back with the first shadow on top. Let's add another shadow to our H1 element. In front of the original shadow value add a comma, we'll use the comma to separate the two values. Add an offset-x of negative two pixels to pull the shadow slightly to the left of its texts. We're going to add an offset-y value of two pixels to pull the shadow slightly below its text. We'll skip the blur-radius again, and we'll give the color value white. Now we can see the second white shadow, just above the first light green shadow, but below the text, creating an outline effect. As I mentioned earlier, there are many more visual creative effects you can achieve with text shadows for those interested, check out this free tool to explore demos and experiment with different text shadow values. 14. Conclusion: Congratulations on reaching the end of the course, you made it. In this course we covered a ton of techniques for styling text on the web. Everything from changing the font size to the color, implementing a Google Font, defining a custom font face, tech shadows and so much more. If you have any questions on anything we covered here in the course, please consider posting those questions here in the course. I'll answer them the best that I can. Also, I highly encourage you to post projects here in the course, whether you followed my Letterville library example or you did your own thing. Other students and I are interested in seeing your work. This is your time to shine. Also, if you struggled with anything in this course, consider posting your work in progress as your projects and ask for feedback. I'll review it. I'll give your pointers. You can always remove your work in progress, and post your finished project later. Where do we go from here? I have four suggestions for what to do when you're all done. First, if you enjoyed this course, please consider leaving a positive review here in this course, other students will want to know that you enjoyed this course and you found it useful. Two, consider following me here on Skillshare. There should be a button for that down below the video. I plan on teaching more courses, and HTML and CSS in the near future. I'd like to keep you posted when I post that content. Third, visit my website. I publish a weekly roundup of tutorials and demos for HTML, CSS, and Web Graphics. Fourth, I share a ton of free resources for learning web development on Twitter and LinkedIn. So connect with me there. I love teaching this course, and I hope you enjoyed it as much as I did. Thank you so much for joining me here, and I look forward to seeing you in my next course.