CSS in Dreamweaver

Information about the basic structure and methods of designing the layout of pages and content using CSS styles in Dreamweaver.

Information about the page layout based on CSS styles

A page layout based on CSS styles is a layout that uses CSS styles to organize content on a web page, not traditional tables or HTML frames. The basic design element of the CSS system is the DIV tag. This is an HTML tag that most often serves as a container of text, images or other page elements. By creating a CSS layout, you insert the DIV tags on the page, insert the content into them, and place them in different places. In contrast, cells that must be in the grid delimited by rows and columns of the table, DIV tags can appear anywhere on the page. The DIV tags can be positioned absolutely (by specifying X and Y coordinates) or relatively (by giving them a new position relative to the current position). Another way to modify the position of the DIV tags is to specify the “float” property and to define internal spacing and margins. This is the preferred method according to current Internet standards.
Information about the structure of the CSS page layout

Before you go to the rest of this section, it’s worth learning the basic concepts related to CSS styles.

The basic design element of the CSS system is the DIV tag. This is an HTML tag that most often serves as a container of text, images or other page elements. The following example shows an HTML page that contains three separate DIV tags: one large “container” tag that contains two more tags: a sidebar tag and a main content tag.

The HTML code for all three DIV tags is as follows: