Help me understand a pretty basic concept

Discussion in 'Programming General' started by 1994RANGERS, Nov 11, 2011.

Sign in to Post
Thread Tools

Thread Tools

  • Thread ID:
Help me understand a pretty basic concept
  1. Unread #1 - Nov 11, 2011 at 5:03 PM
  2. 1994RANGERS
    Joined:
    May 22, 2010
    Posts:
    532
    Referrals:
    0
    Sythe Gold:
    0

    1994RANGERS Forum Addict
    Banned

    Help me understand a pretty basic concept
    Im currently in a computer science class. So far we've learned html which is pretty basic and easy. We just started css. I missed a couple days so I don't really know what I'm doing.

    Im working on a project. Were making a pretty complex table.How would I make cells in the same row different colors with css?
    I know how to do it in html but with css its confusing me.
    Code:
    <html>
<head>
<style type="text/css">
body {background-color:black;}
body {color:white;}
body {font-family:"arial";}
table
{
width:100%;
}
td
{
background-color:green;
}

</style>
</head>



<table>
<tr>
<td><img src="http://buildingabrandonline.com/wp-content/uploads/2010/08/music-notes1.jpg" height="75" width="75"></img></td>
<td><img src="http://www.theinsidersband.com/files/SamAshLogo.jpg" height="75" width="75"></img></td>
<td><img src="http://www.bandsquare.com/blog/wp-content/uploads/Electric_Guitar.jpg" height="75" width=75"></img></td>
</tr>
</table>


</html>
    To clarify I'm trying to make the first td green. And the second td orange. And the third td blue. How would I do this? Whenever I do this is just automatically makes the whole row one color
     
    Share
  3. Unread #2 - Nov 11, 2011 at 5:47 PM
  4. xOneDown
    Joined:
    May 29, 2010
    Posts:
    871
    Referrals:
    1
    Sythe Gold:
    0

    xOneDown Apprentice

    Help me understand a pretty basic concept
    You could assign each td its own class or use inline styling.

    A (assigning a class or id):

    td.green {
    background-color: green;
    }

    td.orange {
    background-color: orange;
    }

    etc etc etc.

    OR

    B (inline styling):

    <td style="background-color: green;"></td>
    <td style="background-color: orange;"></td>

    If you need anymore help, let me know.
     
    Share
  5. Unread #3 - Nov 11, 2011 at 6:28 PM
  6. 1994RANGERS
    Joined:
    May 22, 2010
    Posts:
    532
    Referrals:
    0
    Sythe Gold:
    0

    1994RANGERS Forum Addict
    Banned

    Help me understand a pretty basic concept
    What do you mean assign a class or id?
     
    Share
  7. Unread #4 - Nov 11, 2011 at 7:24 PM
  8. wackywamba
    Joined:
    Jul 14, 2005
    Posts:
    1,358
    Referrals:
    0
    Sythe Gold:
    1

    wackywamba Guru

    Help me understand a pretty basic concept

    Change your <td> into <td class = "green">...</td>

    So now when you do

    Code:
    td.green {
     background-color: green;
}
    in your CSS, then that "class" will have a background color of green, compared to say <td class = "orange">...</td>

    Code:
    td.green {
     background-color: orange;
}

    edit: There really are quite a few ways of doing this, but for CSS this is the most organized.
     
    Share
  9. Unread #5 - Nov 19, 2011 at 2:31 PM
  10. sp for real
    Joined:
    Nov 17, 2011
    Posts:
    75
    Referrals:
    0
    Sythe Gold:
    0

    sp for real Member

    Help me understand a pretty basic concept
    CORRECT
     
    Share
< Happy Programming | Whats the difference >

Users viewing this thread
1 guest


 
 
Adblock breaks this site