Expression® Web Design
Starting with CSS
Wednesday, December 17, 2008
Hopefully by now, you have started using some cascading style sheets (CSS) in your website development. Some of it might have some naturally if you are using Expression Web. In the Tools - Page Editor options, take a glance at the CSS tab. Here is where you can choose if you would like to use inline styles or an internal style sheet if you have not created an external style sheet.If you are working with an external style sheet (or internal), there are usually a couple of things that you use. The first is called a selector. This can be body, p, div, table, or a td element. The second part is called the property. This might be something like color, font, text-align, background, etc. depending on the selector. And the last part is the value. This might be something like #000, black, center, no-repeat, etc., once again depending on the property. An example could be:
body
{
background-color: #fff;
color: #000;
}
This basically helps to have your background color white and the font color black. The body is the selector, the background-color and color are the properties, and #fff and #000 are the values. FrontPage would probably create something like:
<body bgcolor="#FFFFFF">
And it would be assumed the font color is white.
You can also use an inline style:
<body style="background-color:#fff; color:#000">
Of course, using an internal or inline style sheet somewhat defeats the purpose of relying on CSS. For example, if you decided that you wanted the background color black and the font color white, you could easily change it in the external style sheet and all the pages that are attached to that style sheet would be updated.
CSS Shorthand
Another great part with CSS is the shorthand. For example, you might have something like:body
{
background-color: #fff;
background-image: url('/images/background.gif');
background-position:left;
background-repeat:no-repeat;
}
You can basically combine most of the selectors into one line:
body
{
background: #fff url('/images/background.gif') left no-repeat;
}
CSS Grouping
Another benefit with CSS is that you can group the selectors together:body, p, table, td, h1, h2, h3, h4, h5, h6, div
{
color: #000;
}
This style applies the color black to the text in these elements. And then you can apply more to the elements if needed, for example:
body, p, table, td, h1, h2, h3, h4, h5, h6, div
{
color: #000
}
td
{
font-weight:bold
}
Any text inside the td element will be bold as well. There are other ways as well to help apply different styles but we can get into that later.
Comments
