Photo credit: romanlily, uploaded via Flickr, Creative Commons License
8.1 Introduction to CSS:
Cascading Style Sheets (CSS) provide a means to create rules for formatting the appearance for one’s web site. With CSS, one can set advanced text formatting options, background appearance, page break behavior and the like by creating a set of CSS rules. One these rules are set, they can be propagated to pages throughout the website, thus eliminating the need to individually format every bit of content added to one’s site. Furthermore, once a set of CSS rules are defined, they can be imported and used on other web content projects.
CSS rules are created and managed via the CCS panel in Dreamweaver.
8.2 Places to Store Styles:
Here our tutor gives us glimpse of how CSS sheets propagate onto pages within a site. We note that there is an HTML <link> tag on the a page to which a particular style sheet should apply, instructing the browser to refer to that CSS rule set, and render the content accordingly. For comparison, we also see how these formatting rules can be stored without the use of a style sheet, by embedding the formatting code within the individual page’s HTML. It is immediately evident that this method would involve much duplicity, and making a design change would involve editing this code on each individual page to which the design change would apply.
8.3 Creating and Linking to a .CSS File:
In this exercise, we use the CSS panel to link a pre-defined CSS file to our example HTML page. We utilize the link icon in the CSS panel to browse to our ready-made CSS file, and specify that it should apply to rendering the content on the screen (as opposed to applying to print layout, or a screen reader, or some other output format). When this style sheet is linked, we note that the <link> tag appears in the code window of our example page. We also note that a new item appears in our related file tool bar, above the code view window. This item bears the same name as that of the CSS file that we linked to. By clicking on that item, we can see the actual code contained in the style sheet.
8.4 Creating a Style for an HTML Tag:
Continuing to work with our pre-defined CSS sheet, we note here that our CSS sheet leaves us with some room for improvement, and we would like to add additional formatting rules to our page. Specifically, we have defined a definition list on our page, and we would like to add some formatting to this list. Note that our definition list consists of definition terms, denoted in the HTML code with the tag <dt>, and corresponding definition descriptions tagged with <dd>.
To format these items, we refer to our CSS panel, and select the icon for New CSS Rule. A New CSS Rule dialogue appears, asking us for a context for which this rule will apply. We specify the Tag option, indicating that we want to propagate a rule to items with a specific tag. Next, we select from the list of all valid HTML tags, to indicate which tags should be the rule we are about to specify. In this case, we select the <dt> tag. Finally, we must define in the dialogue box where this rule will be stored. We can choose to apply it to this document only (which presumably would embed the style code in the page HTML code, thereby bypassing the style sheet). We can also choose to store this code in a new style sheet. Finally, we have the option to add this rule to the existing style sheet that we have linked to. This third option is the one selected by our tutor. It appears that caution should be exercised here. Apparently, we are electing to modify a stand-alone style sheet that we have only linked to. If we were to link to this sheet from within other projects, these changes would then be evident in those projects as well. So, look before you leap would probably be some appropriate words of wisdom here.
Having completed the first dialogue box, we see that the <dt> tag now appears as an item under the styles.css item in our CSS panel, and a new dialogue box appears asking us to define the actual rules that we wish to apply. Here we select some font particulars, such as weight, size and color, and apply them. We repeat this process for the <dd> tag. By clicking on the styles.css item in the related files toolbar, we can see the changes that we made reflected in the CSS sheet.
8.5 Creating a Class Style/
8.6 Editing a Style:
In this exercise we work with our Downloads page, upon which we have previously created an unordered list. We decide that a portion of the text belonging to each list item, specifically the text indicating the file format and size, should be formatted differently from the main text of the list items. Since the text at issue does not exist within it’s own specific tag (it’s within the <li> tag, along with the rest of the list item text), we elect to create a new class of text to which our new rule should apply, and then specify that text as a member of that class.
To do this, we again begin with the new CSS rule dialogue, but this time we specify the context as class rather than tag. We must specify a name for our class as well. Note that spaces are forbidden in class names, as are leading capital letters (although subsequent capitals appear to be valid). After naming our new class and clicking OK in the dialogue, we see that our new class appears as an item under styles.css in our CSS Styles panel (as we ,chose to store this style information in the existing CSS file). We also note that the name of the new class is preceded by a period, as is the convention for classes. We did not add the period when we named the class. Rather, Dreamweaver added this element for us.
We are again presented with the CSS Rule Definition dialogue box, where we make the specific formatting rules as we have done previously (font type, color, etc.). We exit the dialogue box by clicking OK when finished.
At this point, we now proceed to select the pieces of text that we wish to designate as belonging to this new class. The easiest way to do this is by selecting the desired text, then referring to the properties panel. We note that there is a Class dropdown box in the panel, and our newly created class type is now populated as an option in the dropdown list. Selecting that class from the list includes our selected text as a class member. Referring to the HTML code window, we note that this text is now bound by a <span> tag, along with a class designation.
We must repeat this process for all of the text that we wish to assign to this class. However, once this is accomplished, we can easily change the appearance of all text belonging to that class by simply modifying the class rules. To do so, we simply select the class name in the CSS Styles panel, and then edit the details displayed in the CSS Properties panel.
8.7 Custom Font Stack:
As we discussed in Assignment 4, if you specify content to display in a font that is not installed on the user’s system, the text will not display as you intended. It is good practice to specify commonplace alternative fonts for the browser to use, lest the browser revert to the user’s default font, leaving you with no control over how the content will appear. Here we see how one can specify a list of fonts, in order of preference, that the browser should look for on the user’s system when rendering text content.
Note that in the Properties panel, there is a pair of buttons labeled HTML and CSS, respectively. These buttons toggle the Properties panel between HTML and CSS properties. If we select the CSS button, we see that there is a drop-down box in the properties panel labeled Font. If we click on the drop-down arrow, we note that the list contains not individual font names, but sets of comma-delimited font names. By default, Dreamweaver has grouped together similar fonts. If one selects one of these font groups for ones CSS styles, the browser will be instructed to seek out the fonts specified in the order listed.
If one wishes to specify ones own list of font preferences, known as a font stack, the Edit Font List option at the bottom of the list will allow for adding any font installed on the developer’s system, and in any order one so chooses.
8.8 Styles Created by Page Properties:
While most of this section has dealt with defining styles within a CSS file, we are advised here that there does remain a means for making style definition to a particular page with a site, via the Modify => Page Properties dialogue box. Property definitions made here do not get written to the CSS file, but rather are baked right in to the HTML code for that specific page. Note that the style definitions made in this way are still visible in the CSS styles panel, but are not listed as items under the CSS file, but under the generically named <style> header.
8.9 CSS for Printing:
In section 8.3, we discussed linking to a CSS file, and noted that when we did so, we specified a media type that our style sheet should apply to. In that case, we opted for screen, meaning that we were to define the styles that controlled how our content appeared on a monitor. If we now wish to define a different set of styles that govern the printed form of our page, grayscale-friendly, for instance, we can do so by linking to a different style sheet in the same manner as done before, but opting instead for the print option in the media drop-down box. A new CSS entry will appear in our CSS panel, with the parenthetical (print) adjacent to the name, reminding us that it applies to the printed format.
After defining our print styles, we need not print our page to test its appearance. We can make visible the Style Rendering toolbar (View => Toolbars => Style Rendering), and select the printer icon. This will display our page on-screen in accordance with the CSS print styles that we have defined.
8.10 Using the Code Navigator
The Code Navigator feature in Dreamweaver is a handy little applet that give one quick feedback on the style rules that apply to bits of text within a page. Because CSS styles cascade through pages in a website, it can sometimes be unclear just why a particular piece of text if formatted the way it is, especially if one did not intend it to be so. This type of behavior should be immediately clear to anyone who has ever had to set access permissions in a network file system; “Where was that delete permission inherited from, and why the hell didn’t that modify permission propagate down to that subdirectory?!?”.
To use the code navigator, one need only select a string of text, and Alt+click on it to show the code navigator applet. The code navigator window shows which CSS rules are governing the selected text. Now, how one goes about correcting styles that propagate unintentionally, well, that’s a story for another time…..
 |
The Code Navigator applet window |
No comments:
Post a Comment