Build Style Dialog Box

The Build Style dialog box enables you to modify an existing style in a CSS style sheet.

To modify a style in a CSS style sheet

1. Open the CSS style sheet in the editor.

2. Put the cursor inside the braces of the style rule to be modified.

3. In the Styles menu, click Build Style.

   The Build Style dialog box is displayed.

   Note
   The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you put the cursor inside the braces that follow the selector for a style rule.

4. Select the style options for each Category listed, and then click OK.

   The selected style is modified in the CSS style sheet.

As you select style options, the Preview box displays an example of how the style rule will appear when it is applied. The Description box shows the CSS definition of the style rule.

• How to: Use the CSS Properties Window

• Walkthrough: Creating and Modifying a CSS File

• Walkthrough: Working with an Existing CSS File

• Walkthrough: Basic HTML Editing in Visual Web Developer

Font

• font-family
  The name of a text font. Font names that contain spaces should be surrounded by quotation marks, such as "Times New Roman". You can specify multiple font names, separated by commas (,). It is good practice for the last font in the list to be a generic font such as "serif", "sans-serif", or "monospace".

• font-size
  The size of the font. If you enter a value, you can select value units from the list. It is good practice to use relative sizes, such as "small", "x-large", or a percentage, so that users can adjust the font size in the Web browser.

• font-weight
  The weight of the font, such as "normal", "bold", or "400".

• font-style
  The style or slope of the font, such as "normal" or "italic". If you select "oblique", most Web browsers will render the font as italic.

• font-variant
  A variant style for rendering the font. Values are as follows:

  • normal   The font will be rendered normally.

  • small-caps   The font will be rendered in small capital letters.

  • inherit   The variant style will be inherited from the parent element.

• text-transform
  A value that defines capitalization effects for the text. Values are as follows:

  • capitalize   The first letter of each word is rendered uppercase.

  • lowercase   All letters are rendered lowercase.

  • uppercase   All letters are rendered uppercase.

  • none   Text capitalization is not changed.

  • inherit   The text-transform style will be inherited from the parent element.

• color
  The color of the text font.

• text-decoration
  A combination of the following text attributes: underline, overline, line-through, and blink. If you select none, all other check boxes will be cleared.

Block

• line-height
  The spacing between lines of text. If you specify a value, you can select units in the list.

• vertical-align
  The vertical positioning of the content of an element or a table cell. If you specify a value, you can select units in the list.

• text-align
  The horizontal positioning of text or an image.

• text-indent
  The indentation of the first line of text in a paragraph. If you specify a value, you can select units in the list.

• white-space
  How white space is rendered. White space includes spaces, tabs, and hard returns. Values are as follows:

  • normal   Collapses consecutive white-space characters into a single space.

  • nowrap   Suppresses line wrapping.

  • pre   Preserves white-space characters.

  • pre-line   Preserves white-space characters but wraps text.

  • pre-wrap   Preserves white-space characters and does not wrap text.

  • inherit   Inherits white-space style from a parent element.

• word-spacing
  The amount of spacing between words. If you specify a value, you can select units in the list.

• letter-spacing
  The amount of spacing between the letters in a word. If you specify a value, you can select units in the list.

Background

• background-color
  The background color of an HTML element.

• background-image
  The image to use for the background of the Web page. The image must have been previously added to your project. It is good practice to set the background color in case the Web browser does not render the image.

• background-repeat
  How a background image will be repeated. Values are as follows:

  • no-repeat   The image is not repeated.

  • repeat   The image will be repeated vertically and horizontally.

  • repeat-x   The image will be repeated horizontally.

  • repeat-y   The image will be repeated vertically.

  • inherit   The background-repeat style will be inherited from a parent element.

• background-attachment
  Whether the background image is fixed in place or scrolls with the rest of the Web page. Values are as follows:

  • fixed   The image is fixed in place and does not scroll.

  • scroll   The image scrolls with the rest of the Web page.

  • inherit   The background-attachment style is inherited from a parent element.

• (x) background-position
  The horizontal positioning of the background image. If you specify a value, you can select units in the list.

• (y) background-position
  The vertical positioning of the background image. If you specify a value, you can select units in the list.

Border

• border-style
  The line style (such as solid or dashed) of all four borders around an HTML element.

• border-width
  The line width of all four borders around an HTML element. If you specify a value, you can select units in the list.

• border-color
  The color of all four borders around an HTML element.

Box

• padding
  The padding for an element. The padding defines the amount of white space inside the element's border, if one exists. You can set the padding for each side (top, right, bottom, or left) independently. If you specify a value for any side, you can select units in the list. To make the padding the same for all sides, specify a value in top and then select the Same for all check box.

• margin
  The margins around an element. A margin defines the amount of white space outside the element's border, if one exists. You can set the margin for each side (top, right, bottom, or left) independently. If you specify a value for any margin, you can select units in the list. To make the margins the same for all sides, specify a value in top and then select the Same for all check box.

• CSS box model reference
  Displays the meaning of CSS box terminology, such as margin, border, padding, and top.

Postition

• position
  The algorithm to use to put an element on a Web page. Values are as follows:

  • absolute   The element's position is specified by using the top, right, bottom, and left properties. These properties are relative to the containing block.

  • fixed   The element's position is specified by using the top, right, bottom, and left properties. These properties are relative to the browser window. The element does not scroll with the Web page.

  • relative   The element's position is calculated according to the normal flow and then offset by using the top, right, bottom, and left properties. The offset is relative to the element's normal position.

  • static   The element's position is calculated according to the normal flow. The top, right, bottom, and left properties are ignored. This is the default.

  • inherit   The element inherits its positioning algorithm from a parent element.

• z-index
  The stack level of an element. An element that has a higher stack level appears in front of elements that have lower stack levels.

