SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    div, style, id, class, span; which and when

    Slowly getting to grips with CSS, and how to manipulate the lay out.

    One of the things I have not been able to find much info about in books, tutorials or posts on the forum is what to use when.

    Are there any tutorials or threads/stickies/wikis about what is best to use when regarding
    span
    div
    style
    id
    class
    and whatever other forms of css manipulation

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,350
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    The SitePoint References are good for explaining the uses of various elements, both HTML and CSS.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    TechnoBear's link is a good one.

    Regarding spans and divs, they are just wrappers for content that allows you to target bits of content for styling. Divs are for blocks of content that have their own space, while spans are mostly for singling out bits of content within a block, like a word in a sentence.

    So if, for example, you want some content (like a heading, a form, a paragraph etc.) to form a sidebar, wrap them all in a div, give it a width and float it.

    If you want a word within a sentence to be a different color, you can wrap that word in a span and then apply styles to that span.

    ids and classes allow you to target elements (like divs and spans) with CSS. So, for example, that span used to make text a different color could have a class applied to it, such as class="highlight", and then in the style sheet you'd set a color for the class "highlight" (e.g. .highlight {color: red}) and then you could reuse that class throughout your site.

    The style attribute should be used rarely. It allows you to apply a style on the page itself rather than via the style sheet. It's not good to use, though, as you have to go back into the page to change the style, which gets really inefficient if you have used it in several places.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Thanks folks.
    I'll sum it up to see if I've got the right end of the stick.
    Span: essentially meant only for inline; avoid in css where possible.
    Style: see span.
    Div relates to span as class relates to id
    Id defines a manipulation of certain amount of text, class applies this manipulation to the amounts of text defined by it.

    Am I far off?
    I have been looking trough bits of Technobear's link (which info I somehow missed searthing Sitepoint ) and it helped understanding.
    What would be great, is to find some stylesheets with html-pages to see what it actually looks like in real life.

    Things that would seem more than obvious to somebody with plenty knowledge and experience, aren't necessarily obvious to newbies like me. For example: Ralph was kind enough to show me the trick for making text adjust to the screen without ever needing to use the horizontal scrollbar, thereby making it possible to read the entire page by simply scrolling up and down, regardless of screensize or zoom setting: the "wrap-trick". Somebody added the (I imagine it is) clever "width-limiter adivice.

    What I now need to find out, is how and where to stick something like a bit of wrap code for best result.
    I am getting close to understanding the individual bits, but am lacking "the big picture". What should I do to increase my insight in how to assemble the individual bits of css into a logical and efficient style sheet?

    I am an engineer by trade, and in my line of work there are usually many ways to make things happen. But although they all work (to some degree) I often look at things other people have "designed", and wonder if the looneys were running the asylum. Am I correct to assume a similar thing is true for webdesign?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by benbob View Post
    Div relates to span as class relates to id
    Id defines a manipulation of certain amount of text, class applies this manipulation to the amounts of text defined by it.
    Those aren't really accurate. The div/span relationship doesn't equate to class/id—they are really completely different things. (It's a bit like comparing male/female with dog/cat.)

    What would be great, is to find some stylesheets with html-pages to see what it actually looks like in real life.
    You are in luck, as there's about a billion web pages online that illustrate these in real life.

    But seriously, a great thing about the web is that you can look 'under the hood' and see the HTML and CSS at work. For example, right click on any part of a web page in a browser like Chrome and choose Inspect Element, and you instantly see the HTML under the hood and the CSS that is styling it.

    I am getting close to understanding the individual bits, but am lacking "the big picture". What should I do to increase my insight in how to assemble the individual bits of css into a logical and efficient style sheet?
    Honestly, I would recommend you sit down with a good book on HTML and CSS to get the big picture—which is essential, IMHO. In a few days you will have a solid understanding of the subject, rather than sifting around the web picking up random tidbits here and there.

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,350
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    If you use Firefox or Chrome, then I highly recommend installing the Web Developer Toolbar. (I've only ever used the FF version.) It has a CSS menu which, among other things will allow you to view the CSS for a page, or disable certain parts of the CSS, etc. The toolbar has many other useful features, too - I don't know how I'd work without it.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    If you use Firefox or Chrome, then I highly recommend installing the Web Developer Toolbar.
    Right, I shall avail myself of this tool post haste.
    Thanks for the tip.

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Those aren't really accurate. The div/span relationship doesn't equate to class/id—they are really completely different things. (It's a bit like comparing male/female with dog/cat.)...

    Back to my home work then.

    Quote Originally Posted by ralph.m View Post
    ...a great thing about the web is that you can look 'under the hood' and see the HTML and CSS at work. For example, right click on any part of a web page in a browser like Chrome and choose Inspect Element, and you instantly see the HTML under the hood and the CSS that is styling it...
    This certainly helps. To make it exactly what I need, is the option to look at the the whole stylesheet instead of the one element; is there such a tool?

    Quote Originally Posted by ralph.m View Post
    ...Honestly, I would recommend you sit down with a good book on HTML and CSS to get the big picture—which is essential, IMHO. In a few days you will have a solid understanding of the subject, rather than sifting around the web picking up random tidbits here and there.
    Alas, I have borrowed every book from my library on html, xhtml and css that I could lay my hands on (I'm a member of 3 library groups, covering about 20 libraries), plus have some bits myself. Unfortunately, none of them helped much to give me the insight as to how the whole sticks together. If I could find a book that does exactly that, I would buy/order it straight away unless the price went into the ridicuous i.e. 3 figures. What doesn't help, is that I have a bit of a funny learning pattern; if the format (irrespective of subject) suits me, I learn faster than anyone I know. If the format doesn't suit match, I often struggle. As a result, I often spend more time to find the right materials, than on the actual learninig.

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,350
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by benbob View Post
    To make it exactly what I need, is the option to look at the the whole stylesheet instead of the one element; is there such a tool?
    Yes - "View CSS", the last option on the CSS menu in the Web Developer Toolbar.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  10. #10
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    Yes - "View CSS", the last option on the CSS menu in the Web Developer Toolbar.
    Yeeeehaw, I shall be busy today.

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,350
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Have fun.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by benbob View Post
    none of them helped much to give me the insight as to how the whole sticks together.
    That should be covered in about the first paragraph or two of any decent book on the subject.

    Maybe you need to read them a little more carefully.


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
  •