Lesson 2 - Cascading Style Sheets Review
In previous courses you learned to use HTML tags and HTML styles to apply formatting to the content in your document. You might have used several attributes of the font tag to make your font a size from 1 - 7 or a heading from H1 - H6, or a color, or bold, italic, etc. In the current standards for HTML, the font tag is deprecated. That means, it's going out of style and eventually won't be supported by browsers. The HTML tags that you used to define font and positioning attributes also have a problem because they are not always interpreted the same among the various flavors of browsers. While you think you have a great looking site in your document window, your users may be seeing something quite different in their Web browsers. Along comes CSS to the rescue. Well, sort of. CSS still has browser incompatibilities (especially with all the new browsers out these days) so we'll design for version 5 and greater on IE and Netscape 6. So just what is CSS? Cascading Style Sheets define the display of the elements in an HTML document. CSS is a powerful technology used to separate content from presentation. A style is a collection of one or several formatting options. Cascading indicates the order in which the styles are applied, or the precedence of the styles. Since HTML is a mark up language which tells the browser how to display text, a style essentially tells the browser how to display elements on the page. CSS provides ways for HTML authors to have more control over the layout and positioning of elements on their sites. For example you can set page margins, format paragraphs, define the spacing between words and/or lines of text. Although you can do some of these in a word processing program, these details were not supported by regular HTML tags. Many designers used tables to control position of elements on the page, but CSS gives you more precision than tables for positioning, and more efficiency for changing attributes of a style. Styles can be used to format font attributes and format the display of text blocks, paragraphs, tables, lists, forms, etc. Styles can also be used for positioning using CSS-P, which we'll review in the latter portion of this lesson. I created an external .css document to define presentation of this websites and then link each page to the .css file. Linking multiple pages to an external .css file enables me to make global changes to the appearance of my entire site by modifying one .css document. This external document contains all the formatting for my text so if I decide to change all the headers to italic, I can simply edit the style for headers and get immediate display of the italic headers on all my pages that are linked to the external .css document. A style can be assigned to either an existing HTML tag or a class, which is a custom style. A class can be applied to a range or block of text. When you assign a style to an HTML tag the style gets applied automatically to any text within that tag. The Reference Panel If you're new to HTML you can use Dreamweaver's Reference Panel by going to the Window Menu - Window>Reference to learn tags and CSS information. The Reference Panel can be accessed directly from the Results panel -- open this panel (below the PI) and click the Reference tab. The Reference Panel contains several O'Reilly Reference Books including a few which will come in handy for this Introduction course - HTML, CSS, and JavaScript. The HTML Reference Book provides an explanation or description for a specific HTML tag and which browsers support that tag. The CSS Reference Book provides an explanation or description of a specific CSS Style and which browsers support that style. The Style Syntax is displayed at the bottom of the panel.
The options button in the upper right corner of the panel displays a menu from which you can select the size of the text in the Reference Panel.
Below is the CSS Reference Book default page without any Styles selected.
Below is the CSS Reference Book with the font Style selected. The description of the style is followed by the CSS Syntax for the font style. The supported browsers are listed on the top right above the style description.
CSS Syntax CSS defines display properties of most HTML tags by creating a rule for the display of the tag. The rule is composed of a selector (the tag) and a declaration. The declaration contains the descriptive properties and values. An example of property would be color. An example of value would be red. The rule for a paragraph tag with the color of red is written as follows: p {color: #FF0000;} The selector of p is typed followed by a space and then the declaration in curly braces. The red value of the color property is written in hexidecimal format as #FF0000. Multiple declarations or multiple attributes of one tag are separated by semicolons such as this, which translates as "make all paragraphs red, arial, 10 points": p {color: #FF0000; font-family: arial; font-size: 10pt;} You can use one declaration for multiple selectors such as this, which translates as "make all paragraph, heading 1, and list items red, arial, 10 points": p, h1, li {color: #FF0000; font-family: arial; font-size: 10pt;} To summarize, rules are selectors and declarations. A selector is what you are defining. In the example that follows, the selector is the p or paragraph tag and the declaration are the properties of color, font-family, and fon-size and their associated values of #FF0000, arial, and 10pt: p {color: #FF0000; font-family: arial; font-size: 10pt;} selector {declaration comprised of property: value;} CSS Classes Classes are a category of CSS styles that enable you to have the option of applying more than one style to a specific tag. Let's say that you don't want all your paragraphs to be green, arial, 10pt. You can create one class of paragraph tag that is blue, verdana, 20pt, and one that is red, arial, and 36pt. What? 36 points? I thought font sizes only went from 1 - 7! Yes, but using style sheets enable you to define the font size in points, pixels or ems. Ems are the preferred font size definition to use for accessibility issues. Check the compatibility of this tag among browsers and check it in your browsers. Class rules are always preceded by a dot before the name. If you leave out the dot using Dreamweaver's Style Panel, DW will automatically insert the dot for you. If you find yourself becoming overwhelmed by all this CSS information, you'll be happy to know that DW 8 provides a way that new users can create and use styles before comprehending all this information. Let's take a break and try this simple experiment. 1. Create some text. Just a few lines. Select a couple of words in a sentence and open your PI if it's not already displayed. Select some text and Select Red from the Text Color Chip in the PI.
A new style named style1 appears in the Style dropdown menu and the style is applied to the selected text.
The style1 style is applied to the span of words you selected. See the words displayed in red below.
Later in the lesson you'll learn to rename the style and export all these internal styles to an external style sheet. For now, select the text to which the style1 is applied and open the document in code view. You will see a span tag around the selected text with style1 as the class of the span.
A class is a custom style. But where is this style defined? Scroll up to the top of the body of the document in Code or Split View and you'll see the Style tag with the class identified with the dot at the beginning of the word. The selector and declaration are contained in the style tags. <style> From now on, every time you want to apply a red font to a selected element, select the style1 from the Style dropdown menu in the PI. Try this now. Select a span of text or even one word. Select the style1 style from the Style dropdown menu in the PI to apply the attributes of that style to the selected text. Note that the default font is 12 points. Let's create a style that is 14 points bold and italic.
Here is my selected text with the style2 style applied: Create some text and select a span of text. Now select the same text and select a green color. Create some text and select a span of text. Did the Style dropdown menu change to reflect a new style? It should. Now you have 2 styles defined, and each of the styles is reflected in real time in the dropdown menu. This updated display in the style dropdown menu is a very effective authoring feature. Before going further with the lesson, view the source code in Code or Split View to see the new style selectors and declarations at the top of your document, and view the actual tags identifying the classes in the body of the document. To see the tags in the body, return to the Design View, select the text to which you applied the style2 and then go back and view the source in Code or Split View. You will see the text contained in the span tag. <span class="style2">Create some text and select a span of text</span> Some of you may wonder about the difference between the span tag and the div tag. The span tag is used for words within a larger block of text. The div tag is used to define entire blocks like paragraphs. Here are the 3 styles defined between the STYLE tags of the HTML file: <style> Since DW places any styles you create using the PI directly in the Head tags of the HTML file, these styles are called internal and make up the internal style sheet of the codument. A style sheet lists the selector and declaration of styles. This style sheet resides within the current file only. If you open a new file in this site, you will not have any styles appear in the Style dropdown menu of the PI. Since DW is a site management tool, it's most efficient to create and use features that can be applied site-wide. Wouldn't it be nice to have all the styles in one document to which you could link all the pages in the site? That way, if you want to edit a style, add a style, delete a style, you can make a change in one document and have it apply to all the pages in the site. A style sheet that is outside of your current page and to which your current page links is called an External Style Sheet. An added benefit of using an external .css file is that the style information only has to load in your site once, so your site pages with download quicker. Before I show you how to create an external style sheet and/or convert your internal styles for this document into an external sheet, I want to show you other ways to create styles or rules. |
Copyright © 2008 - 2009 Robert D. Cormia - October 7, 2008