28 replies [Last post]
salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

HI,

PLease excuse my ignorance, I want to start converting my html site to CSS, so where is the best place to start ? :roll:

Thanks for advice.

Cheers.

Ray

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

New to CSS - where do I start ?

First of all, make sure the code you've got to convert is valid. This means using a doctype, then running it through the W3C validator.

Then, have a read up on google and here for basic CSS tutorials - things like classes, id's, attributes. Then have a go at styling things - paragraphs, borders, simple stuff.

Then move onto laying out your site in divs - working on margins, padding, etc.

And remember - code and test in Firefox, NOT internet explorer.

And if you get stuck, just ask!

Verschwindende wrote:
  • CSS doesn't make pies

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

Firefox

Thank you very much for your help, much appreciated. Where do I get 'Firefox' ?

Thanks again.

Ray

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New to CSS - where do I start ?

Try Google, search term="Firefox" surprisingly it's the first result Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

markup validation confusion

Hi again,

Now I am really confused...

I am keen to have my pages formatted correctly, I have just used the validation service and the report that I received told me that things like the word 'meta' was not allowed here and there, it also told me that the word 'body' was not allowed with 'bgcolor'.

I deleted the 'meta' words where it was a problem and deleted 'body, as well as other things, this led to my bgcolor being removed...

When I made the changes, uploaded the page again, requested another report, it said that my pages did not validate because it did not have the things that it had just told me to get rid of ???

I just don't know what to do here or what is going wrong, if I make the changes it suggests it tells me it is still wrong?

Help deeply appreciated.

Ray

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

New to CSS - where do I start ?

You need to show us the code.

Don't delete things you're not sure of, post here and we'll advise.

Verschwindende wrote:
  • CSS doesn't make pies

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

All my code?

Hi again,

You really want to see all of my page code ?

I can of course give it to you, but I don't want to presume upon anyone to that extent ?

Ray

vynsane
vynsane's picture
Offline
Regular
Last seen: 11 years 32 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

New to CSS - where do I start ?

the problems you are encountering sound like you have an incorrect (or non-existant) doctype for the language you're coding in. give us a link to the page in question, and we'll know how to help. most likely with the "meta" tags it was trying to interpret them as XHTML and you're using HTML. you have to tell the validator what language to interpret your page as.

here's a breakdown of the differences you need to account for

http://www.w3schools.com/tags/tag_meta.asp

most likely you are encountering the same kind of problem with the <body> tag. once again, you need to declare the doctype at the top of each document. an example of the syntax for this follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

that's if you are using HTML. you would declare an XHTML 1.0 Strict, or so on for a different language.

in addition, to validate, you actually NEED a "meta" tag to declare the character encoding for the document.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

this goes in the <head></head> tags, and tells the browser what alphabet characters are necessary to display your document.

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

My code

Hi,

I looked up the doctype for my html and included the "http" part that you see there as a result of what I read, it was not there previously. I am beginning to feel very lost here and so your help is realy very much appreciated!

The page that I requested validation for is :

http://www.gite-holidays-in-france.com

Thanks a million.

Ray

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

New to CSS - where do I start ?

no offence, but you haven't used a single piece of css.

Update

Oh I see you want to start converting, my bad :oops:

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

CSS

Hi,

Yes that's correct, as I've pointed out, I think, my site is html.

No offence taken, I have a lot to learn and CSS is my new agenda. Is the 'Validator' only legtimate for CSS ?

Ray

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 7 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

New to CSS - where do I start ?

HI

Ok the validator took me a bit of time to originally figure out, but it becomes clear when you find out what elements are allowed and arn't allowed with certain DOCTYPES.

Most of your problems are because of this.

the end of your meta tags are being closed incorectly

<meta name="distribution" content="Global" />

you see the /> is an xhtml way of self closing a tag whilst html would only have > with no gap. You are using html so you will need to change them all to > you are mixing the two.

also you have bodged your body tag.

<bgcolor="#FFCC66" onLoad="MM_preloadImages('img/Contact2.gif','img/yourhols2.gif','img/adyourprop2.gif','img/guarantees2.gif','img/about2.gif','img/links2.gif')">
<body bgcolor="#FFCC66">

should be

<body bgcolor="#FFCC66" onLoad="MM_preloadImages('img/Contact2.gif','img/yourhols2.gif','img/adyourprop2.gif','img/guarantees2.gif','img/about2.gif','img/links2.gif')">

it still wont validate because of some of the html styling, but these are the things that you will replace when changing to css.

Have a look on google for a DOCTYPE article, which should teach you about what can and can't be used.

I would recomend using xhtml strict, but xhtml transitional is also good.

Read up and you will understand the validators answers.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 22 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

