SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Ljubljana, Slovenija, Europe
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

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

    And an "HTML-style" example:

    Code:
    <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
    Last edited by satyr; Sep 14, 2006 at 16:47. Reason: just fixed the BBCode, i.e. an "one letter" fix ...
    See my computing-related homepage: http://tadej-ivan.50webs.com/.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,270
    Mentioned
    197 Post(s)
    Tagged
    3 Thread(s)

    deprecated

    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Ljubljana, Slovenija, Europe
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by satyr; Sep 14, 2006 at 20:31. Reason: minor edit
    See my computing-related homepage: http://tadej-ivan.50webs.com/.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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,
    HTML Code:
    <img id="some-image" src="http://example.com/some-image.gif" alt="Text equivalent">
    External CSS:
    Code:
    img  {
      border:0;
    }
    
    #some-image {
      width:88px;
      height:31px;
    }
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2006
    Location
    Ljubljana, Slovenija, Europe
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Quote Originally Posted by 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.).
    Oh yes, you're right, I made a mistake when I copied it from the other example, thanks for reminding me !!


    satyr
    See my computing-related homepage: http://tadej-ivan.50webs.com/.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •