CSS Generator Help Document


Add, Reset, and Help Controls


Add: Clicking this will create your generated CSS style code. You may continue to add more definitions by clicking the "add more" button at the display code window.

Reset: Essentially refreshes the generator and starts it over. You will lose all previously entered data.

Help: Popups this Help document.

 

Select All & Add More Controls


Clicking the "add" button (see above) will bring up the displayed code window.

Select All: In Internet Explorer, clicking the "select all" button will automatically select all the generated code AND copy it to your clipboard. Just select a place within the <head> tags of your document and paste the code.

In other browsers it will simply highlight all the code and prompt your to copy it.

In either case, using "select all" is preferred over dragging your cursor over the text. There is no chance of missing an important character when using the "select all" button.

Add More: The "add more" button brings you back to the tabbed windows and allows you to add more elements. Some care should be taken when adding more styles because all the properties that were previously selected and set are still selected and set. This is handy for having certain property settings inherited, or pass down, to other classes and elements, such as font families and styles.

 

Application - Text Tab


Style...

New Class Name: With the class name you can define different styles for the same type of HTML element.

Apply Style to HTML tags: Defined styles to a specific set of tags. For example FONT will convert all font to a specific style ie: Arial.


Link Set...

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways in a CSS-supporting browser.

NOTE a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. As well, a:active MUST come after a:hover in the CSS definition in order to be effective!


Active Font Set...

First: Displays available font sets on your system. Select as primary font. This font must exist on you surfers system to display.

Second: Use as a backup in case primary font does not exist on your surfers system.

Generic: Refers to the name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace". Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent in the worst case when none of the specified fonts can be selected.


Font Size...

Absolute: Sets the size of the font to different sizes, from xx-small to xx-large.

Relative: This size value is relative to the font size of the parent element but is limited in range to that allowed by the system. For example, if the parent element has a font size of "medium", a value of "larger" will make the font size of the current element be "large".

Length: Sets the font-size to a fixed size.

Percentage: Sets the font-size to a % of the parent element. class=" class="""


Properties...

Weight: Sets the weight of a font. Its value can be absolute or relative to the parent container thickness if it has one.

Style: Sets the style of the font. This property applies font effects to content in the current container. If the preferred style can not be accommodated, the browser should try to find the best match to the indicated effect. Values have the following meanings:

"normal" This value indicates a font classified as 'normal' should be used (a font not italicized or oblique).

"oblique" A font specified as 'oblique' (sometimes also called Slanted or Incline) should be used. Oblique fonts often exist for sans-serif font types.

"italic" A font specified as 'italic' (or a variant of type Cursive) should be used. If one is not available, an oblique font may be used in its place.

Decoration: This property describes decorations that are added to the text of an element. If the property is specified for a block-level element, it affects all inline-level descendants of the element. If it is specified for (or affects) an inline-level element, it affects all boxes generated by the element. If the element has no content or no text content (e.g., the IMG element in HTML), user agents must ignore this property. Values have the following meanings:

"none" Produces no text decoration.

"underline" Each line of text is underlined.

"overline" Each line of text has a line above it.

"line-through" Each line of text has a line through the middle.

"blink" Text blinks (alternates between visible and invisible). Conforming user agents are not required to support this value. The color(s) required for the text decoration should be derived from the 'color' property value.

Variant: Displays text in a small-caps font or a normal font.

Word Spacing:

Increase or decrease the space between words.

Letter Spacing:

This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

 

Alignment- Background Tab


Indentation...

This property specifies the indentation of the first line of text in a block. The box is indented with respect to the left (or right, for right-to-left layout) edge of the box. User agents should render this indentation as blank space.

Length: Indents the first line of text in an element (fixed).

Percentage: Indents the first line of text in an element. Percentile is relative to the parent block's width.


Line Height...

Length: Sets a fixed distance between lines.

Percentage: Sets a percentile distance between lines. Refers to a percentage of the height of the containing element block.


Vertical Alignment...

Keyword: Sets the fixed vertical alignment of an element. Values have the following meanings:

"baseline" Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.

"middle" Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

"sub" Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)

"super" Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)

"text-top" Align the top of the box with the top of the parent element's font.

"text-bottom" Align the bottom of the box with the bottom of the parent element's font.

"top" Align the top of the box with the top of the line box.

"bottom" Align the bottom of the box with the bottom of the line box.

