CSS Concepts
In a nutshell, Cascading Style Sheets abbreviated to CSS is a method for separating presentation from content. The content is placed in the HTML, XHTML, or any variation of XML document. The presentation is then defined by CSS rules applied to elements/content. The presentation is essentially a collection of the following:
- styles are applied to color, fonts, applied to headings, p etc
- styles are applied to the box structure of the page which is defined by
- the box type (inline, inline-block, block, table, absolute, float)
- the box positioning (static, absolute, relative, fixed, and or floated)
- the box dimensioning (sized, shrink wrapped, or stretched)
Designers with HTML knowledge and table familiarity should begin their journey into CSS this way. Separate and define the presentation parts into style, and box (type, position, and dimension). I have found most of the books on CSS gloss over the separation between styles and boxes in a way that especially confusing to new designers who have just learned HTML with tables.
Styling Content
Although CSS is styling for all of your content, we will start with the styles of your text (p, headings, emphasis, custom, etc) anchors and images, and then go into the styles that go with the box.
Box Model types
The design plan starts here. On paper, draw the boxes that will hold the content, THEN define the type of box which will be needed. (inline, inline-block, block, table, absolute, float)
Positioning
A box will have to be positioned, meaning positioning properties are defined OR they default to the browser default. (static, absolute, relative, fixed, and or floated)
Dimensioning
The three ways to dimension a box are sized, shrink wrapped, and stretched - conceptually it is like a nested table. (sized, shrink wrapped, or stretched)