Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
Like Tree2Likes
  • 1 Post By tracknut
  • 1 Post By Old Pedant

Thread: First Question

  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Location
    Melbourne Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    First Question

    As i am trying to learn good habits from the start i am going ask which is the better proposition out of the follow few examples, i have looked at a few online videos and i am seeing variations in the info given. At the end of the day they all seem to work but it would be good to start in the best manner.

    Example One of how to start a css file All through the html page he only uses one class example (for the banner) But the rest done as shown below

    @charset "UTF-8";

    article, aside, footer, header, main, nav, section {
    display:block;
    }

    article, aside, footer, header, main, nav, section {
    pading: 0;
    margin: 0;
    }

    body {
    background-color:#777;
    width:960px;
    margin-left:auto;
    margin-right:auto;
    }

    etc ….



    Example Two Using Classes all the through the html file for reference in the css file


    <body class="body"> on the html file which is then used to style via .body on the css { example}

    .body {
    background-color:#777;
    width:960px;
    margin-left:auto;
    margin-right:auto;
    }

    .main {

    etc

    After this he goes onto add a class to nearly every thing, article, aside, footer, header, main, nav, section


    So i am wondering if the top example where most is done within the page tags is normally used or is it better practice to be adding a class to all the html page tags ( article, aside, footer, header, main, nav, section) as i construct a webpage.
    ~
    Sorry if this seems like a dumb question but i am just trying to learn some solid foundations for using html5 and css3

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,401
    Thanks
    11
    Thanked 297 Times in 296 Posts
    You should give preference to a style applied to all objects of that type, wherever possible, to set up some "global" style characteristics:

    div {border:1px solid black;background-color:white}

    Then on a case-by-case basis, you should create classes when you have a "type" of those things, that isn't to be styled the same. So while most of your divs are white with a black border, maybe there are a few important ones:

    div.important {border:1px solid red}

    With this method, you should not end up with a class tagged to every object on a web page.
    pistonbroke likes this.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,167
    Thanks
    80
    Thanked 4,560 Times in 4,524 Posts
    Note that never having your CSS depend on a class name or id is pretty silly: Surely you don't want ALL <div>s on your page to appear the same? Or <span>s or or or...

    So the right answer is to MIX the two (actually three...if you include id's) ways of specifying styles.

    TrackNut has the most of it, though I think in practice you will find most of your CSS somehow related to an id or a class.

    Remember, even if a given element doesn't have a class, it can still be selected by hierarchy.

    Example:
    Code:
    #navmenu ul li { font-size: small; color: red; }
    Perhaps none of the li's on your page have a class name, but any <li> that is in a <ul> that is part of <div id="navmenu"> will have special effects applied to it.
    pistonbroke likes this.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Aug 2014
    Location
    Melbourne Australia
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys, at this point i haven't even used the <div> tag for anything so i'll use this as a reference, as an example of the confusion i have the book i purchased mentions using an id only once when doing a html page, it gives preference to the use of classes, plus the video i watched seemed to use them for everything. Again thanks, please note there is a very good chance i will be asking more 'silly' questions in the near future. Cheers!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,167
    Thanks
    80
    Thanked 4,560 Times in 4,524 Posts
    It is true that you can only use a given id ONCE per page.

    And it is also possible that the base code of the page may use CSS for certain HTML tags (e.g., div { background-color: lime; } ).

    So if you are writing code that is designed to be used on many pages (presumably like that video you watched?), you pretty much NEED to use class names, only.

    But if you are writing a page from scratch and you *KNOW* you are only going to have one "navigation bar", you might well reasonably choose to use
    Code:
    <div id="navbar"> ... </div>
    and then use the style
    #navbar { 
        width: 100%;
        height: 30px;
        background-color: lightblue;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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