• width
  The width of an element. If you specify a value, you can select the value units in the list.

• height
  The height of an element. If you specify a value, you can select the value units in the list.

• top
  The top edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.

• right
  The right edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.

• bottom
  The bottom edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.

• left
  The left edge of an element. If the position property is set to static, this property is ignored. If you specify a value, you can select the value units in the list.

Layout

• visibility
  Whether an element is visible or hidden. Values are as follows:

  • collapse   When used with table elements, this value hides a row or a column. For all other elements, this value means the same as hidden.

  • hidden   Makes the element invisible.

  • visible   Makes the element visible.

  • inherit   The element inherits its visibility property from a parent element.

• display
  How an element is displayed. Values are as follows:

  • block   The element will be displayed at block level with line breaks before and after it.

  • inline   The element will be displayed inline with no line breaks before or after it.

  • inline-box   The element will be displayed inline as a box with no line breaks before or after the box.

  • inline-table   The element will be displayed inline as a table with no line breaks before or after the table.

  • list-item   The element will be displayed as an item in a list.

  • none   The element will be hidden.

  • run-in   The element will be displayed either at block level or inline, depending on the context.

  • table   The element will be displayed as a block table with a line break before and after the table.

  • table-caption   The element will be displayed as a table caption.

  • table-cell   The element will be displayed as a table cell.

  • table-column   The element will be displayed as a table column.

  • table-column-group   The element will be displayed as a group of table columns. This group might contain one or more columns.

  • table-footer-group   The element will be displayed as a group of table footers. This group might contain one or more footers.

  • table-header-group   The element will be displayed as a group of table headers. This group might contain one or more headers.

  • table-row   The element will be display as a table row.

  • table-row-group   The element will be displayed as a group of table rows. This group might contain one or more rows.

  • inherit   The element inherits its display property from a parent element.

• float
  Whether an element will float to the left or right, enabling text to wrap around it, or be displayed inline. This property is most often used with images, but it applies to text blocks as well. Values are as follows:

  • left   The element floats to the left, inside the parent element.

  • none   The element is displayed inline where it appears in the text.

  • right   The element floats to the right, inside the parent element.

  • inherit   The element inherits its float property value from a parent element.

• clear
  Which sides of an element disallow floating elements. Values are as follows:

  • both   The element disallows floating elements on its left or right side.

  • left   The element moves below a floating element that is on its left side.

  • none   The element allows floating elements on all sides.

  • right   The element moves below a floating element that is on its right side.

  • inherit   The element inherits its clear property from a parent element.

• cursor
  What type of cursor to display. Values are as follows:

  • auto (default)   The browser sets the cursor.

  • crosshair   The cursor is rendered as a crosshair.

  • default   The default cursor (often an arrow).

  • e-resize   The cursor used for resizing an element to the right (east).

  • help   The cursor that indicates that help is available (often a question mark).

  • move   The cursor that indicates an object can be moved.

  • n-resize   The cursor used for resizing an element to the upward (north).

  • ne-resize   The cursor used for resizing an element to the up and right (northeast).

  • nw-resize   The cursor used for resizing an element to the up and left (northwest).

  • pointer   The cursor is rendered as a pointer (often a hand).

  • progress   The cursor that indicates the program is making progress.

  • s-resize   The cursor used for resizing an element to the downward (south).

  • se-resize   The cursor used for resizing an element to the down and right (southeast).

  • sw-resize   The cursor used for resizing an element to the down and left (southwest).

  • text   The cursor used for text.

  • w-resize   The cursor used for resizing an element to the left (west).

  • wait   The cursor that indicates the program is busy (often an hourglass).

  • inherit   The element inherits its cursor property from a parent element.

• overflow
  What happens when the content of an element overflows its area. Values are as follows:

  • auto   Scroll bars are displayed only if the content is clipped.

  • hidden   The content is clipped to fit the element and no scroll bar is displayed.

  • scroll   The content is clipped to fit the element and a scroll bar is displayed.

  • visible (default)   The content is displayed even if it is outside the element.

  • inherit   The element inherits its overflow property from a parent element.

• clip
  The rectangular dimensions of an element. If the element is larger than the defined area, it will be clipped to fit the area. To specify the dimensions, use the top, right, bottom, and left boxes.

• top
  The top edge of the clip rectangle. If you specify a value, you can select units in the list.

• right
  The right edge of the clip rectangle. If you specify a value, you can select units in the list.

• bottom
  The bottom edge of the clip rectangle. If you specify a value, you can select units in the list.

• left
  The left edge of the clip rectangle. If you specify a value, you can select units in the list.

List

• list-style-type
  The style of the list-item marker (bullet). Some browsers support only disc (a solid circle).

• list-style-image
  The image file to use as the list-item marker (bullet). The image file must have been previously added to the project.

• list-style-position
  Where the list-item marker will be placed. Values are as follows:

  • inside   Places the marker to the left of the text, but wraps the text below the marker.

  • outside (default)   Places the marker to the left of the text, and indents the text when it wraps.

  • inherit   The element inherits its list-style-position property from a parent element.

Table

• table-layout
  How table columns will be sized. Values are as follows:

  • auto (default)   The column width is set by cell content.

  • fixed   The column width is set by the table width and the width set for each column.

  • inherit   The element inherits its table-layout property from a parent element.

• border-collapse
  Whether the borders between table cells will be collapsed into a single border, or each cell will have its own border.

• border-spacing
  The distance between the borders of adjacent cells. This property is only for separated borders. If you specify a value, you can select the value units in the list

• empty-cells
  Whether empty cells will be hidden or shown.

• caption-side
  Whether a caption will appear at the top or bottom of the table.

See Also

Concepts

Working with CSS Overview