Join Paul Trani for an in-depth discussion in this video Styling content with CSS, part of Dreamweaver CC 2015: Creating a First Website.
- Now that I have the HTML structure in place I can now get into designing this content, this is the fun part. In fact, if we take a look actually in Photoshop this is where I have this design JPEG open. Feel free to open this up, this is in your assets folder if you have access to it. And you can see how this content is laid out, we have a logo, we have the nav, we have a custom font here, another font here, some content right here as well. So, I really need to get this formatted correctly, but we're just gonna start with some of the fonts and these two bars, this header bar and this footer bar right here.
So that's where we're gonna start, in fact jumping back in here starting with this h1 is where I wanna start, but really what I need to do is I need to set up a CSS page, this is gonna contain all of my Cascading Style Sheets, okay? So in order to do that I need to go to the CSS Designer Panel. So it's gonna be filling in the blank starting at the top and moving down. Notice how it says, "Add a new CSS source", so I can click right there, okay? So I can attach an existing one, define in page, but really what I wanna do is I wanna create a new CSS file.
Alright, my new file right here, in fact we will just jump in and call this "Styles.css", it's gonna be linked, and where do we want it to go? Well, we wanna go and include it in the same folder, this "index.html". Again, "Styles.css". I can save, click Okay, and there it is, okay? Notice on Media it's just gonna say "GLOBAL" so I can minimize that, but this is where I'm gonna be working, "Styles.css". Now we get into the Selectors, so the specific selectors, now my selector here is gonna be h1 right here, so if I wanted to add a style for this h1 with it selected I just need to go over here and Add Selector, so when I select that you can see it says "body h1".
Why does it say "body"? That's a great question, I'm gonna open up Split View, and you can see this h1 is right here and it's within this "body" tag right here, it's body and then h1. So that's what it does, keep in mind I'm in Live View, but that's why I get that, but I can always double-click and say, "Hey, you know, let's make this clean, "let's just make this h1", just like that. So go ahead and do that, and I'll say that looks pretty good, and I can start to stylize this, and that's when we get into the properties right down here.
Notice how it says "Show Set", you can uncheck that and look what it opens up, all these different properties for this h1 tag, so I can jump to those different areas right here as well. But even for the properties for the text we can keep this simple, we can jump into Font Size, alright, and I can jump in and make it ems, ems are, you know, adjustable across devices and browsers, whether it's a phone to a tablet to a desktop, it's going to adjust, so I usually do ems but you can also do pixels and points, okay? So I just made the font size 2 ems.
And I can start to change the font size of all of these if I want to, but I wanna go beyond that because, really, these fonts, I need new fonts, I need to go beyond these guys, so what I can always do is, again, just go in here, Add Selector, and, again, "body" and then "paragraph", or I could just go with "body", why not? Let's just add this "body" selector, and now notice how it highlights everything, it's saying, "Hey, you know, we're gonna change the font for everything", I'm like, "Great".
So I'm not a fan of that font. Jumping down to the text area we wanna change the font family right here, "Select set font family", and you'll notice there's quite a few in here, you can play with it selecting different ones. They are okay but I wanna show you what else you can do because you go down here to "Manage fonts" you have access to even more using Adobe Edge Web Fonts right in here. So I encourage you to kind of peruse through all of these, there's quite a few, you can start sorting through different ones whether it's sans serif or serif, whatever the case may be.
I'm gonna search for Source Sans Pro, that's what I like, Source Sans Pro, because there's many different font weights, and really you just check that box right there, check it right there. And you can add as many as you want, so I can add Source Sans Pro, I'm gonna do a search for Bitter, Bitter is another one that I want to add so I'll add that one, again it's just checking that font. And let's search for League Gothic right there.
Those are the three fonts, in fact down here I can list the fonts that I previously added, but in general I've added all three, so select Done. It's added all of them, okay? But it doesn't change my fonts yet because now I need to jump in here and you can see, standard ones, my new ones, so this is nice, I can jump in and say, "You know, for everything change it to Source Sans Pro", boom, done, right? It does say that, you know, it won't modify other properties because this font has different weights, so it's saying "Hey, there's more weights available to you".
Great. Okay, this doesn't quite look like my Photoshop document, so I can jump in here, notice right in here this is actually my League Gothic, that's my heading one, and then we have Bitter right here, so that's what I wanna do for those two. My h1 going back in there, selecting h1, going to that font, changing that font family to League Gothic, there we are, great. Taking this h2... Now the h2 I haven't made yet, so again, it's just a matter of selecting h2 and saying, "Hey, let's add a selector", there it is, clean it up a little just by having it say "h2", and then change that font family to Bitter, okay? That's what I've selected, Bitter, and then we have League Gothic.
I'm noticing this font size is kind of large, I'm change this to ems, let's kind of see where this is at and I can always kind of scroll through this which is what I'm doing. I would say I want about a 1.5 ems for that, maybe a 1 em, maybe 1.2. And this is scalable so it's gonna be flexible across different devices. Okay, so all in all this is starting to come together, and like I said I actually wanted to do a little bit more for the nav, I wanna put this in a bar, and I wanna put the footer in a bar.
So selecting this nav right here, same process, adding a selector, we don't need all of those tags, I just wanna select nav, and at this point I can start to change more properties. So right over here, let's actually jump down to background, notice how I can change the background color, and I can pick anyone I want, I actually wanna do a specific number so I will jump in here and do #222325, kind of like that light gray, and that's what I'm going with.
Alright, you can still see the black text in there, well, let's make it white text by changing that font color just like that. Okay, it looks pretty good, more I need to do I could probable use to center this text, well, guys, it's pretty easy, I can select the alignment to center it and I can start to play with it some more. In fact, in this case I wanna play with the layout, so jumping in there, selecting the layout, because I know it's really tight in there, I just wanna give it a little more breathing room.
So if I scroll down to margin I can jump in here and do a percentage for the margin, maybe do 5%. So it did 5% on this side, see how it did that, and even right over here I can change this to percentage to be 5% as well. You can kind of see how you're able to kind of move content in and I think that looks pretty good at least for now and I wanna do the same thing right down here for this footer. So, again, add that selector, make sure it's just called "footer", and then just have fun customizing, you know, changing the background color again to that specific number in this case, like that, changing the font color, you get the idea.
And I encourage you to kind of peruse through all of the different capabilities you have right in here, you know, even for this footer I know I want the font size to be smaller, I don't always have to use ems, I can get specific, I can go at some of the standards or I can even jump in and say, "Hey, you know, "let's make this extra small", okay? And that's fine, again, this is a case where I need to add a little more buffer around it which is gonna deal with the margin, again, as I come in here. Now, here's something nice that you can do as well, you can click here to change all the properties at once, so I can go ahead and type in 5% for that footer and that's gonna change it around all the sides from top to bottom, all that good stuff.
And a little bit for the padding, which is gonna be on the inside, so for the top maybe I'll have five pixels, the bottom five pixels, just like that, okay? So that's what I'm working on, I'd say that looks pretty good for now, hopefully you understand the basics and I wanna start to review what we've actually created, okay? Because we've created this "Styles.css" and I can see these different styles right here. We've created the separate page, if I look right over here under "index.html" here's the "Styles.css", so I can select it and you can see all that content that I didn't have to type in but I can easily change in Code View right down here if I want to, and I can change back to Source Code as well.
So "Styles.css", notice how it has that asterisk, that means it's not saved so I encourage you to do a Save All, once you're at that point, okay? So I'll just go back to Live View, there's my "Styles.css", here's my content, I can select those different items, and keep in mind you can always jump in and say "Show Set" and this will just show the set properties for that specific item, a little bit easier to see, helps out a ton, just remember you have that checked in case you try to add more properties you might not see them 'cause that is checked, okay? All in all even right up here we will see a couple of these items, and if we take a look that's just an "@fontface", so this is when we added that font, if I go into Code View for the source code you can see it's just using those Edge Web Fonts right there.
So all in all, congratulate yourself on setting that up, don't worry about those, we're dealing with our "Styles.css" globally, and we have made various selectors and given them properties. So really last thing you need to do is just make sure everything's saved, and I encourage you to play around with various CSS properties with your design.
Over the course of the training, you'll learn about building basic webpages; adding text, links, images, and navigation; and making your layout "flexible" on mobile devices. Each step provides another lesson on HTML and CSS, the building blocks of the web. Along the way, Paul shows how to add bonus features, such as animation from Edge Animate, a Twitter feed, and an interactive contact form.
- Planning a website
- Creating your first webpage
- Adding HTML5 content
- Styling content and the layout with CSS
- Adding images
- Creating navigation
- Building alternate layouts for tablets and mobile devices
- Adding animation and video
- Creating a contact form
- Uploading and testing the website