Expression® Web Design
How to Create a Style Sheet
Tuesday, February 26, 2008
You might have seen a reference to something called CSS in the past. CSS stands for Cascading Style Sheet. Basically, a style sheet is a simple way to help maintain your website. The style sheet can help describe the way you would like your content displayed on the screen. It can even help describe the way that your content should be printed. A
style
sheet can help you present your content with consistency on all your pages without
the need of a lot of the HTML attributes. The style sheet helps you separate
structure from design. The styles are all set in one .css file that can be
changed at any time and those changes will appear on all pages the style sheet is
attached to.Creating a style sheet with Expression Web can be very easy. Just go to File - New. There should be another box that opens and you will choose CSS. This will open a blank page, with basics (<html>, <head>, <body>, etc) and DOCTYPE in the source code.
Adding Styles to your Style Sheet
Now
you need to see if you have your Manage Styles Task Pane available. This is
usually located in the lower right hand of Expression Web. If not, simply
go to Task Panes - Manage Styles. Now you should see the task pane in the
lower right hand corner of the program.The New Style should be activated since you have a new (style sheet) opened. Click on New Style to open the New Style dialog box.
In the upper left hand corner of the New Style dialog box, you will see Selector and you have an option to enter a property or in the drop down, you are able to choose some default properties, for example body. If you choose body, you can now select the default styles for your font, background information, etc.
Setting a Property
Let's
say that you wish your background color to be black. So in the Selector field,
scroll down until you locate body.
Now
in the Category area, highlight background. This will help you create properties
for your background.
Chances
are, you might want to apply a color to your background, even if it is white.
Right now, let's assume you are wanting the background to be black. Once the
background property has been chosen, you should be able to choose the blackground-color.
Preview
Now you can choose the font color, let's say white. While all of this is happening, Expression Web will be showing you a preview of your chosen properties. This will help you visually to make sure you have chose the correct values.
Description
Under the Preview area, you will see another place that basically will show you the CSS code that is being created by Expression Web. Make sure to watch this area when you are applying values to properties. This will hopefully help you understand CSS a bit more.
A Bit More Information on CSS
One of the greatest things about CSS is the ability to easily change your design all in one simple page.For example, we decided that the background color for the website was going to be white. Perhaps later (after ten pages are completed), you decide that you want a light tan background. You can change this very easily in the style sheet and it is shown immediately on all the web pages attached to the the style sheet. We will go over making changes to your style sheet later.
And of course, you can watch a video tutorial of creating a style sheet.
Comments
