Anatomy of a CSS Layout

Below is just one example of a CSS Layout, including the Selectors you might use to format each div tag.

Each section of the Layout is made from an HTML div tag.  A div tag generates a box when we place it on the page.  We use divs to 'divide' the page into different sections so as to create a Layout. 

A div is also be used to hold content, such as text, images, videos, and so on.  We can even place a div inside another div in order to achieve design goals or to add certain types of content.

The default Static  div doesn't have any formatting, therefore, we have to create a CSS Style (style declaration) to format and position the div.  That CSS Style is applied to the HTML via a CSS Selector.  We can use an HTML Attribute to hook the Style to the HTML element. 

The above paragraph has quite a bit of information packed into it.  The point is this: 

• The way we use CSS to make a layout involves two basic steps (at first)
• 1) Place a <div> on the page.
• 2) Create a New CSS Style that targets the <div> and applies formatting and positioning properties.

A Style begins with a Selector, which is used to target, or 'select' the html element we want to style.

 There are many types of Selectors.  But let's use an ID Selector for the following example:

Example:  Make the header

Working in Design View, place a div tag on the page.  This is the same as writing <div></div> in Code View.  And the result is the same: the div tag generates a long rectangular box on the page.

Next, we create the CSS Style.  We can use the New style dialog to do this, or we can open the External Style Sheet and write our Style directly onto the style sheet.

Our Style will have a Selector of #header

In order to hook the #header style to the <div> tag, we will use the HTML id attribute.  (Expression Web usually takes care of this for us.  However, it's good to understand the actual processes that go on under the hood.)

Our HTML will look like the following after we add the id attribute:

<div id="header"></div>

And that's it. Wash, Rinse, and Repeat until you have created your layout.

The image above illustrates the CSS Selectors one might use in creating a 2 Column CSS Layout.  Each Selector is an ID Selector as indicated by the #.

The above layout is just one example of a 2 column fixed width layout that is popular on the web. In no way must you make your columns stand out as I have.  I did that only so you could distinguish one column or row from another.

Just Be Creative.  Yet, Keep it Simple.  And to learn how to build Layouts, try my Tutorials on DVDs for Beginners or Self-Paced Online Class (online Lessons). 

 

[See HTML5 elements & Layout ]