Tip:
Highlight text to annotate it
X
The
key to creating, managing, and editing your CSS in Dreamweaver is the CSS Styles panel.
Acting as a central hub for all things CSS and Dreamweaver, it provides you with both
a global view of document styles, as well as allowing you to focus on individual
rules and style applications. You'll find the CSS Styles panel in the
CSS panel group usually located at the top of the panel dock.
To take a closer look at it, we'll go ahead and open a file up.
If you're following along in the exercise files, make sure you've defined a site for
the Chapter 1 folder, and we're going to open up the 0102.htm file.
If you are not following along with the exercise files, really any file that has some CSS already
inside of it will work for this example. Now as I mentioned before, the CSS Styles
panel is found at the top of the panel dock in the CSS panel grouping.
Now it takes up a lot of screen real estate, so if you're working at a smaller resolution
like I am, you're probably going to want to expand it and then close all of the
other panels that you might have open. So I'm just going to move down
between the CSS and Application panel groups and drag that down a bit to expand that out,
so you see a little more of what's going on inside my panel,
and I'll close the Files panel. That gives me an opportunity to sort of filter what I'm
looking at and make sure I'm looking just at my CSS Styles.
Now if we turn our attention to the CSS Styles panel, notice at the top of the panel we have
two buttons, we have All and we have Current. All's going to give you
an overview of all the styles that currently affect your document. Well the Current one
is going to allow you to introspect a specific style and
look at properties of that or a specific element on the page.
Now if I close the main.css here, you'll notice that it also lists embedded styles in your
document as well. So whether a style is external or whether
it's embedded in the document, it's listed. And the great thing about the panel
is it shows you the difference between the two of them. Embedded styles will appear in
the tag, just they do within your code.
External styles show up with the name of the external style, main.css in this case, listed
up here. You'll also notice beside the main.css, it
lists screen and projection, so if you declared a media type for your external styles,
you'll see that listed as well. Now if I expand the main.css,
I can begin to look at all the rules inside my external style sheet.
If I select one of the rules- and I'm just going to select blockquote here- notice that
below the rule now we have a listing populated with all the properties for the blockquote,
and I can just sort of scroll down through all the properties for it.
So here I get a nice overview of exactly what this style contains. Now another great point
here is that I could edit these properties if I wanted to.
Viewing properties in the CSS Styles panel, we have three different views that we can
choose, and if you look at the bottom of the CSS Styles panel you'll see
a row of icons and there are three icons to the far left.
The first one shows a Category view, and if you click that,
you'll see a listing of different categories. These categories mimic the CSS Rules definition
dialog box, so for those of you that have created rules in Dreamweaver before,
it's pretty much the same organization and structure.
And if you open up one of those categories, any properties that have been applied, again
are in blue. Now the second view
is the List view, and List view shows any applied properties at the top of the list.
Again they're in blue, so it's pretty easy to tell which properties have been applied
and which have not. But if you scroll down, the rest of the properties are
listed in alphabetical order, and it lists every single possible property, so if you've
forgotten exactly how a property is written, you can scroll down through this
list and find it pretty quickly and easily. The third view is my favorite, and this is
the Show Only Set Properties view. This one is a little nicer, because it sort
of filters out anything that hasn't been applied, so you only see the
properties that have been applied to this particular rule, and for me that's a lot easier
to keep things organized. A lot of folks in Dreamweaver, some decide
to hand code, some people decide to go through the rule creation dialog boxes
that they have, or editing a rule by double-clicking...Actually I think
the easiest way to edit a rule is just use the CSS Styles panel.
You'll notice at the very bottom of the blockquote rule,
there is a link that says Add Property, and if I click that I can begin typing in
whatever property I want . If I wanted to, I could just go ahead and
finish typing it in, but I can also grab the pull-down menu, and
notice that it populates with all the different possible properties.
If I go down into my font properties, I notice that a couple of the font properties that
I'm used to seeing here are missing. Well the reason they're missing is because
they've already been applied, so it only shows you the properties that you haven't currently
applied So I'm going to choose font-style.
And again I get another pull-down menu, and I can choose italic.
If I wanted to I could have just types that in.
Now to see if that worked I'll scroll down to find my block quote.
And it's just down the page a little bit, and sure enough, my quote is now italicized.
So that is awesome. A very quick and easy way to edit and apply
styles. I'm going to scroll back to the top of the
document, and I want to click in the headline New York City.
So just go ahead and click to place your cursor inside that headline, or any other element
on the page the you want. At this point, I'm going to switch my view
in the CSS Styles panel from the All view to the Current view.
When I'm in Current view I get a much more introspective view of that specific element.
And if I scroll up, again I can see a summary of the different
properties and the values for those properties for that Heading 1.
In the middle of this panel I get another summary, and I can expand that a little bit
if I want. In fact, on any of these panels you can sort
of collapse and expand them so you get more room in a specific area.
So I can reorder these to show a little more space in any specific area. Now,
since I'm reorganizing these panels, I'm going to grab the
bottom right-hand corner here and just drag this down,
so that I get a little bit more room and we can really see what's going on. Here we go.
So again the top section gives us a summary for the element.
The middle section gives us two possible views. The Current view gives you a summary of any
selected property up in the summary section.
There are two icons over here, and they look like little stairs. The first
one is the summary, and the second one gives you the entire cascade. So every rule
it's applying to this element is listed in the order it's being applied.
That's fantastic for helping to resolve conflicts and tell exactly, if you've written a rule,
where it is, where it falls along the cascade. We're going to use that a little later on
when we get into working with the cascade and specificity, to help us determine where
our conflicts are. And then finally, at the very bottom of this,
we'll have another listing of the properties with another place to add and edit those properties.
So I can add another property here and here again, I can just say
font-style, and I can just type in italic,
and you notice that now my Heading 1 is also italicized.
Now let's just take a moment to go back to the All view. And again,
we're seeing the external style sheets, the embedded style sheets, and you have another
series of icons at the bottom of the panel. Let's go over briefly what those
allow you to do. We have an Attach Style Sheet icon, that allows
you to attach an external style sheet. We have a New CSS Rule, and if you want to
create a new selector for any of your style sheets you could go ahead
and do that. The one that's grayed out currently is Edit Style Sheet, and that's because I
don't a rule selected, and we also have the Trash Can,
and that would allow you to remove or delete a style sheet.
It also allows you to unlink an external style sheet if you want to detach it. While this
a pretty thorough overview of the capabilities of the CSS Styles panel, it is
by no means complete. You'll be using the CSS Styles panel throughout
the title, and I'll give you plenty of opportunity to familiarize
yourself with the techniques we just covered as well as explore additional features.
In the next movie, we'll examine how easy it is to customize
Dreamweaver's CSS workflow to see your own personal preferences.