Keeping Content and Presentation Separate
something about CSS (cascading style sheets)
Here are
some good books
on CSS
Chris Jennings -
PageToScreen
Presentation Concepts
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
Presentation Logic
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?
Types of Mark-up for (X)HTML
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>
Block level mark-up
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)
Inline Elements
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>
Inheritance
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”>
Unstyled Content!
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)
Defining the styles
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
Style-sheets
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
x
href="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
Positioning
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)
Floating
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