CREATING Cascading style sheets (CSS)

The reason I’m starting with something as esoteric as cascading style sheets is that if you don’t create a CSS style for even your text, the minute you format it using the properties panel, Dreamweaver creates a “pretend” style for you. This can get very annoying and confusing.

The concept of CSS was introduced some time ago, but has only recently become an important piece of HTML coding. CSS properties control the look of just about anything you can think of: they deal with the positioning, color, borders, and a variety of other aspects of the images, tables, layers, and text you use in creating a web page. Think of them like the style sheets you create in Quark XPress, only with more options. You can actually dictate the layout of something entirely with CSS - very impressive! See http://csszengarden.com/ for samples of the same content with different layouts all controlled by CSS.

There are three kinds of CSS styles: class, tag, and advanced. We’ll be addressing the first two in this section.

A Class style can be applied to individual elements within an HTML file. For instance, you could create a style that defines your type as blue, bold, 15 pixels tall, and centered. Once defined, you can apply that style to any piece of text you want as you go along.

A Tag style actually controls the HTML code within a document across the board. Redefining the <p> (paragraph) tag to define your type as blue, bold, 15 pixels tall, and centered means that allthe type that uses the <p> tag will look like that.

Redefining tag styles can control the positioning of elements, the contents of table cells, the look of lists and a host of other properties.

When you create new CSS styles (you can have several styles within one CSS file) you decide whether to keep them local—that is, attached to the current document only—or to save them as an external file. The beauty of external CSS files is that you can attach them to all the pages in a site, controlling the look of the site in one fell swoop. Editing the external CSS file automatically makes those changes in all the files that use it. Much nicer than having to open all the pages in your site and changing each one individually!

As I said, if you don’t create CSS styles, Dreamweaver sort of does it for you. Any time you use the properties panel to change the look of something, Dreamweaver makes it into a style, just not one you could use in another file, and not one you could edit other than making changes manually to each individual element.

To create a style, click on the “new style” icon at the bottom of the CSS tab in the Design panel.

If you've already created a CSS file, you can link it to a new document with the "link CSS" button at the bottom of the panel.

You can edit an existing style by changing the properties in the bottom pane, or clicking the pencil iicon.

Notice that Class styles all begin with a dot (.content, for example) and tag styles don't. ID styles (using the Advanced option when creating a new style) are preceded with a #.

Select the style type you want to create by choosing either Class or Tag from the selector type options. If you’re creating a style that will be used only here and there in your document, choose “class.” You can name it anything that makes sense (i.e. “headlines”). Class styles must begin with a . (period).

If you want to affect something globally—something that redefines a tag—choose the “tag” type. If you aren’t sure of the HTML code for a particular element, select one from the popup menu to the right of the name box.

Then you need to decide whether to create a new (external) style sheet or to have your styles only apply to the document you’re working on.

When you click OK, you get the Style Definition window. Here, you’ll use one or more categories to create your style.

TEXT

It’s too bad that you can’t use just any font for text created in Dreamweaver. You have two choices: serif, or sans serif, in various combinations.

Size can be determined in points, picas, pixels, mm, etc. First either type in a number, or select a size from the popup menu. Then determine the measurement system you want to use.

Style choices include normal, italic, and oblique. (choose italic over oblique!)

Line height is the same as leading. If you’ve chosen points for your type size, choose points here. Or pixels and pixels. Just be consistent. To specify anything other than “normal,” you must chose (value) from the popup menu.

Weight is a tricky issue. The numbers (100–900) are absolute values and change depending on the font and browser someone is using. Bold and bolder, normal and lighter are all relative to the default weight of your font.

Variant means you can use small caps instead of upper and lower case letters. As is true with using small caps in a layout program small caps are just smaller versions of capital letters. This results in their being lighter in weight than normal lower and upper case letters. If you want small caps, try to isolate them from “normal” type so the discrepancy isn’t as obvious.

Case, on the other hand, refers to using all caps, all lower case, or what’s called “title case:” every word capitalized.

Select a color from the color chart, or type in the hex code for the color you want. NOTE: if you’ve selected a particular color in Fireworks or Flash for certain things that you want to remain consistent, write down the hex code so you can match it here.

Decoration options include underline, overline, strike through, blink, and none. Underlines are typically used to indicate a link, so I’d suggest avoiding that unless you are creating a style for your links: the <a href> tag. Using overline and underline together creates an interesting effect, however.

HINT: if you want all your text to look the same, redefine the <p> tag. Then redefine the H tag(s) for headlines and subheads.

You can create classes to handle captions, or other text that needs to be different in some way.

BACKGROUND

Background options are very powerful! While you can set a background color or image using Modify > page properties, by defining background options in a CSS style, you have more control over the other pages in your site.

To set a background image, you must redefine the "body" tag.

Select a color for a solid background from the color panel or type in a hex value: remember to note any hex values you’ve used in Flash or Fireworks for consistency.

If you want a graphic for the background, use the “browse” button to locate a gif or jpg. Note that you can have both a background color as well as a background image.

The “repeat” feature controls how your background image displays. If you don’t choose anything here, your image will tile—that is, repeat from left to right and top to bottom.

Select “repeat X” to have your background image tile horizontally only—a nice way to create a banner across the top of your page.

Choose “repeat Y” to create a border down the side of your page.

If you want to assign a background image that appears once, choose “no repeat.”

Use the attachment option to have your background scroll with your page, or choose “fixed” to keep it stationary—very cool!

Use horizontal and/or vertical position settings with pixels to move your image down from the top, and in from the left side.

BLOCK