Percentage: Sets the percentile vertical alignment of an element. Raise (positive value) or lower (negative value) the box by this distance (a percentage of the "line-height" value). The value '0%' means the same as "baseline".


Horizontal Alignment...

Select: Sets the fixed horizontal alignment of an element. Values have the following meanings: "left", "right", "center", and "justify". Left, right, center, and double justify text, respectively.


Color...

Foreground: Sets the color of text.

Background: A shorthand property for setting all background properties in one declaration( in this case color ).


Background Image...

Image: Sets an image as the background. The value indicates the URL source for the graphic.

Repeat: If a "background-image" is specified, this value specifies how the image is repeated if the image is not large enough to cover the entire element. All image rendering covers the content and padding areas of the element's box.

Attachment: If a 'background-image' is specified, this value indicates whether or not the background image scrolls with the rest of the page.

 

Table - Borders Tab


Table...

Border Model: The rendering of table borders is divided into two categories in CSS2 - "collapsed" and "separated". This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. In the separated model, adjacent cells each have their own distinct borders (the distance between them given by the border "spacing" property.)

Cells: Sets whether cells with no visible content should have borders or not (only for the "separated borders" model).

Spacing: Sets the distance between the borders of adjacent cells (only for the "separated borders" model).

Caption: Sets the position of the caption according to the table.

Layout: Sets the algorithm used to lay out the table. Using the "automatic" layout algorithm (the table algorithm used by default in most browsers today), all of the table content is required in order to determine the final table layout. For larger quantities of data, this can be much slower than the "fixed" table layout algorithm. However, this algorithm does find sufficient minimum and maximum widths for each column, allowing all content in the table's data cells to be appropriately rendered as specified by the author. Under the "fixed" layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can drastically speed up rendering time over the "automatic" layout method, but subsequent cell content may not fit in the column widths provided.The Clip and Overflow properties control the cell appearance in such a case.

Clip: Sets the shape of an element. The element is clipped into this shape, and displayed. By default, the clipping region has the same size and shape as the element's box(es).

Overflow: Sets what happens if the content of an element overflow its area. "visible" The content is not clipped. It renders outside the element. "hidden" The content is clipped, but the browser does not display a scroll-bar to see the rest of the content. "scroll" The content is clipped, but the browser displays a scroll-bar to see the rest of the content and "auto" If the content is clipped, the browser should display a scroll-bar to see the rest of the content.

Box Border...

A shorthand property for setting all of the properties for the four borders in one declaration.

Size (px): Select the size of the borders in pixels.

Style: The border style properties specify the line style of a box's border (solid, double, dashed, etc.). The properties defined in this section refer to the "border-style" value type, which make take one of the following:

"none" No border. This value forces the computed value of 'border-width' to be "0".

"hidden" Same as "none", except in terms of border conflict resolution for table elements.

"dotted" The border is a series of dots.

"dashed" The border is a series of short line segments.

"solid" The border is a single line segment.

"double" The border is two solid lines. The sum of the two lines and the space between them equals the value of "border-width".

"groove" The border looks as though it were carved into the canvas.

"ridge" The opposite of 'groove': the border looks as though it were coming out of the canvas.

"inset" The border makes the entire box look as though it were embedded in the canvas.

"outset" The opposite of 'inset': the border makes the entire box look as though it were coming out of the canvas.

All borders are drawn on top of the box's background. The color of borders drawn for values of "groove", "ridge", "inset", and &#34;outset" depends on the element's "color" property.

Color: Sets the color of all borders.

Left Border - Right Border - Top Border - Bottom Border...

Shorthand properties for setting "Left", "Right", "Top" and "Bottom" borders individually.

Size (px): Select the size of the border in pixels.

Style: See Box Border...Style: above.

Color: Sets the color of the individual border.

 

Margins - Padding Tab


Left Margin, Right Margin, Top Margin, Bottom margin:

Sets the corresponding margin of an element. These properties control the size of the margin of an element's rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.

Length: Refers to a fixed value based on the current element's font size.

Percentage: Refers to a percentage of the width of the current element's containing block.

Left Padding, Right padding, Top Padding, Bottom Padding:

These properties controls the size of the corresponding padding of an element's rendering box. Negative values are not allowed.

Length: Refers to a fixed value based on the current element's font size.

Percentage: Refers to a percentage of the width of the current element's containing block.