Previous Message
Next Message

Lost, Dazed & Confused about the right way to setup basic styles

Sent by Rob Cochrane on 4 September 2005 09:09

This is a multi-part message in MIME format.
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit

> I'm lost, dazed and confused!
> Any suggestions?
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> List wiki/FAQ --
> Supported by --
Hi Bruce,
About 2 years ago I was in the same place as you. It is not all crazy!

The first thing to change more than anything is your mindset. I found 
this to be the major hurdle.

  Separate structure, content and presentation.

Then establish the structure in such a way as to allow for presentation 
to be hooked onto the various elements of the structure. In order to do 
this you will need to apply classes and identities to various tags so 
that they may be easily identified. Some specifically eg.

  <div id="main_content"> bla bla bla </div> or some collectively such 
as <div class="first_elements"> bla bla bla </div>. An id may only be 
used once in a page but class can be used repeatedly in a page.

Applying styles to tags globally is fine to set default styles and then 
altering specific elements later to achieve the variations you require.
Both class and ID can be applied to a single tag if it is appropriate.

If within your content you have some thing you require to apply a style 
to you may apply any number of inline tags to enclose that content 
<span> <i> etc are all able to be used and then targeted for specific 
It is my opinion that the place for styles is in a separate style sheet 
not embedded in the document and if one starts by doing this you 
maintain clear code both in the HTML doc and the CSS file.

I try to keep separate CSS files for layout, decoration, print, 
handhelds etc. This maintains clarity of structure.
Below is a simple example showing how you may use the cascading effects 
of CSS

<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 2em;
#container {
	color: #0000FF;
	font-size: .5em;
#leftcolumn {
	font-family: "Times New Roman", Times, serif;
	font-size: 10px;
#maincontent {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #006666;
..underline {
	color: #990000;
	text-decoration: underline;

This is text contained only by the body tag
<div id="container">This is text within both body and "container"
<div id="leftcolumn" class="underline">This is text in leftcolumn inside 
container inside body</div>
<div id="maincontent">This is text inside <span 
class="underline">maincontent</span> inside container inside body</div>

I hope this helps

Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit

css-discuss [EMAIL-REMOVED]]
List wiki/FAQ --
Supported by --

Previous Message
Next Message

Message thread: