<div style> v.s <div id>

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

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

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

or perhaps

<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="all:property; value:pairs;">
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 ;-)

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:

Use an ID when a style will occur once on multiple pages.
Use a class when a style will occur more than once on multiple pages.
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.
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. :rolleyes:

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!!!

mdoigny

CLASS is niet meer of minder krachtig dan ID. Beide hebben hun eigen functionaliteiten. ID is van toepassing op slechts één element ("geef mij je identiteitspapieren"), terwijl CLASS ("de schoolklas 6WB, naar voren komen!") een hele groep elementen aangeeft.

Next time i'll write in chinese! Didn't it occur to you that most forum users are not fluent in english? The answer to your question is in the bold text.

swatisharma

What kind of rude reply was this?? If you cannot give answers to somebody u have no right to belittle them!!! Even if most of forum users are not v conversant with english still the language of conversation here is english only and everybody uses this v language no matter how well they know the language!!!

swatisharma

Hi Ihave found out of one of the reasons why ID is more powerful than class. There is an extremely useful function in Javascript called getElementById() that, as you might guess, lets you get a handle on a page element by its id, and not by its class. This I felt is a notable difference between the two. If somebody knows any other reason I will be delighted to know!

mdoigny

The post in question was not about english or not, but about etiquette.
For instance by checking that your keyboard has no letters missing

Hw is ID more powerful than Class as u hv stated in yr reply?

Some people need to translate the page using online translators, and they don't work well with this sort of text.

And the translated text is:
A class is a group of elements. "Class of 69" containing more than one student.
It's mostly used for formatting, to give a consistent look to your pages (headings, definition lists, ... always in the same style. It's a very powerful way of ensuring that your whole site has the same layout.

An ID is a single element ("Show me your ID!"). Most people only have one ID.
What's important, is that a tag with an id (for instance<div id=aaa>) can contain other tags (with or without ID's), so the javascript command can apply to a whole page if you like: aaa.style.visibility='hidden'.
fyi, document.getElementById('aaa').... does not work with all explorer versions.

swatisharma

Allright from now on I will try to type in complete words. Thanks for your reply!!