Help me with CSS.

Discussion in 'Web Design and Development' started by waloshin, Oct 20, 2012.

  1. macrumors 68030

    waloshin

    Joined:
    Oct 9, 2008
    Location:
    In my world.
    #1
    What is the difference between doing this:

    .bg {

    and

    #bg {

    When using <div class="bg"> .... </div>
     
  2. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #2
    The .bg applies to that div, and #bg does not.

    . means class, and # means id.

    .bg == <anything class="bg" />
    #bg == <anything id="bg" />
     
  3. waloshin, Oct 20, 2012
    Last edited: Oct 20, 2012

    thread starter macrumors 68030

    waloshin

    Joined:
    Oct 9, 2008
    Location:
    In my world.
    #3
    Ok thanks and what really is the difference between class and id?

    And why doesn't this work:

    Html:

    <tr>
    <table class="table1">
    <th>Model</th>
    <th>Specs</th>
    <th>Description</th>
    <th>Power</th>
    <th>Operating System</th>
    <th>Price</th>
    </tr>
    </table>

    CSS:

    .table1 {
    border-width: 5px thin medium thick;
    font: bold 12pt;
    background-color:blue;
    }
     
  4. macrumors 65816

    Dolorian

    Joined:
    Apr 25, 2007
    #4
    Within an HTML document, you can apply a class to multiple elements whereas an id can only be applied once.

    When it comes to CSS, you can use a single rule to manipulate multiple objects that share the same class.

    For example, if you want all images with the class "half" to be 50% the width of it's container, you just write:

    .half { width: 50%; }

    This single rule would affect every image with the class "half", and this class can be used any number of times you want in a single page.

    An ID on the other hand is for more specific things, a single element on a page that is unique (say a container or section). It is also better reserved for jQuery/javascript plug ins. It is not for elements that repeat on a page.
     
  5. macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #5
    There are differences in the way they 'cascade'. Namely ID's take priority.

    e.g.
    Code:
    <style>
        #main {width: 800px;}
        .content {width: 500px;}
    </style>
    <div id="main" class="content"></div>
    
    Which of these take priority? All things equal, the last rule would count, i.e. width=500. However the width would actually come from #main and would be 800px wide.

    Traditionally you can only have 1 of any given id on a page. e.g. you cannot have two different elements with #main in this document. ID's are also used for on page linking or anchoring. <a href="#main"> when clicked would cause the browser to jump or scroll to the location of that element (if it is viewable). <a href="someotherpage.html#main"> would cause the browser to goto/load that page then go to the named id (if it is viewable).

    Generally when I'm working I ask myself, would there be ANY circumstances where the rules I'm writing would need to be displayed on multiple elements on the page at once (i.e. would I ever need these styles or blocks on the page more than one time?) I would use a .class. If I could say with certainty that this is a one off or structural block I would use an #ID.

    Another difference comes from javascript, where one could argue that an id is easier to get a hold of thanks to the function document.getElementById('main').
     
  6. macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #6
    A couple of issues, your html is malformed. The tags are in the wrong sequence.

    Also, for border declaration, it's usually
    Code:
    .table1 { 
    border:1px solid #000; 
    }
    or
    Code:
    .table1 {
    border-width:1px;
    border-style:solid;
    border-color:#000;
    }
     
  7. thread starter macrumors 68030

    waloshin

    Joined:
    Oct 9, 2008
    Location:
    In my world.
    #7
    I am going crazy with these tables!

    What is wrong with this HTML?


    Code:
    	<tr> <table class="table_title"> 
    		<th>Specs</th>
    		<th>Description</th>
    		<th>Power</th>
    		<th>Operating System</th>
    		<th>Price</th>
    	 </table> </tr> 
    	
    	<table class="row">
    		<td>Next Gen 1.0 (2012)</td>
    		<td>(1)Intel i8 processor 12 core @3.5 GHz, 16 GBs of Ram, 2 TBs of Hard drive</td>
    		<td>This is our Next Gen 1.0 Model, you can order the case in black or white</td>
    		<td>More powerful then your grandmas computer.</td>
    		<td>Waloshin Distro based on Linux 64 bit</td>
    		<td>$6000 including tax</td>
    	 <tr>
    This is what it looks like:

    [​IMG]

    This is what it needs to look like:

    [​IMG]

    The question is where did the lines goes on my table; and why is the title of the table not aligned with the table?

    I got the th to become bold,but can't figure out the rest.
     
  8. macrumors regular

    Joined:
    Aug 12, 2008
    Location:
    Cambridge, UK
    #8
    You need to revise the HTML for tables, what you've posted is invalid. Tables start and end with the <table> tag, then you list each row with the <tr> tags and inside those rows you list the columns with <td> tags (or <th> for the heading row).

    In your example you've got columns, inside a table, inside a row then columns inside a table with no closing <table> tag. Also your headers don't line up because you're not using the same number of columns in each row.

    Here's some commented code for you to look over to achieve the desired outcome:
    Code:
    <html>
    <head>
    <style type="text/css">
    table {background-color: #FFFFCC;}
    .row>td {border-bottom: 1px solid #333;}
    .table_title{color: #FFF;background-color: #666;}
    .price {color: red;}
    </style>
    </head>
    <body>
    <!-- table starts here -->
    <table cellpadding="5" cellspacing="0"> 
    	<tr class="table_title"> <!-- begin the heading row -->
    		<th>Model</th> <!-- Our 6 column headers are listed here-->
    		<th>Specs</th>
    		<th>Description</th>
    		<th>Power</th>
    		<th>Operating System</th>
    		<th>Price</th>
    	 </tr> <!-- end of heading row -->
    	<tr class="row"> <!-- begin the data rows -->
    		<!-- Our 6 data columns are listed below -->
    		<td><strong>Next Gen 1.0 (2012)</strong></td>
    		<td>(1)Intel i8 processor 12 core @3.5 GHz, 16 GBs of Ram, 2 TBs of Hard drive</td>
    		<td>This is our Next Gen 1.0 Model, you can order the case in black or white</td>
    		<td>More powerful then your grandmas computer.</td>
    		<td>Waloshin Distro based on Linux 64 bit</td>
    		<td><span class="price">$6000</span> including tax</td>
    	 </tr><!-- end the first data row here -->
    	 <!-- to add another data row we need to add <tr> tags and the 6 columns -->
    	 <tr class="row">
    	 	<td>1</td>
    	 	<td>2</td>
    	 	<td>3</td>
    	 	<td>4</td>
    	 	<td>5</td>
    	 	<td>6</td>
    	 </tr>
    </table> <!-- table ends here -->
    </body>
    The comments, everything between and including the <!-- -->, can be removed. Perhaps try extending the table with more data rows and changing the styles until you're happy with how HTML tables work.
     
  9. waloshin, Oct 21, 2012
    Last edited: Oct 21, 2012

    thread starter macrumors 68030

    waloshin

    Joined:
    Oct 9, 2008
    Location:
    In my world.
    #9
    [​IMG]

    Why the spacing in the header of the table?

    Figured it out: <table cellspacing="0">
     
  10. macrumors newbie

    Joined:
    Jan 1, 2013
    #10
    .bg

    and

    #bg


    . mean start the class in CSS coding and # mean start the id in CSS coding.
     

Share This Page