Keeping Content and Presentation Separate

something about CSS (cascading style sheets)

Here are some good books on CSS

Chris Jennings - PageToScreen

There will always be a need to present different components of content differently
For example:
- Headings need to look different from paragraphs
- Book or CD titles may need to look different from the surrounding sentence
To work toward this end we need to:
- Organise the content in a logical structure (flow)
- Use labels (mark-up) which identifies the type of content
- Avoid labelling the information with mark-up that presumes a particular look

Sketch out the different types of content within the whole
Use outliner or mapping tools to define the components
Which components types are unique and which are repeated types?
Think abstract rather than style first
Think about flow:
- In its raw (un-styled) state, how will the content flow from beginning to end?

Block elements are those which, by default, will begin on a new line and content after will start a new line
Examples: paragraphs and headings
Inline elements are contained within a line of text
Examples: emphasised text or citation
Mark-up can be semantic or can use existing (X)HTML tags
- Examples: <span class="authorname"> or <em>, <div class="chapter_title"> or <h1>

First appreciate difference between unique elements and repeated elements
- For example: each page may have only one brand logo region but many journal entries
Divisions may have IDs (unique) or classes (could be repeated)
Examples:
- <div id=”logo_box”> (this is unique for each page)
- <div class=”journal_box”> (there can be more than one on a page)

text elements within block level elements can be marked up with <span> tags or
- Default (X)HTML, tags can be used
Examples:
- <span class=”booktitle”> - semantic markup
- <em> - standard tag for emphasised text
Avoid using HTML markup that defines the look of an element because this will be deprecated and is outside the concept of separation. Examples:
- don’t use <b> use <strong>
- don’t use <i> use <em>
- don't create <span class="bigfont>

Structural elements can be contained within other elements
Inheritance can be used to target specific elements
For example: <em> within a title <h1> can be different than <em> within a paragraph <p>
Inline elements can be contained within paragraphs or other block level elements
Everything is contained within the document (HTML)
All displayed elements are contained within the root or <body> of the document which is unique and can have an ID. Like this: <body id=”home”>

What does the document or web page look like before styles are defined?
How does the flow work?
How does it display without the use of styles?
Is it important that it is presented in a reasonable, logical way before styles are applied
Default markup (eg <em>, <p>, <h1>) will display correctly (at least be identifiably different)

The style rules can be within the page or outside in a separate file
Aim to use external style-sheet but:
- Using internal styles can be useful for developing site
be aware of specificity
- em {font-style: italic;} will define <em> everywhere to be italic but:
  - div#content h1 em {font-weight: bold;} will also make <em> within <h1> within <div id=”content”> be bold
Think about the cascade
- inline is a child of the block is a child of the body is a child of html
- rules defined later over-ride earlier defined rules

styles can be defined in one external file or several separate files
- examples: positioning could be kept in one file and backgrounds in another
Style-sheets can be created for different media types. examples:
- <link xhref="css/print.css" type="text/css" rel="stylesheet" media="print" /> (remove the x)
- @import url(css/bright.css) screen;
link and @import are alternative ways of linking style-sheets

Block level elements can be positioned by defining styles with the position declaration for that block
Potentially, elements can be taken out of the ‘flow’ of the document
Normally, blocks follow on from previous blocks and are statically positioned
Positions can be relative, absolute or fixed (not supported by all browsers)
- Relative moves from the normal flow by the amount specified
- Absolute removes from the flow and is positioned in relation to the containing block (inheritance remember!)
- Fixed is as above but the containing block is the viewport (window)

The Float property for a block level element also removes from the normal flow of the document
Other following elements on the page will move out of the way of the floated element
Floated elements need to have a width declaration as well
Blocks can also have a z-index defined to accomplish stacking