Tip:
Highlight text to annotate it
X
If you are new to CSS, the syntax behind the code can look a bit intimidating at first,
but in reality CSS syntax is very easy to learn and decipher.
In this movie, we'll examine the structure of CSS syntax and break down the
basic selector types that will become the building blocks of your more
complex selectors later. Now in our slide, here we have a sample CSS
rule and this one is pretty basic. So each rule is broken down into specific
parts and if you know what these parts are, it's a lot easier to decipher what's going
on. So the first part of any CSS based rule is
going to be the selector. The selector identifies the element or elements
on the page that you are targeting with this particular style.
Some selectors are really basic and general in nature and others can be more
complex and a lot more specific regarding the targeted element.
Here we have what we call an element selector and it's just targeting any h1 tag
that it finds in your file. Now next you are going to have the declaration
block. The declaration block is in those curly braces
and they are going to contain all of the instructions for how your heading 1s
or whatever targeted element should be formatted within your file.
Now inside the declaration block, you're going to find individual rules
themselves, and those rules are broken up into two parts.
You have the property and a value. The property comes first and it's followed
immediately by a colon. Just after that you have the Value.
You can have as many of these Property/ Value pairs as you need within your rule,
although you really only need to have one. However, after an individual rule, use a semi-colon
to tell the browser or the user agent to go on and start rendering the
next property. Here you can see we are setting some font
properties for the heading 1. We are setting the Font to Arial and setting
the Size to 1em, and we're assigning the Color to #000, which will be
black. So this entire rule is targeting heading 1
tag, setting the Font to Arial at 1em and changing the Color to black.
So now that you understand the basic pieces of this CSS rule syntax, it's a good
idea to go ahead and get your basic selectors under your belt.
So here are basic CSS selectors. We have element selectors and to identify
an element, all you have to do is type-in the element itself.
So h1 would target heading 1s, h2 would target heading 2s, p would target
paragraphs, TD would target table cells, so forth and so on.
You just have to know the name of the tag and you type it in free of any tag braces.
It's just the element itself. Next step we have class selectors, and in
this case, you can see I'm representing that with .author.
Class selectors target anything with that particular class attribute and notice
that they are preceded by a period. After that they have to be named exactly the
same thing as the class attribute on your page and capitalization and spelling
most certainly counts. Next, we have ID selectors and again, this
is going to target any element with an ID specific to what you have here.
IDs are preceded by the pound symbol just like classes are preceded by the dot.
So if you ever see a dot, that's a class. If you ever see a pound symbol, that's an
ID. So they are pretty easy to identify when you
are seeing them within the CSS syntax. If you don't see any of those things, chances
are it's probably an element selector and just to check that, make sure
it's representing an actual HTML tag like h1 or block quote or the A tag.
Well, now we have that under our belt, let's go ahead and take an existing page
and write some of those basic selectors for it.
This also gives us a really good opportunity to see how we create new CSS
rules in Dreamweaver. So here we have a page that has pretty much
the same structure we have been working with. There is just more content in it now.
We have a Header region, we have our Content region, we have our Sidebar region
and down the very, very bottom we have our Footer region, but note we also have
paragraphs, we have list items. We have all sorts of stuff going on here.
And if I look over at my CSS Styles panel and if you don't see this opened,
you can go to Window and choose CSS Styles, but it's usually in the top panel grouping
here. We see that we have some existing styles already
on the page. We have an element selector.
It's targeting our paragraphs, and I'm going to expand my CSS Styles panel so I
can see what's going on here. So it's assigning a color of #333 and it's
setting a font family of Georgia or Times New Roman.
We also have a class selector called .author, and you can see it's going to
change that color of that text to green and give it a font weight to Bold and
you can see that in action in a couple of different places.
And finally, we have the #header selector, so that's targeting any element
with an ID of header. Now remember, IDs can only be used once per
page, so I've given this a background color and a little bit of padding.
What we've done is we have separated the Header region from the rest
of the page, not only with structure but with also style as well.
So let's go ahead and style some of the other basic elements we have on the page.
We have a couple of headers that we want to style, so we're going to use element
selectors for those. We also have a list.
We'd like to reformat our list so we are going to use the list item selector for those.
So I'm going to go over to CSS Styles panel and the easiest way to add a style
to my document is to simply go down to the row of icons on the bottom right-hand corner.
The one that has the page with the plus symbol on it is New CSS Rule and
you want to go ahead and click that. Now the first thing that's going to ask you
to do is what type of selector do you want? Well, we are covering those three basic selectors,
so notice that they come up as choices. We have Classes, IDs or Tags.
Tag is another way of saying an element selector, so I'm going to choose tag.
Now I want to target the h1 tag, and if I had been smart enough to click
inside an h1 tag, Dreamweaver would have populated that for me, which would
have been really nice. Notice that you could also grab that from
a list. So if you forget exactly what that tag is
you can usually use that list to find exactly the tag you are looking for.
Now I could also choose to define this rule in this document only or if I have
an external style sheet file, I could move it over to my external rules.
We don't have that yet, so I'm just going to keep it in this document.
So I'm going to go ahead and click OK. And up comes my CSS Rule Definition dialog
box. This is separated by categories.
You can see the categories on the left-hand side.
We have some Typography categories, categories referencing the background and
borders, so generally, you can find what you are looking for here.
Now I'm going to set my font family, a pull-down menu and choose Arial,
Helvetica, and sans-serif. I also want to set a color, so I'm going to
click in the Color Chip, and you can do this one of two ways.
One, you can click the actual Color Chip itself and then sample the color
from the Swatches, or from anywhere in your file, or you can literally just type it in.
I'm going to go ahead and sample #000. That's a black, and I certainly could have
typed that in right there as well. I am going to go ahead and click OK, and I
notice that all my heading 1s change font. The color was already black.
That's just me making sure. I am going to go ahead and choose another
New CSS Rule, and this time I'm going to do a tag selector and I'm going to do the
h2 tag. So you can see this dialog box gets a lot
easier to manage once you kind of know your way around it.
I am going to go ahead and click OK and we are going to do something very similar here.
For font-family, I'm going to choose Arial, and for Color, I'm going to type-in #060.
If you hit Tab, anything that you type- in there you'll actually see and 060 is a green,
so I'm going to click OK. Any of my heading 2s will change color and
the font changes as well. Right, we have one more element selector left
to do, so I'm going to choose New CSS Rule, I'm going to choose Tag, and I'm
going to type in li. I could also have chosen from the list obviously
and that's going to target any of my list items.
I am going to leave it in this document only. Go ahead and click OK.
I'm going to change my font-family to Arial, Helvetica, sans-serif and that's all
I really wanted to do there. I'm going to go ahead and click OK and I can
see the list, updates, and changes. Perfect! Now that's an element selector and you can
see that it's very global in nature. It really didn't discriminate into what it
was formatting. It formatted everything.
So the heading 1 is targeting the heading 1s inside the header as well as
the content region. If I had multiple lists, it would format those
no matter where they are and we can actually see that we have a list in
our content region and a list in our sidebar and they are both using the same font.
So we know that these styles are very global, they're very general in nature and
they're likely to affect your entire page. Now you can do more targeted selectors by
using ID or classes. So what we want to do is we want to change
the way our sidebar looks. We want to give it a background color and
a little bit of padding all the way around it as well.
So what I'm going to do is create a new CSS rule and this time, I'm going to choose ID.
I can grab the pull-down menu and I would find any previously populated IDs
but I don't have any. So I need to type this in, so I'm going to
type-in #sidebar. Notice the no space there, just #sidebar and I'm going to click
OK. I am going to give it a background color,
so I'm going to click on the Background category and I'm going to give
it a color of #999. Now if you hit Tab, you can see what color
is going to be entered there. In this case, it's going to get sort of a
neutral gray. I am going to go to my Box category and give
it some padding. I'm going to give it 10 pixels worth of padding
all the way around it. So I'm going to leave Same for all selected
and just choose 10 pixels there. Now when I click OK, I could see that now
my Sidebar has turned gray and the text isn't butting right up against the
edge like it was before. Perfect! So now that we have done element selectors
and ID selectors, the only one that we have left to do is a class selector.
Now remember class selectors are going to target any element that has the class
attribute applied to it. In this case, we can use the class attribute
of title, something that really hasn't been applied yet in the code.
So it doesn't matter whether you apply the class attribute first within the code
or whether you create the style first. Either way works fine for you.
It's just whatever workflow you'd like to do.
So I'm going to choose New CSS Rule, I want a class selector and remember class
selectors are preceded by periods. I'm going to type-in period or dot, whatever
you want to say, .title. Notice there is no space before that.
There is no space after it. It's just .title, all one word.
Again, we are going to define it in this document only. I'm going to go
ahead and click OK. So I'm going to stay in the Type category
and choose font-style Italic. I'm going to go ahead and click OK and save
our file. Now I don't know about you, but I don't see
anything change here. Well, that's because it's only going to target
elements that have that class applied to it and currently on our page nothing
does. So what I'm going to do is find everywhere
the text Animal Farm is. I'm going to go ahead and highlight that text.
Now in the previous exercise, if we wanted a class attribute, we would go into
either Code or we would use the Quick Tag Editor.
But if you already have some existing CSS, your class application becomes a lot simpler.
So with that highlighted, I'm going to go down to my Properties Inspector and
where it says Class of None right now, I'm going to grab that pull-down menu and
I can see every single class that I have in my styles.
I am going to choose Title and it's going to apply that.
It does it by wrapping that text in a span tag and then giving it the title
attribute, so that's automating that process and it's doing a lot for me.
The next thing I'm going to do is highlight Animal Farm in my list and apply
exactly the same class to it. And I'm pretty sure that's all we have on
the page as far as the book title but I want to make sure.
Yup, and our book review is done. So I'm going to go ahead and save that.
And just to review our structure, we have three selectors driving all the
formatting on our page right now. We have an element, ID, and class selectors,
and these guys can be counted on to style almost any content that you need
them to. I should point out that they are extremely
generic however, and they are not going to be right for every situation.
For example, if you write an element selector that targets the paragraph tag,
that's going to target every single paragraph in your entire site.
I really doubt that you can have a very many sites where every single paragraph
needs to look the same. So instead of being what you use to format
everything on the page, these three basic selectors are in actuality going to
form the building blocks for the more complex selectors that you'll be using a little
bit later on. So next up, we need to focus on those advanced
selectors and how they allow you to target more specific items on the page.