<div style> v.s <div id>

[Dark Dragon]

Hello..I'd appreciate it if someone could take a few seconds of their valuable time to answer my inquiry.

I am in the process of making a personal site using an old site of mine as a template.

As I was arranging columns I was wondering what type if <div> tags are better to use..such as

PHP Code:

<div id="left" style="left: 327px; top: 9px; width: 323px; height: 138px">


or perhaps

PHP Code:

<div class="centerCol" style="center: 78px; height: 455px; left: 208px; top: 190px; width: 523px">


Or does it even matter?


Thank You greatly

[mdoigny]

I'm not sure what your question is.
'id' is used for a single instance (mostly as an object in javascript), while 'class' is used for a group of objects, to give them all the same layout.

For instance

<h1>Normal heading with default formatting</h1>
<h1 class='a'>Heading with specific formatting</h1>
<strong>Normal emphasis</strong>
<strong class='a'>Emphasis with specific formatting</strong>

The style definition for a would be for instance another color, another font, ...

In your example, top and left are relative to the normal place where the div would have started.

[LJK]

Hi -
It always makes me wonder why some approach a
content-separate-from-style type of site as if they
were trying to re-create a tabular layout...not saying
that's what you're doing but many are.

Anyway, get to know block-level vs. inline tag behaviors
and specifically how to alter them with CSS. It seems
you're just starting out, since as mdoigny pointed out,
using top:value; left:value; etc. is of no use without a
position:relative; [or absolute or fixed, etc.] property.

Remember with positioning, it's easiest to use the 'natural'
flow as much as you possibly can. Floats / clearing is usually
pretty good - ditto for using % instead of px on certain major
elements for a more fluid layout. Relative posit. means rel. to
where it'd *normally* be. Absolute removes it altogether from
the flow and sets it according to browser window - not always
a great trait.

Using inline styles: <tag style="allroperty; valueairs;">
is okay when you want something to be unique from those
styles you've set elsewhere - in an internal or external style
sheet.
[Again, class="" is for many that will share the same styles,
id="" is for one unique instance of them.]

Have fun,
El

[Dark Dragon]

Thank You

So what I gather is that I should have stuck with the <div style> then.

I prefer to stick to CSS and HTML format so <div style> seems to be a better choice.

Actually I asked because I wanted clean code that also allows my site to be read on most browsers.

I am not good with hand-coding..it just isn't my area so I use templates from other sites I made.....so I am not sure what is meant by "content separate from style".

I guess I am just confused...thank you anyways.

[LJK]

Hi -
Okay, sorry about that...
Guess 'content sep. from style' means coding the html content as is - without inline styles or deprecated tags/attributes. Selecting tags that will best fit their contents and keeping all appearance-related coding in a separate .css file [external] that is linked to the .html page in the head section.

Someone else may help to clarify ;-)

El

[Kravvitz]

The best practice is to use external stylesheets.

Two big benefits:
browsers will cache them
you can separate style from content, which has a banefit that you can make major changes to your layout without modify the X/HTML.

[Robert Wellock]

It is far better to place the CSS in an external style sheet or block rather than inline; regarding ID it is a unique identifier and has slightly more power than a class.

Typically you'd use the id for a few main areas and class for the minor areas.

[toicontien]

To bring together what Robert Wellock and Kravvitz are saying:

1. Use an ID when a style will occur once on multiple pages.

2. Use a class when a style will occur more than once on multiple pages.

3. Define the IDs and classes in an external style sheet so the browser can cache the file, and that style information doesn't have to be downloaded with each page.

4. Use inline styles, i.e. <div style="foo: blah;">, when a style is unique to one tag on one page.

Also, IDs take precedence over classes in style sheets. Inline styles take precedence over any CSS declaration in any external style sheet or embedded style sheet.

[Dark Dragon]

So <div id> it is.


Ok. Then here is a question that contains even more stupidity than the first one.

How do I make an external CSS sheet and how do I apply it.

So far what I have been doing is making my index page then using it as a template for the rest of the pages..merely switching text and images as needed...which..come to think of it, of it may not be too helpful for what I plan to do.

Oh..please forgive my rudeness..thank you to all who have responded.

[toicontien]

External CSS files are plain text, just like HTML, except the file names end in .css. CSS files ONLY contain CSS rules. No HTML. Linking to CSS files is easy too. Its done using two methods, both of which get placed in the HEAD of your HTML document.

<link rel="stylesheet" type="text/css" media="screen" href="url/to/stylesheet.css">

The above method allows a style sheet to be downloaded by 4.0 and newer browsers. Netscape 4.x has a quirk where it ignores the above tag completely because of the media attribute. If you want a style sheet to be read by ALL 4.0 and newer browsers, use the above HTML tag and omit the media attribute and value.

The second method is using the @import rule.

<style type="text/css" media="screen">
<!--
@import "url/to/another/stylesheet.css";
-->
</style>

Browsers 5.0 and newer will download the style sheet using the @import method. Using a combination of LINK and @import style sheets, you can feed simple style sheets to 4.x browsers and more complex style sheets to 5+ browsers. Browsers 5.0 and newer will read the LINK style sheet and the @import style sheet. Advanced CSS 1.0 and 2.0 styles can be put in the @import style sheet, while commonly supported CSS 1.0 styles can be placed in the LINK stylesheet.

[Dark Dragon]

Umm..ok..but how do I make the stylesheet itself?
Do I just write out the CSS code I want and save it in notepad?

Sorry if this sounds silly to you but I never learned any of this in college nor did I ever get a clear picure of how to do it.

Once again I thank you for your efforts.

[Girevik]

That's what I usually do. Do a search web search on "CSS Tutorial" and you can find some good lessons what walk you through the basics.

[kiathau]

U can either write out in a notepad, or use some tools like dreamweaver, frontpage, cutehtml pro which provides u even better environment in writing your CSS definitions.

Kiat Hau
http://webidiot.blogspot.com, Let's build your web site!

[Kravvitz]

http://css-discuss.incutio.com/?page=CssEditors

[swatisharma]

Hi Robert Wellock! I know its a v late reaction but i m a new joiny to this forum nad I must say i hv solved many of my problems by just goin to the replies of the queries posted here. My question goes directly to u. Hw is ID more powerful than Class as u hv stated in yr reply? I hv wondered many times but hv found no reply till now. I would be highly delighted if I get a reply!!!