Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.
What I want to do now for my web page is take a look at the design and the hyperlinks within the original design, and you can see they're fairly spread out. They're all capital letters. They're in a particular font, and what I like to do is get that type of formatting in CSS done before I start adding the positioning piece. And I do that, because, once I get these more spread out on the line and the text is in upper case, so it can take a little more space. Sometimes, if you've already added the positioning, when you do the formatting, you have to go back and modify the positioning again because the content fills out a bigger area than it originally started. So, I'm going to add the formatting to make it look like this. Now, in my original design, I'm using Marriott Pro and Minion Pro as fonts and these are not installed on most people's systems.
So I'm going to accommodate for that by adding a font that is on most people's systems. And I'm going to fine-tune the features of it to make it look very similar to that graphic design font, but let's get the styles going. The first thing I need to do is figure out what I'm going to style, and what I want to style is the actual text within the hyperlink. So the next closest tag to style is the a tag. So that's what I'm going to do. So I put the a as the selector in front of the curly bracket, then within this area it's a matter of, okay, what are the styles that I want to add? And what properties and values created those styles? So the first one I want to add is font-family.
And within the font-family, what I'm going to add is Lucida Sans Unicode. And this is a font that I can manipulate just a little bit using CSS. And when I do that, and let me put the font-family here. You usually want to put a default family, in case something else is not there. And quite often, you'll do this. This is known as a font stack.
You'll put a sequence of fonts and the system looks at the first one. If it doesn't exist, it goes to the second, and just continues. To save us some time within the course, I'm just using two. I'm also going to use font size. Now, as I start typing, you'll see these properties pop-up. So I'll go ahead and use those to save some time. And the size I'm going to use is 0.75 ems.
And an em represents the width of the letter m for the default font within that area. So since Times is the default font on the system, what it will do is measure the width of the letter m in Times New Roman, at whatever size it is in the browser, and that will be considered one point all. So I can go above and below that. So this is three-quarters of the default size on the operating system. And if you aren't sure, just use 1.0.
And then, you can see if you need to go higher or lower than that. Now, the other thing I'm going to do is use a text-transform feature. We're going to let CSS capitalize everything, every letter. If you choose Capitalize, it capitalizes words, not letters. So what I want to choose is uppercase. And the last property I'm going to add, actually, there are two more I'm going to set up.
I'm going to add letter-spacing, and my letter-spacing is going to be point 0.02em. And we'll take a look at what that does. Also, the last piece I want to add is display block. And what that is going to do, is take every a tag and put it on its own line. So, let's Save the page, and put it in the browser. You can see I do have them on their own line.
They're all uppercase letters. They're not quite spaced far enough apart. I don't have a bold on these, which I may or may not want to do, but I definitely need to add a line height to spread these out. So, I'm going to add a line height of 3 ems and we'll see how that works. So, line height of 3 em. That would be three times the standard size of that particular letter, and let's take a look at what happened.
It definitely spread it out much nicer. Now, the other thing I need to get rid of is the underline here and I'll add that. That is text-decoration. And that would be text-decoration of None. That should get rid of my underlines. So, my formatting will be all set. This time, I think I'll look at this in Safari. It's good to test in multiple browsers. And my underline is gone. Notice my colors are default colors still.
I think I could use a little more space in between these letters, but I can fine-tune once I've completed the positioning piece. At least I have the formatting in place enough, so that, these are all uppercase, which makes them take up a little more width. And my line height has been spread out, which allows them to take up more height within the browser window. So there we are with our menu and the basic formatting is set up for our text. I can fine-tune it once I set up the positioning piece. So that is setting up our CSS formatting for hyperlinks. Because, every one of these, has that a tag attached to it. Every link adopts all of the properties within this area. So that is some basic link formatting in CSS.
There are currently no FAQs about Exploring CSS Positioning.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.