Is there any reason to use CSS instead of HTML ??

[satyr]

For instance, consider a totally banal case of specifying the border (values 1 or 0) around an image?? I mean is it generally better to use CSS instead of HTML, or in such cases it doesn't matter, and one should probably only look for a size of the code (i.e. which method needs more lines/chars), at least if one is a minimalist like I am -- ...


So here is "CSS-style" example:

<img style="border:0; width:88px; height:31px" src="http://example.com/some-image.gif" alt="some-image.gif">

And an "HTML-style" example:

<img border="0" width= "88px" height="31px" src="http://example.com/some-image.gif" alt="some-image.gif">

P.S. -- Oh and btw., is there any "unwritten rule", saying which particular tag to use in which order; in CSS-style's case, which one is first, which one second etc.: style, src, or alt (and maybe we can include title one too), and in HTML-style's case, the appropriate order of the main/non-optional style and src ones (and again, we can possibly include alt and title ones), and an "inner" order of border, width, and height ones ??


satyr

[Mittineague]

From w3schools http://www.w3schools.com/tags/tag_img.asp

The "align", "border", "hspace", and "vspace" attributes of the image element were deprecated in HTML 4.01.

The "align", "border", "hspace", and "vspace" attributes of the image element are not supported in XHTML 1.0 Strict DTD.

This does not mean you can't use them. And it doesn't mean there aren't lots of pages out there using them now. It just depends on whether or not you want to try and follow standards, and whether or not you want to worry about cross-browser support (at some point in the future?). IMHO you should avoid putting any CSS in the mark-up at all. Usually it's much more maintainable in an external CSS file.

Of course, images may be the exception, as they have unique heights and widths.

[satyr]

Ahhhh I see now, they are deprecated (however, I use the XHTML 1.0 Transitional DTD, not a Strict one), anyway, thanks much "Mittineague" for a quick answer ...


satyr

[AutisticCuckoo]

Your HTML example is incorrect (dimensions in HTML attributes are always in pixels unless there's a '%' at the end, so it should be width="88" etc.).

The idea is to use external CSS as much as possible, thus separating the markup from the presentation. If you then want to change the styling of your site, you only have to change one style sheet instead of thousands of HTML files.

So,

<img id="some-image" src="http://example.com/some-image.gif" alt="Text equivalent">

External CSS:

img  {
  border:0;
}

#some-image {
  width:88px;
  height:31px;
}

[satyr]

Your HTML example is incorrect (dimensions in HTML attributes are always in pixels unless there's a '%' at the end, so it should be width="88" etc.).

Oh yes, you're right, I made a mistake when I copied it from the other example, thanks for reminding me !!


satyr