Skip navigation
Currently Being Moderated

using class divs

Mar 21, 2013 10:55 AM

on my hope page i have a few specials on the left hand side, right now all the specials have the same div (#wrapper .smallspecial .smallheader) therefore they have the same color, i am wanting to use different colors but want everything else to stay the same. how would i code this?  if my colors were blue, red, green, purple and brown what would the code and css need to look like?

 

url is coloredfortunecookies.com

 
Replies
  • Currently Being Moderated
    Mar 21, 2013 11:28 AM   in reply to thefortunecookieguy

    .blue {color:blue}

    .red {color:red}

    .green {color:green}

    .purple {color:purple}

    .brown {color:brown}

     

     

    <p class="blue">This is blue</p>

    <p class="red">This is red</p>

    etc...

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 11:42 AM   in reply to thefortunecookieguy

    Use whatever class name you wish.  If you're already using .blue for something else, change your class name to something more descriptive: .color_blue, .color_red, .color_purple.

     

    <p> is the default paragraph style.

    <p class=".color_blue"> gives your paragraph a blue_color style</p>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 11:47 AM   in reply to Nancy O.

    <p class="color_blue"> gives your paragraph a blue_color style</p>

     

    No leading "." on class assignments! (I know you know this, Nancy - just a typo...)

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 11:47 AM   in reply to thefortunecookieguy

    Anything in brackets "<>" has to do with something defined in HTML. So <p> stands for paragraph and it needs to be closed at the end of the paragraph with a closing tag: </p> When you're working in Dreamweaver within an open tag, Dreamweaver can help. All you need to do is type </ and the tag you are working on will fill in (works most of the time, sometimes Dreamweaver will close the wrong tag, so you have to know what you're closing.

     

    You can assign any class or ID to just about any tag. IDs can only occur once per web page, Classes may occur many times on a page.

     

    So, <p class="blue">This is blue</p> creates text that is blue, based on the pre-defined class in the style: .blue {color:blue}

     

    So if you have a separate stylesheet for the entire website, you create classes:

     

    .blue {color:blue}

    .red {color:red}

    .green {color:green}

    .purple {color:purple}

    .brown {color:brown}

     

    Here, Nancy has defined five classes that may be selected for either paragraps or for all text within a div.

     

    So if you want to create a div where all text is blue you could do this:

     

    <div class="blue">

    <p>all of this text is blue</p>

    <p>and this text is blue, too!</p>

    </div>

     

    This will create a rectangular area where all of the paragraphs in that area will have blue text.

     

    I think it's time for you to take a class on how to write HTML and how to use CSS to style it.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 11:48 AM   in reply to MurraySummers

    Yes.  What Murray said.  Do that.

     

     

    Nancy O.

     
    |
    Mark as:
  • Jim Carpenter
    547 posts
    Apr 6, 2006
    Currently Being Moderated
    Mar 21, 2013 1:03 PM   in reply to thefortunecookieguy

    All this is if you are wanting the text color to be different colors. Is that what you are trying to achive? If you mean background of the boxes, then it is another issue.

     

    Jim

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 21, 2013 3:16 PM   in reply to thefortunecookieguy

    Try

    <div class="smallspecial blue">

    <div class="smallspecial green">

    etc....

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points