Designing with style is easier to understand when you stop looking at a web pages as a single entity. Instead, look at each page as if it were ascollection of components; company banner, navigation, contact informations, content, advertisements, copyright, etc.
You then use HTML commands and attributes to define and label each component. Once this is done you can use the various style rules to select and position these components to create the page in a browser window or on a printer.
As we get deeper into this section, you will see how to select a unique collection of components for the screen display and a different collection of components for the printed page.
Once you are comfortable with the selection of a different collection of components for the printer, it is a logical next step, using Media Queries or Variable HTML, to select and reposition a different collection of components based on the width of the browser window that is displaying your page; i.e., adaptive web design!
Note: The variable content of the pages of this website are being combined with alternate collections of fixed components to display the site in both a fluid design style and also a series of fixed width designs. The links at the bottom of each page allow you to easily switch between the two designs.
This is not something that you would normally do, but it does illustrate how easy it is to change your overall design using style rules. The actual maintenance of the parallel sites is being done with our MySSI program.
CSS is an extremely powerful style design language that controls the look and feel of HTML content. Since all the visual characteristics of a website can be completely separated from the actual content, the use of CSS to design a website allows us to quickly create layouts.
The resulting CSS designs are more flexible and much easier to maintain and modify.
Since the coding of most complex sites will be reduced by 25% to 50%, the sites will also load faster and use a lot less bandwidth.
But, the most important advantage of using CSS to design your site is that you can easily create an alternate stylesheet to make your pages printable, or in this case, multiple designs for the Variable HTML display.
ID and CLASS - (attributes)
Before we can do anything with the page layout, we have to identify the various elements. Some of our page elements are unique; there is only one ad column and only one navigation column, so, if we are using tables to create the page layout, we can simply add an ID attribute to the HTML TD commands that contain them; IDís are used only once per page to identify unique elements.
Since the fluid content can appear in either one or two columns, and since it can also switch back and forth multiple times on each page, these elements are defined with HTML CLASS attributes; classes can appear multiple times on a page.
DIV and SPAN - (commands)
Defining a page element is easy when that element is contained in a single HTML command. Where do you put the ID or class tag when the element contains multiple paragraphs, a list, and an image?
The DIV command has no features of its own; it does not add any space, change font, or anything else. It just defines a block of code which can contain other blocks of code, and of course can be defined as an id or class.
The SPAN command works the same way for phrases within a code block, similar to the italic and bold commands.