Tip:
Highlight text to annotate it
X
Since Expression Web does a lot with CSS, we have to be able to control how it
works with CSS. So we are going to look at a few of the CSS properties we can set,
kind of the brain behind Expression Web. Now I am going to throw out a little warning
here saying that you don't want to mess with these too much if you don't know
what you are doing. Okay, and obviously, when you get through this title,
you will know a lot more about CSS if you don't already. We are just going to
look at them; we are going tread lightly in here and then kind of move on.
If you take a look up top, you are going to see what's called the tools.
I don't have anything open right now, just the Tools menu. Let's see the Page Editor
options. Click on that to open the Page Editor Options dialog box. You will see
the CSS tab out here. Now I have briefly described this in a previous video but
I want to talk a little more about this. When you work in Expression Web, there are
two ways to work with your styling. You can work with Auto-style application or
Manual style application. The way I think about this is auto-style is when you
are first starting; you don't want to mess with this. Keep it as is. Auto- styling
is trying to help you, guide you through and apply styling where it thinks
it should be applied, creating styles, the way it thinks it should be created.
When you get further in here, you can use what's called Manual Style Application
and that leaves it more up to you. How do you make the styles? Where
do you put them? How do you apply them to content?
So we are going to not touch that right now but let's take a look at the
Properties down here. You are going to see that when we do things like, let's
say, you go out to your page and you select some text and you change the Font,
okay and the Size, things like that. What is going to happen is it's going to
create what's called a Class by default. You can change how Expression Web does
things by telling it how to create the style or where to put it?
So right now it's going to create a class, which is going to be internal to
that one document. If you want you can have it create what's called an inline
style. That means you won't be able to use the formatting anywhere else on that
page. It just sticks the formatting right around the selected text. So that's
the difference between these two. If you look at the page properties on the
body text, it's kind of an important one because we are going to look at the page
properties in a little while. Right now it is going to create what's called
an Inline style. So if we go out and we create a page, which we are going to
do in a minute and we do this, it's going to put this in the what's called the
Body Tag. Any styling like the background color, fonts we set, things like
that, it is going to put it in the Body tag. If you want, you can create a separate
rule that you can reuse elsewhere. It creates what's called a Body
style or Body selector that you can use in another document.
So we have a choice there. As a matter of fact, anytime you do anything out
here with usually using the Visual Editor by dragging using the Properties
panel up top, the Common task bar, things like that. It's deciding how to
create the styles and where to put them. But you can change that if you want to.
Now if you look right here, it is going to say, only reuse classes with a
prefix style. If you have a class you have made, a style you have made and you
apply the same formatting to something else, Expression Web is smart enough to
use the styles again. That's why you are doing this. You make a style, save it
and apply it elsewhere, so you don't have to keep making styles.
Turning this on, we will only let it reuse classes if it has the style prefix
in front of it. Those are styles that are auto generated by Expression Web. We
are not going to mess with this right now. Leave that alone for the moment and
later on when we get into a little bit more hardcore CSS, you will see that.
You will also see Use width and height attributes for images instead of CSS;
leave that as is for right now. Later on we will see that you can control your
picture sizes by using styling instead and sometimes that can be helpful
because you got a lot more control but right now we will leave that alone. Like
is said, you do not want to go crazy in here because it is going to do a lot of
different things. So I will click Cancel. You can always, I
should mention this, if you have click OK, you have messed with the style and
the formatting options in here, you can always come back in here and click
Reset Defaults and it will put it back right when you first opened it ever.
So I will click Cancel. So those are some things that we can set up.
Now just quickly I want to create a new page, just to show you this. Click New
Document button up there in the toolbars. What we are going to do is we are
going to set a few properties out here. So if you come to the Format menu, you
will see Properties, there are 50 ways to get to this. If you take a look in
here, you are going to see the Page properties. Click on Formatting. Now if we
want to set generic page properties, we could do that right here.
We can even put a picture in the background. You can change the background
color if you want, you can change your text color, all sorts of things, your
links. If you click OK, it is going to do it automatically. Now what I want you
to do is click on the Code button here, I am going to click on Code, it will
take you into the code, by default, it puts that styling directly inline in the
Body tag. If we wanted to, we could change that so it
was an actual style up here in the head that we could share with other documents
but that's what I am talking about with setting how it places the styling
in here? Where it puts it. So you have to decide that. Later on when you get
to know CSS, it really helps to be able to do that.
So just a few quick preferences that we can set. Like I said, tread lightly if
you are going to look at them. Later on we will take a little bit more in-depth
look at them as we get into CSS further.