Join Paul Trani for an in-depth discussion in this video Styling content using CSS Designer, part of Dreamweaver: Creative Cloud Updates.
In Dreamweaver CS6, which I have open here, as well as previous versions of Dreamweaver, if you wanted to change the visual aspect of the page is you'd actually do that through the CSS styles panel by adding CSS. And really it's just a matter of adding properties from this long list. And to be honest with you, it's not terribly intuitive. Which is why in the latest version of Dreamweaver this CSS styles panel has been replaced by the much more intuitive CSS designer panel.
So, here I am in the latest version of Dreamweaver and I notice the CSS designer panel off to the side. I'll go to split view just to point out that there is no CSS on this particular page, but I want to show you how to add selectors, add properties to some CSS. But I want to show you how to add your own CSS to a page. So, I'm going to start off right up here with the sources and just like it says I need to add a new CSS source by selecting this plus sign. And then I can create a new file, attach an existing one, or define in page which is what I'm going to select.
So, I've added that style tag. You can see it gets added over here. So, I can minimize that and go down to media where I can add some media queries. I'm going to skip this for now, because I want to just keep this simple and I want to go into selectors. So from here I can start to add a selector. Which ever selector I want, whether I want it to be. Paragraph or maybe body, I can add that body selector. Selecting that by hitting Return and then hitting Return again, to create that selector.
You can see it gets created over here and I can take a look at my Properties Panel, check this out, look at all of these properties that I can add. I can add them intuitively. Visually in a lot of cases, as I scroll down, this is much more intuitive, and just easier to add properties. In fact, you can see there's quite a few, which is why, we have the ability to jump down to particular sections. Whether it's, the text section, the border section. The background, or other. You can see I can jump around, in this case, the body of my page I can select text and I can change the default font to Gil Sans, basically that font family.
It changes it for all the text on the page. And I can change the color, just to a medium gray, just like that. I'd say that looks, pretty good so far. I can add some more, selectors as well, I can press the plus sign, and then add in say, h one in this case, selecting it. Hitting Return, and jumping down to Text, and maybe making my H1 a orange color. Just like that. In fact, let's change the weight to a lighter font, just like that. I think that looks pretty good.
In fact, I can save this page, and just select Live View, and just see everything rendered out. You can see have those two selectors, being show there, and as I select even this text right here, look what happens. In my selectors area, it gives me this computed. Whatever properties that were used to make up that element. It gives me all of those properties. Okay, so I can jump in here. It doesn't matter that this color was defined in my h one, I can jump in here and change that color easily as I'm doing right now.
So, I can change the color, really doesn't matter where it is. I can change it to what I want. All by selecting it right in here. So in this case, I'll just change it to sort of a green, kind of like that. And again, that's what Compute It does, it'll take all the properties and give them to you in this list. Same thing even if I select, say for instance, the body or h one selector, I can just show the set properties. So this just also makes it easier, rather than scrolling down that long list, I can show the set properties just by checking that box, and now I get the set properties for those items. So there's multiple ways to view, as well as change your CSS properties when it comes to the latest version of Dreamweaver.
I encourage you to check out the CSS Designer Panel. You will notice that it will be much more intuitive when you start adding as well as manipulating CSS properties.
Note: Adobe Creative Cloud is updated on a regular basis. We will add more tutorials as features are added or changed, so check back often.
- Getting used to the new interface
- Syncing your settings
- Implementing media queries with CSS Designer
- Working with the Fluid Grid layout updates
- Adding HTML5 audio and video