Confused about CSS - how it fits in design process

  Charlie Babbage 15:06 17 Jan 07
Locked

I've read quite a bit about CSS over the last few weeks and think I've got the general idea that it can be used to define the 'look and feel' of the whole site - the advantage being that if you then want to make alterations, you just alter the CSS code rather than (possibly) 1000's of individual pages.

I created a very simple site click here using Serif Webplus 9 which automatically inserts all the CSS for you. So far so good. However, I'm also trying to get to grips with Dreamweaver (DW) MX 2004 - I know that's not the latest version! If you choose the option of a basic HTML site and start creating a simple page, again DW starts automatically inserting CSS code. If, however, you want to create your own coding eg all h1 headings to be red color, centered does that override the code that DW inserts?

Also, exactly at what stage, should you insert the CSS code - right at the start, half way through or at the end? In DW, I'm aware that there are CSS templates. Again, if you choose to use one of those do they override any automatic CSS that DW inserts?

Apologies if this is not crystal clear but any suggestions or clarification would be appreciated.

  Eric10 16:13 17 Jan 07

To get the real benefit of using CSS you need the CSS code to be written in an external stylesheet. In the head section of each page you place a link to this stylesheet. If you put the CSS on every page (as seems to be what is happening) then you will still have to alter every page if you want to change anything rather than just the one stylesheet.

With an external stylesheet you can create the CSS as and when you need it and it will be applied to your pages from then on.

Styles are applied in the order that they appear on the page. i.e. If you link to a stylesheet in the <head> of each page that specifies that <h1> tags have red text then all <h1> headings throughout your site will have red text.
<link rel="stylesheet" href="stylesheet.css" type="text/css">

Now if you add a style in the <head> of a page (after the external stylesheet has been linked) and that style specifies 'blue' text for <h1> then all <h1> headings on that page will be blue because the second style to be read overwrites that of the stylesheet.
<style type="text/css> { h1 color: #0000ff } </style>

If you subseqently specify the colour 'green' in a style definition inside just one <h1> tag on your page then the red or blue will be overwitten with green for that one <h1> heading only.
<h1 style="color: #008000">

click here for more useful info.

  RicScott 11:16 22 Jan 07

These are free software downloads that will help you understand CSS a bit easier..
The first is a CSS WYSIWYG layout program:
click here

The second is a text based layout program:
click here

Once you get the hang of it, it's a powerful, easy llanguage. It will all fall into place in no time..

I also used to download free web templates that were CSS based and basically pull the code apart so I could see what does what etc..You can change parts of the code to see how they did it, what changes you have made..It helped me to understand the language.

Free templates to play with are available from:
click here

Have fun with it...

  Charlie Babbage 10:53 23 Jan 07

.. I'll have to spend the next few days to go through it all!

This thread is now locked and can not be replied to.

Sniper Elite 4 review: Headshotting Nazis has never felt so good

1995-2015: How technology has changed the world in 20 years

Framestore’s haunting post-WWII title sequence for new BBC series SS-GB

New iOS 11 release date rumours UK | new features coming to Siri, FaceTime, Messages and Video