The interface design for the Jade Valley Web site is colorful and warm; the designer conveys the spirit of Jade Valley through a carefully chosen color scheme of yellow, green, and orange. The challenging task now is to develop a cascading style sheet that creates harmony with the existing color scheme.
In this task, you'll redefine fiv218 tags to make the color scheme consistent throughout the site and make sure that the fonts you choose are easy for visitors to read online. The fiv218 tags whose formatting you'll redefine with CSS are <body>, <p>, <a>, <h1>, and <h2>. You'll save the formatting for these styles in a separate file and folder in the site, making the definitions universally available to everything in the site, rather than just the file that's open when you create it.
1.
| Open Dreamweaver, and choose jadevalley_template from the Files panel.
|
Because most of the page elements have been reconstructed on this page, this page is a good candidate to use for developing a cascading style sheet for the Jade Valley Web site.
2.
| Select Window > CSS Styles. In the CSS Styles panel, click the New CSS Style button.
|
You can author new CSS styles or edit existing styles using the New CSS Style panel.
Notice that the panel is not empty; it already lists three styles. These were created earlier as a result of your work on creating CSS layers. You'll return to these styles later in this lesson.
3.
| In the New CSS Style dialog, choose Tag (which redefines the look of a specific tag) and select the body element from the Tag drop-down menu. Select (New Style Sheet File) in the Define In option. Click OK.
|
Depending on the chosen Selector Type, the drop-down Tag menu changes. Th218 <body> tag is one of the tags you need to redefine in this task.
4.
| In the Save Style Sheet File As dialog, navigate to the css folder within the jade_valley folder. Name the new style sheet jadevalley.css and save it in the css folder.
|
Although you won't do so in these lessons, it's possible to have multiple cascading style sheets in your site. For this reason, it's often easiest to have a css folder in your site's root folder, where you can put all your CSS files.
Note that all style sheets end with the extension .css.
After you click the Save button, the "CSS Rule Definition for body in the jadevalley.css" dialog appears.
5.
| In the dialog, select the Type Category and choose Arial, Helvetica, sans-serif as the Font and 12 pixels as the Size. Click Apply and then OK to finish redefining the body element.
|
As a rule, you should use only sans-serif fonts for screen-based content, because they're easier to read onscreen than serif fonts. By specifying multiple sans-serif fonts (Arial, Helvetica, sans-serif), a user's browser will try each font in turn until it finds one of the specified fonts.
Note
By specifying sans-serif at the end, you include a catch-all in case a user's computer doesn't have any of the other fonts installed.
Although you can specify a different measurement for the font size, the most common options are points or pixels. In this task, you'll use pixels as the measurement for all text formatting.
6.
| Click the New CSS Style button in the CSS Styles panel again. If necessary, select Tag as the Selector Type and choose the p element from the Tag drop-down menu. Verify that jadevalley.css is selected in the Define In option. Click OK .
|
As before, you're preparing to use CSS to redefine how the browser renders a227 tag (in this case, the <p> tag).
7.
| In the Type Category of the CSS Style Definition dialog, select Arial, Helvetica, sans-serif as the Font and 12 pixels as the Size. Next, in the Box Category, uncheck the Same for all option under Padding and enter 3 pixels as the amount of padding for Right and Left. Click OK .
|
You'll notice that the first part of this step is identical to that of the body element redefinition. In theory, the p element should inherit all the formatting of the body element, because it's nested inside and because CSS styles cascade. However, no browser is fully compliant with CSS standards, and some browsers deviate more than others. By duplicating this information, you ensure that all browsers present the text correctly.
You also specify some cell padding around the left and right edges of the text. This creates a margin between the text and the surrounding table cell in which it appears, preventing the text from bumping against the cell border.
8.
| Repeat Steps 6 and 7 to redefine the followin220 tags with the specified attributes: the a element (Color: #669900); the h1 element (Font: Geneva, Arial, Helvetica, sans-serif; 18 pixels; Color: #852112; Padding: Right and Left both 3 pixels); and the h2 element (Font: Geneva, Arial, Helvetica, sans-serif; 16 pixels; Color: #C27C44; Padding: Right and Left both 3 pixels).
|
These attributes were chosen based on the following factors:
Easy reading onscreen
Consistency with the original design's color scheme
The need for a small amount of white space between the text content and the border surrounding the content
![[View full size image]](/image/library/english/13887_139fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_140fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_141fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_141fig02_alt.jpg){kind=link}