Join Paul Trani for an in-depth discussion in this video Styling content with CSS, part of Creating a First Website in Dreamweaver CC 2014.
Now, even though I have some of the content in place, including some of the structure if you will, it's actually a far cry from what I want. Because it's just not styled. I need to add a lot of design to it. Well, where is this design going to come from? Let's go ahead and take a look at our design. In the Assets folder, you'll notice design in jpeg. But you can see, it's a far cry from what I currently have. I mean look at this gray content, we have all this imagery which I'll add later. But not only that, you have content floating to the left and right.
We've added these bars, you have plenty of padding going on so all of this is really driven by css. So, we're going to dive in create a CSS file and start just adding some style to this currently boring content. In fact, we're not going to include any graphics just yet. But I am going to go back into my HTML file. And in fact right up here, since this line is really bothering me the most I want to add style to it. And this is all done with the CSS designer panel.
Nothing is in here yet. In fact, the first thing I need to do is define a source. So, right up here at the top. Clicking that plus sign, starting at the bottom. I could define CSS on the page or I could hit New CSS File. Which is what I want to do. An external file that I can have my other HTML pages point to. And if I change that CSS file, it will change all my HTML pages. So, that's what I want to do I want it to be linked.
I'm going to select browse. And keep in mind, I created a local site so I want to make sure I create a styles CSS file. That's in the same folder as my website, okay which happens to be on my desktop currently. All right, so saving it there, clicking OK. It's created this styles CSS. In fact, you could see that line right here pointing to it and that's exactly how the path should look since it's in the same folder as my HTML.
In fact, I can click on the styles CSS right here and this is the blank page I've just made. So going back to the source code, any time you see an asterisk right here, it means that file is not saved. So just be aware of that and if you want to just save all your pages, you can go to file, save all. And it will save them all. But really, there's nothing in here yet. And what I want to do is I want to add some style to this line right here.
Passionate about visual storytelling, right here. Okay, with that selected I'm going to select Styles CSS. So I'm saying in this source, in fact I can select Global if I want to. This is a media query. We will get into that later. But right down here, this is where I want to add a CSS rule, a specific selector. So I'm going to add selector. And when I click Add Selector, this is what it does. It's saying Body H1. Why does it say that? Well, right over here, you can see it says Body H1.
It's because that H1 is encompassed within the body there. So anytime there's an H1 within the body tag, it will change appropriately. You could even clean this up even more just like I'm going to do because I'm going to the word body. So now, I'm saying anywhere on the page where there's an H1 go ahead and give it these properties. Because, as soon as I hit enter, I get all of these properties. So I'm going to scroll down all of this stuff if you will that I can add.
All these various properties. Now, I want to change the text so I'm going to select text, and it's just going to jump me down to that text area. And from here, can start to add some style. And to be honest with you, I want to change it to the font family. So changing that default font, and yes, I could easily go with any one of these system fonts, but they don't give me enough flexibility. I want something unique like you saw a second ago. I'm going to manage fonts, check this out.
Right in here, it will open up adobe edge web fonts. So from here you can peruse through all of the various fonts and you can sort by even say a script font. because that's what I'd want to use is just a nice, script font. In fact what I like is I like lobster. I'm not going to lie. I'm going to use lobster. Checking that box, now lobster will be added to my CSS style page, all right? Not only that, I also want a basic font for some of this paragraph text.
And in that case, I'm going to search for a font. So I'm going to search for source. In fact, I'm going to uncheck this. And I'm going to search for Source, because I want Source Sans Pro. Okay? So, search for the font that you want. You check that box. It means, it's going to be added. So, I'm going to click Done. Notice my font didn't change yet. Right? It did not. But if I take a look at default font, you could see there it is lobster and source sans pro.
So, I can select lobster right there. You might get a pop up that talks about type kit which you have access to as a creative cloud member allowing you to add even more fonts as well. But I'm going to close that and keep it mind that it does say it will change various other properties when you select or change your font. So you can close that dialog but you can easily see it says passionate about visual storytelling. It looks great and those other properties are right in here so it gives me all those weights for lobster.
But that's why I picked Source sand probe because it has so many different weights. So let's jump into some of this other content right here. For this H2 I'm going to do the same thing.Selecting that H2, going over here, selecting the styles. You can see that H1, clicking right there, there's my H2, cleaning it up. For that H2, we could change that font as well to lobster. Okay, it did already make it smaller, that's fine. Moving on along, even for this paragraph text, I could change it.
In fact, I'm going to do you guys one better. Check this out. Selecting the styles.CSS and clicking the plus sign. But it keeps saying body and then p. But if I want to make all of the body text source sans pro where I can remove that p and just go with body. So the body text, everything on the page, changed that text to. You guessed it. Source Sans Pro. Selecting that, you can see it's changed that font and really, all the text on my page that's not specific changes to Source Sans Pro.
So far so good. I'm noticing right down here for this copyright, made with 100% recycled pixels. I want to do a couple of unique things with this one right here. Because I quite frankly want the footer to have a black background and the text to be white. So with that footer selected, I can come over here. Add a selector. It's going to add that footer. Again I am just removing Body there. And now I can have some fun with it. Okay? So I've played with text. Let's go to the background.
Let's change the background color to black. Just as expected the text is still there. It's just that it's black. So we need to change that text to white. Hit enter and see your text there, not only that, we want to be able to change the font weight, if you will. And you can see all those different weights right in here, I can make it a little bolder. If I want to about 600, okay, the reason I made it a little bolder is because I need the size to be smaller.
So, we're going to change the size to extra small. Notice I can use other different types. So, I can do a pixel precision if I want to Percentage based. Ms. I'm just going to pick Extra Small because whatever Extra Small is on that device or desktop, it's going to be small. So Extra Small is what I'm picking, and you can see. There it is. I'm going to line the text to the center so it's nice and neat in the center there and I'd say that looks good but I need more padding around it now as well.
Well, how would you do that? Right up here, the layout, very important. Coming in here and this is where we get to have fun with the margin for instance. Okay, so this says it's going to give me the space around that footer. So I can select that number, which is zero pixels, and I can change that to something like five percent. Hit enter, okay. Another thing I can do, is I can lock this down.
And now, it will actually give me 5% around all the sides. So, if I change any one of those to 5%, it's going to give me that padding around it entirely. Notice how it's still tight on that text. So the inside padding, which is why the inside box is darker. I can give it padding in there as well. So, I want to just add 10 pixels padding on the inside. In fact, I'm going to do at across the board. 10 pixels like that, and that's what I want. All right, so those are the fundamentals.
I can do the same thing right up here for the navigation. So I can select the Nav. Clicking on Nav, so make sure it says Nav there. I want to basically do the same thing. Okay? So right over here. Adding that selector called nav. There it is. And I want to do roughly the same thing. So, changing the background to black. Going to the text. Changing the text to white. There it is. Centering that text just like that, we'll keep the font style and wait as it is.
Let's play with the layout the same way which is right down here, changing the margin. In this case, I want to lock it down and change this to 5%. So, it's even with the footer just like that and we can also give it some padding of 10 pixels like that. Okay, make sure that's locked down type in 10 pixels and there it is. That actually seems like quite a bit of room so in this case maybe I might want to change it a little bit. Let's unlock that, so unlock the padding and type zero in there, or even take it down to say half.
Say five pixels that looks a little better. Like that. And again, that's for the nav. So that is styling content with CSS, notice how I've added this styles.CSS page. And you can seem all of the different selectors right in here that I've created, which are also on that CSS page. So, I can select that H1. And rather than scrolling down to what has been changed, you can select.
Show me the set properties. Much easier to read and now you can jump down and see what we've changed so far and how everything looks. All right? But not only that, a lot of code has been written behind the scenes. So I can select this H1, just do a right click. And you can Go to Code. Selecting Go to Code it will open up the styles, CSS and you can see all of that CSS that I didn't have to write line by line.
It was just a matter of selecting properties off to the side. So the last thing I'm going to do for this for now is do a Save All to make sure everything's saved. And really my next step is to work on this layout some more, adding some images specifically in formatting some of this text.
Author Paul Trani begins with brief introductions to HTML and CSS. Then you'll learn how to create a basic webpage, add text and images, and style the content with CSS. Paul then shows how to add navigation and links between pages, integrate video and social media (such as a Twitter feed), and create a contact form. The course also covers making sure your layout is "flexible" (i.e., that it resizes to fit mobile devices), testing your site, and uploading it to the web.
- Understanding the Internet and websites
- Adding HTML content to a webpage
- Styling content with CSS
- Creating navigation
- Adding more pages
- Creating a flexible layout
- Adding video and animations from Edge Animate
- Linking to other pages and websites
- Creating a contact form
- Creating a responsive site for mobile devices
- Uploading and testing the website