New to CSS - where do I start ?

Hi salmonid,

Welcome to the forum.

The errors/warnings you got are mostly simple to fix, but don't bother. The move from html tag soup (what you have now) to well structured, semantic html+css means a complete refactoring of the code and the coding paradigm.

There are two major steps:

  1. Write properly structured, properly formed, and semantic html. Take no regard about how it will display. The object is to keep structure and display orthogonal.
  2. Write the style rules that will govern how your html will display.
After you've gained some experience, you will probably do both as you go, but the base remains good html then css.
The first step in writing html is to select your doctype. You may elect to use either html4.01 strict or xhtml1.0 strict. Since there is no valid reason to use deprecated elements or attributes, there is no reason to validate to less than a strict DTD (DocType Declaration). Using a complete DTD will force browsers into standards mode. That in turn causes IE6 to use the W3 box model, eliminating a ton of problems.

So let's start writing some html.

Create some container divs as we go. This part of the back and forth. I'm just looking ahead. Smile

Wrap the whole page in a div id="wrapper"

Now another container for the stuff other than the pics on the left. div id="content"

A container for the banner stuff div id="banner"

Everything else but the pics.

Then close the #content div.

Now a container for the pics. div id="pics"

And close #wrapper.

Your skeleton will look something like this
 
<div id="wrapper"> 
  <div id="content"> 
    <div id="banner" 
      <h1>...</h1> 
      <img ... /> 
      <img ... /> 
    </div> <!-- end banner --> 
    <h2>...</h2> 
    <h2>...</h2> 
    <ul> 
      (list of links) 
    </ul> 
    <h3>...</h3>
    <p>...</p> 
    (etc.) 
  </div> <!-- end content --> 
  <div id="pics"> 
    <ul> 
      (list of images) 
    </ul> 
  </div> <!-- end of pics --> 
</div> <!-- end wrapper -->
Get your html up and valid. Then we can have some fun making it pretty.

cheers,

gary

[/]

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

jeanboucher
jeanboucher's picture
Offline
Regular
Last seen: 5 years 16 weeks ago
Timezone: GMT-4
Joined: 2005-05-08
Posts: 32
Points: 9

New to CSS - where do I start ?

How about buying a very good book about CSS.
Here is my recommendation:
101 Essential Tips, Tricks & Hacks.
I have it & I love it.

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

Validator

Thanks a million everyone.

I have to go off to work now and so I will not be able to digest all of this properly until later, but it looks good and I very much appreciate your help and comments.

One thing I don't understand is that I personaly did not write any of the code, 'Dreamweaver' did, so why is it writing dodgy code for me ? I do understand the code and can write it, but would not have known about those errors mentioned.

I am awaiting delivery of a book on CSS by Meyer ( I think that was his name)

Thanks again.

Ray

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New to CSS - where do I start ?

Please do not get embroiled in Dreamweaver at this stage, it doesn't write code you do. DW has the habit of turning out dodgy code and of luring the user into a false sense of security.

You have the opportunity to learn the not so difficult art of hand coding which will reap many benefits down the road and will find that your understanding of the structure of code and general advancement to be far quicker.

Use the DW as an editor if you must, but steer clear of it's many oh so helpful facilities such as preview modes and WYSIWYG modes they lead to grief.

Only ever check your work in that which will be ultimately rendering said work i/e a browser, preferably FF initially to confirm correct coding and then IE to see what adjustments need to be made.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

Validator errors

Hi everyone,

I have now spent some time looking at all of the great information that you have given me, and a few hours correcting the errors on around 100 pages on my site !

I am really grateful for your input. I still do not understand how on earth xhtml closing tags came to be mixed in with html tags.... ? Anyhow, all fixed now, and very interesting.

After I corrected the errors I put my index.html back through the validator, this time it only came up with 2 errors, and I don't understand. I have copied the report below, if anyone would care to comment I would be very interested to know what's going on as I don't know why it will not accept either the 'height' attribute or the 'bordercolor 'attribute ? I do use 'Transitional'.

Thanks again.

Ray

Line 46, column 26: there is no attribute "HEIGHT"

<table width="90%" height="100%" border="1" align="center" cellpadding="0" cells

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute.

Line 46, column 103: there is no attribute "BORDERCOLOR"

...ding="0" cellspacing="0" bordercolor="#000066">

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

New to CSS - where do I start ?

You're using deprecated elements - both of these things should be controlled via CSS eg:

<table class="blah"

and then

.blah {height: blah }

Verschwindende wrote:
  • CSS doesn't make pies

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

Durrrrhhhh

Hi Guru,

Being a complete CSS ignoramous at the moment (but working on it )I must apologise but I am afraid that I don't quite understand.... :roll:

