Again: any reason to use CSS instead of HTML??

I will ask this question once again: is there any reason to use CSS-styling instead of HTML-attributes (in cases such as border around a graphic; see below), or it doesn't really matter, and one should probably only look for a size of the code (i.e. which method needs more lines/chars)??!


The HTML-style example code:

<a href="http://www.mypagerank.net"><img border="0" src="http://www.mypagerank.net/smerankcheck.php?site=tadejpersic.50webs.com&amp;s=style4" alt="Google PageRank by Scriptme" /></a>

Code (markup):

The CSS-style example code:

<a href="http://www.mypagerank.net"><img style="border: 0;" src="http://www.mypagerank.net/smerankcheck.php?site=tadejpersic.50webs.com&amp;s=style4" alt="Google PageRank by Scriptme" /></a>

Code (markup):

(note the style="border: 0; CSS-styling applied to IMG element instead of border="0" HTML-attribute in the two examples above; I edited the post afterwards and moved them to the beginning of the code so that it's visible without horizontal scrolling)


I remembered to ask this question again when I was editing the Mypagerank badge's code yesterday!! While originally I asked this in Any reason to rather use CSS and not HTML... thread, but back then folks didn't understand my question correctly.


tayiper

 

border doesnt need to be in the tag on css, other than thar, nope i dont think so

 

If you're using CSS elsewhere, then the best thing would probably be to use CSS for consistency's sake. Otherwise, meh.

 

BOTH are bad practice. I would even go so far as to use the /b-tard term "/FAIL/ at intarweb" on that one.

Why both? Because you have your presentation in your HTML. You should have that in an EXTERNAL style sheet - and since 99.9% of the time you don't want images to have a border anyways, you could declare it ONCE

img {
border:none;
}

and hit all your images in one call.

Inlining ANY presentation these days usually just makes bigger bloated code. When we say just put it in CSS, we do NOT mean inline it on each and every element.

 

You don't use CSS instead of HTML, you use it in conjunction with HTML.

There are four layers to the front-end of the Web. Structure (HTML), content (what you read and see on the page), presentation (the layout and typographical presentation, or "how" you see what you read on the page), and behavior (client-side scripting and "events").

HTML is a structural document markup language, and should be used to define the content of your Web pages and the site as a whole. The content fits within the framework created by the HTML document, while CSS controls how that structure and content is presented to the user. Behavior can be added by scripting (and sometimes CSS can do this as well, such as with dropdown menus and image rollovers).

Be sure to keep the four separated in your pages as much as possible. With structure and content, it will be impossible to do so, so make the content fit the structure as much as possible (you can technically remove the content from the structure by using a database, but that's beyond the scope of this post) when coding your pages, then use a single external file to serve your stylesheet (CSS document) to the browser, and as few external script files as possible (I prefer a single library.js file myself) when using scripting in your pages.

If you use inline CSS or scripting (such as JavaScript or vbScript) in your HTML, you've got problems (from a maintainence point of view) since it will be much harder to make site-wide changes in the future.

Also make sure you use the bare minimum of HTML code possible for defining your document's structure. Don't wrap DIV tags around everything; instead, let the element you're using define the structure.

 

You know that I was actually already thinking about this; if you are interested please see How many external style sheets is too many? (in particular see this post of mine) thread ...


tayiper