Dreamweaver considers any chunk of code between an opening and closing tag a “block.” So anything between two <p> (paragraph) tags, for instance, is a block. Or, anything between two table data tags <td> is a block. Use this portion of the CSS style definition box to determine word and letter spacing, the position of text or image (vertical alignment and text align) as well as a text indent (for paragraphs). NOTE: this is the only way you can indent a paragraph (short of other more complicated and less appropriate options). Dreamweaver doesn't recognize tabs or more than one space.

Whitespace refers to spaces typed into a block of text: “normal” eliminates any extra spaces, while “pre” leaves them as is.

Nowrap means the text will not wrap to a new line unless there is a <br> (soft return) tag to make it happen.

The display feature controls how the block will display and other fundamental aspects. When definining an entire page layout using CSS, this field can change the position of two blocks to be side-b y-side, for instance, rather than stacked.

This block is flush left
with an indent of 12.

BOX

A “box” element deals with blocks . This portion of the style definition box allows you to physically position text elements (whole paragraphs, or a table, for instance) on the page, rather than having everything follow a rigid top–to–bottom format.

Width and height determine the size of the box.

Float turns text into something like an element, so that other text “floats” around it—like the “runaround” feature in XPress. Choose from left, right or none.

Clear creates a “force field” to either side of a box element so that multiple box elements don’t overlap.

Padding refers to the white space around the inside edges of a box object. Make sure to put something in here or text surrounding a a box with a “float” attribute will run right into it (the vertical line in the sample to the right indicates where the two elements collide).

Margin refers to the white surrounding a box object. The effect is similar to padding, so you could choose either, but probably not both unless you specified a border for the object: at that point, you’d want padding to move the text away from the border, and spacing to move the box away from adjacent elements.

BORDERS

If you’ve assigned block and/or box properties to an element, you might want to include borders. There are several styles to choose from including dashed, dotted, solid, double, groove, ridge, inset, and outset.

You can also specify a weight (width) in pixels, inches and so on, and a color. Note that you can leave “same for all” checked and whatever you select for “top” will apply to all the sides. Or, you can specify something different for each side.

LIST

Lists are created using the text menu, and can be formatted using the list portion of the CSS style definition box. Change the nature of the bullet for an unordered list, or the numbering system for an ordered list using the “type” popup menu.

Or, create your own bullet in Fireworks and save it as a gif or jpg Use the “bullet image” browse button to select it. Very cool!

Position determines how long lines in a list will wrap. Choose “inside” to have the lines wrap to the bullet margin (top), or “outside” to keep the list within the text margin (bottom).

POSITION

Positioning specifications control where on the page your block elements appear. You can have absolute positioning, which will place something exactly where you specify in the “placement” portion of the box.

Relative positioning determines the position of the element relative to it’s placement within the document.

Static positioning means the element stays exactly where it was created.

You can also assign a width and height to an element here—independent of whether you are going to position it.

Visibility—inherit, visible, or hidden— determines whether the element is visible or not. “Inherit” means it will be hidden or visible depending on its “parent.” If the object isn’t nested inside another, its “parent” is the page itself, and it will be visible. Setting elements to invisible is used to create dynamic pages using Javascript.

The z-index of an item controls its stacking order, like layers in Illustrator. A z-index with a higher number is placed above one with a lower index. I’ve read that it’s a good idea not to use sequential numbers for z-indexing in case you need to sandwich something in between two “layers” later (i.e. if you had 3 and 4 already assigned, you couldn’t put something between them later without going back and re-assigning their z-indexes).

Overflow determines what happens if the size of an element (as determined by width and height) is too small to display all the content. “Visible” will show everything, no matter what the size is—resulting in a longer box than anticipated. “Hidden” will cut off any parts that fall outside the dimensions. Choosing “scrollbars” will put scrollbars around the box whether needed or not. And “auto scrollbars” only adds them if needed.

Clipping is sort of like cropping: it determines what content will show and what part may be hidden.
It’s difficult to predict what will happen to several blocks assigned specific positions unless they are created within <div> tags. A <div> tag surrounding a chunk of text or an image turns it into an element that can be positioned with more precision. The <div> and </div> tags replace the <p> and </p> tags.

NOTE: certain objects are automatically placed inside <div> tags, like tables and layers.

To do this, you need to create several classes or IDs (when creating an ID, you need to remember to name it with a # as the first character). Create one and enter your position coordinates (don’t try to use all four placement options! Determine left or right, and top or bottom), then use the pop-up menu at the top left of the CSS styles panel to duplicate it several times.

Then create your “div” elements: select an element, a paragraph, or a group of things, and then use either Insert > layout objects > div, or click on the <div> object from the layout insert bar (second in from the left).

You’ll be asked to assign a class or an id to the object. Choose the class or ID from the popup menu (not both!). Almost magically, the item turns into a layer!

One thing to remember is that tables, images and text in your document that aren’t assigned positioning will start at the top of the page and run over any elements that are positioned. Very weird.

see these examples...

Overflow determines what happens if the size of an element (as determined by width and height) is too small to display all the content. “Visible” will show everything, no matter what the size is—resulting in a longer box than anticipated. “Hidden” will cut off any parts that fall outside the dimensions. Choosing “scrollbars” will put scrollbars around the box whether needed or not. And “auto scrollbars” only adds them if needed.


This is an example of using scrollbars...

ACTUALLY USING CSS STYLES

If you’ve created styles as classes, you have to select things and apply the style. You’ll see in the properties panel that, depending on what you’ve selected, the “style” or “class” setting appears in different places.

An image is assigned a class— select it from the far right upper corner of the properties panel.

A table is assigned a class as well, unless you redefined the table tag.

Text is assigned a style from the properties panel.

If you’ve redefined a tag (<body> or <p>, for instance) the style you created is applied automatically.