As I 'think' I understand you, you are saying that 'height' and 'bordercolor' are deprecated. You quote CSS alternatives I presume, but if this is the case can I simply replace the deprecated terms with these CSS alternatives, in other words they can be legitimately mixed in with html ??

Be gentle with me, I'm a 'newbie' Crying

Ray

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

New to CSS - where do I start ?

You should be using CSS style sheets for styling your page elements.
The attributes mentioned are deprecated in favour of CSS styling properties.
When you ask whether these properties can be legitimately mixed with html, your right in once sense, yes you can mix style properties in the html as any element on a page can have in place of the deprecated attributes, i.e bgcolor, a style attribute which allows a number of CSS properties to be applied to that element in the manner of:

<body style="background: #000;">

In this way you apply CSS styles directly to an element, this is one of three ways you may apply styles and is the least flexible as it means that if you wanted those same styles on another element you would have to write them again. This also defeats one of the great benefits of stylesheets which is their ability to style pages site wide from an external stylesheet that has one set of rules which are applied to the element selected and will effect the same element on every page that has a link to that stylesheet.

This method of linking to a stylesheet is the most useful and usual method of styling pages as it has the greatest flexibility. the third method is to embed a set of styles in the head of each page these styles effect anything on that page and that page alone which means that you can for instance style all the paragraph tags using the one rule along these lines:

