Coding: CSS: Layout
One of the advantages of CSS is the layout options. CSS is great for creating flexible layouts that expand or contract depending on the end user's monitor. It's also great because it's easy to update the layout by simply changing the CSS. The use of CSS is also the current "best practice" in terms of accepted standards.
Structuring Pages
Castro suggests four steps in structuring pages:
Divisions. Organize your content into divisions such as masthead, main, sidebar, and footer. Each division will have an id such as <div id="sidebar">.
Order Divisions. Place your div elements in an order that they appear on your screen with the masthead at the top and the footer at the bottom.
Headers. Use the header elements consistently.
Comments. Use comments to remind you about the different areas and increase accessibility.
Read Chapter 11: Layout with Styles by Elizabeth Castro in HTML, XHTML, & CSS, Sixth Edition.
Background Styles
Background Color
Instead of using the deprecated bgcolor property to set background color, set the background-color property. Then set the color name or hexadecimal reference value.
Sample 1 - giving the entire body a background color
Sample 2 - giving an element a background color (Note that the color extends to the end of the window unless a width is given to restrain it or it is set up in a <span> tag.)
Background Image
If you choose to incorporate a background image, use care. Select a visual that won't overwhelm the page or distract from the content. Rather than using the deprecated background property, set the background-image property. Then set the value to url (theimage.gif).
Sample 1 - a background image that tiles by default to cover the entire window
Sample 2 - you can also put a background image behind any element (Note that the background image will repeat unless told not to.)
Sample 3 - if you know how wide your image is and how wide your text will be . . . (Note that the background image is told not to repeat.)
Background Tiling
If you want the background image repeated, try background-repeat for background tiling. Then set the value to repeat-x, repeat-y, or no-repeat.
Sample 1 - a background image tiled horizontally (Note the need for some padding to push the text down below the image.)
Sample 2 - a background image tiled vertically (Note the need for a margin adjustment for the text to be legible.)
Background Attachment
To use a fixed image on the background that will not scroll, use the background-attachment property. Then use a fixed value.
Sample 1 - a background image that is centered and fixed
Background Position
To place a background image somewhere on the page, use the background-position property. Then use a percentage, a length, a keyword (top, center, bottom, left, center, right) value.
Sample 1 - this logo is positioned by using the keywords "top" and "right"
Margins and Borders
Margins
To set a margin on any side of an element or all sides, use the margin, margin-top, margin-right, margin-bottom, or margin-left property. Then set a percentage or length value.
Sample 1 - margins (left/right) defined for two different elements
Sample 2 - a margin is defined for the top of the first paragraph
Padding
To set space around an element (between the element and its margin), use the padding, padding-top, padding-right, padding-bottom, or padding-left property. Then set a percentage or a length.
Sample 1 - padding (top/bottom) defined for two different elements
Border
To set a border of an element such border, border-top, border-right, border-bottom, or border-left. Then use a length or a keyword (thin, medium, thick).
Sample 1 - a different size border was indicated for the bottom of this element (Note that the element itself has been given a relative width.)
Sample 2 - a different style border was given for top and bottom
Border Style
To give a style to a border, use border-style. Then set it to dotted, dashed, solid, double, groove, ridge, inset, or outset.
Sample 1 - an example of a dashed border (Note that some padding has been added to gain some space between text and border.)
Sample 2 - a dashed border along the top of each paragraph
Sample 3 - dotted borders along the left and right sides of each paragraph
Border Color
To give a border color, use the border-color property. Then set the name or hexadecimal reference.
Sample 1 - a colored border
Sample 2 - just because you can do this doesn't mean that you should . . .
Sample 3 - be able to distinguish between margins, borders, and padding
Dimensions and Position
Width and Height
To give an element a width and height, use the width and height property. Then set a percentage or length.
Sample 1 - the <p> element has been given a width of 70%
Sample 2 - the <h1> and <h2> elements have been given a height of 100px (as seen by the background color)
Position
Rather than using the deprecated "align" attribute, use the position property. Then set left or right.
Sample 1 - any element can float and have other elements flow around it
Sample 2 - a paragraph can float and be given other styles to make a sidebar
Clear Position
To keep an element from being positioned in a particular place, use the clear property. Then set left, right, or both.
Sample 1 - one <p> is told to clear; the other <p> is not cleared, so text flows around it