<style type="text/css">
p {font-size:12px; color:#000;}
</style>

Again this is limited to styling only the page in question and wont effect paragraphs on other pages.

If you have a look through The How To section here you can probably find more info or google on CSS rules .

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

vynsane
vynsane's picture
Offline
Regular
Last seen: 11 years 32 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

New to CSS - where do I start ?

i would also recommend the book

"designing CSS web pages" by christopher schmitt

http://www.amazon.com/exec/obidos/ASIN/0735712638/qid=1116292346/sr=2-1/ref=pd_bbs_b_2_1/102-6523943-3304108

that's what i used to start out with...

as for the error regarding your tables, you won't have to worry about that after the transition to CSS, as you probably will have lost your taste for tables as a layout device. but, should you use tables somewhere for their original intention, tabular data, you can use CSS style rules to make the table look the way you want it to. instead of

<table width="90%" height="100%"...>

you will just have

<table>

with directions on how the table should look in a separate CSS document like so

table {
width: 90%;
height: 100%;
more styling
more styling
etc.
}

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

jdl
Offline
Enthusiast
Last seen: 14 years 25 weeks ago
Joined: 2005-04-25
Posts: 54
Points: 0

New to CSS - where do I start ?

I too am a newbie at css and this is an EXCELLENT forum.
First up though you need to go and read about the basics by doing a search in google like"css beginner" there are many many MANY starting out tutorials. The very first one I took a look at to just understand what was going on was a site called the css zen garden and from there I found links.
Now I'm learning about basic layouts to do away with tables which thankfully for me is great because I've never actually used tables before- having previously just put things together in a WYSWYG program like dreamweaver.
I was told years ago to learn basic html but I got caught up in flash and actionscript so worked backwards from there and certainly there is never too much you can learn about accessibility and web standards.
Most sites suggest you use separate style sheets as opposed to including the styles in your html page except when you are importing a style for say one area of content.
So first you need to try starting with a blank page of text in your html and deciding on which doctype you will be using and the only way you can work that out is by reading up on doctypes. I'm trying to do everything in xhtml 1.0 strict.(I'm still not fully sure why hahah but I have a feeling it's better than transitional for cross browser and accessibility support) In that html basic text page make sure you add the all important link to your css page:
<link rel="stylesheet" type="text/css" href="callitwhatyouwant.css" title="default" />
I remember being too embarrassed to ask anyone about that!!
You can then just use dreamweaver or any notepad to create a .css file
which must have the correct syntax for the many attributes to choose from and practice from there.
READ READ READ
THEN you come in here and get help when you are stuck because there are some super css gurus about this forum who web building life would not be worth living without Tongue

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

Deprecated elements

HI,

Again everything you all say is great, and I am reading up quite a lot. It is going to take me a while to digest and test and get to a level where I can redesign my site in CSS however. In the meantime I want to get my html site as correct as possible.

If I replace those deprecated elements with what was suggested earlier will that get my page validated? If so, based upon the sample script I posted earlier with the deprecated elements inside, could you possible rewrite those scripts for me with the replacement css inside so that I get it right? I would be enormously grateful.

The thing is, once I get this out of the way I can then just get on and concentrate on learning CSS, which is where I want to go now, but I really must tidy things up on the html front first.

And yes, this is a great forum !

Thanks again.

Ray

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

New to CSS - where do I start ?

Quote:
If I replace those deprecated elements with what was suggested earlier will that get my page validated?

Yes. (See, we sometimes give straight answers!)

Quote:
If so, based upon the sample script I posted earlier with the deprecated elements inside, could you possible rewrite those scripts for me with the replacement css inside so that I get it right?

Yes. Next post will have it:

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

New to CSS - where do I start ?

First bit:

<body bgcolor="#FFCC66" onLoad="MM_preloadImages('img/Contact2.gif','img/yourhols2.gif','img/adyourprop2.gif','img/guarantees2.gif','img/about2.gif','img/links2.gif')">

in the CSS file:

body {
background-color: #fc6;
}

This is shorthand CSS notation, there's a post in the How To section (by me!) about it.

Leave the onload stuff in there.

<table width="90%" height="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000066">

This is exactly what vynsane said:

Quote:
instead of

<table width="90%" height="100%"...>

you will just have

<table>

with directions on how the table should look in a separate CSS document like so

table {
width: 90%;
height: 100%;
more styling
more styling
etc.
}

which in full is:

width="90%" height="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000066"

table {
width: 90%;
height: 100%;
border: 1px solid #006;
align: center;
padding: 0;
}

I don't know about the cellspacing bit though.

Verschwindende wrote:
  • CSS doesn't make pies

vynsane
vynsane's picture
Offline
Regular
Last seen: 11 years 32 weeks ago
Joined: 2005-05-15
Posts: 45
Points: 0

Re: Deprecated elements

salmonid wrote:
HI,

Again everything you all say is great, and I am reading up quite a lot. It is going to take me a while to digest and test and get to a level where I can redesign my site in CSS however. In the meantime I want to get my html site as correct as possible.

If I replace those deprecated elements with what was suggested earlier will that get my page validated? If so, based upon the sample script I posted earlier with the deprecated elements inside, could you possible rewrite those scripts for me with the replacement css inside so that I get it right? I would be enormously grateful.

i wouldn't go changing those two things just to get it to validate right now. if you do, to get the document to validate, and still look the way it does now, you NEED to use css... you can't have one without the other, because of the properties you are giving the table. so, it will validate without those html styling properties, but the end resulting page will not look like it does now. the best thing to do is copy your index.html page, name it index2.html, and delete those html styling properties that don't validate. take a look at the resulting page without those properties, then check to see if it validates now (it should.) then use the css properties that thepineapplehead put forth, either in the <head></head> tags thusly

<head>
<title></title>
<style type="text/css">
table {
width: 90%;
height: 100%;
border: 1px solid #006;
align: center;
padding: 0;
}
</style>
</head>
<body>

and so forth... although, i would strongly recommend using external style sheets, thusly

<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/style.css" title="default" id="default">
</head>
<body>
etc...

and save the css style properties in a document called style.css inside a folder called "style." or whatever you want to call it. (just make sure you change it to whatever you decide to call it in the href="foldername/filename.css") you don't really even need to keep the file in a folder, i just like to keep my server tidy...

The technology is three months old. Only suckers buy out of date machines. You're not a sucker, are you sir? Because if you were I'd have to ask you to leave the store.

www.vynsane.com

salmonid
Offline
Regular
Last seen: 14 years 22 weeks ago
Joined: 2005-05-15
Posts: 16
Points: 0

Validation and css report back

Hi,

I pasted the code below into my page, and the result was a scrambled page layout. It them ocurred to me that I have a couple of tables on the page, how do you refer to one particular table as against another, perhaps this was the problem?

<head>
<title></title>
<style type="text/css">
table {
width: 90%;
height: 100%;
border: 1px solid #006;
align: center;
padding: 0;
}
</style>
</head>
<body>

I also deleted the 'height' attributes and the 'bordercolor' attribute, put the page through the validator and it was accepted. Deleting the 'Height' attributes did not seem to affect anything, however I had to put my bordercolor back in because I need it. So as it stands my page will have to remain unvalidated until I manage to change over to css.

Where can I find the most informative article on 'Doctypes', 'strict' and 'transitional' coding ?

Cheers.

Ray

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

New to CSS - where do I start ?

As for targeting one specific table, use an ID:

table#tableone

<table id="tableone">

Have a read of this:

IDs, Classes and Elements Explained

As for the Doctype, have a read of this:

http://www.alistapart.com/stories/doctype

(Sorry, I removed the link from my sig!)

Verschwindende wrote:
  • CSS doesn't make pies

femaledesigner
Offline
newbie
uruguay
Last seen: 11 years 8 weeks ago
uruguay
Joined: 2008-08-14
Posts: 2
Points: 0

help!

This comment has been moved here.