8 Replies Latest reply: Mar 21, 2013 3:16 PM by Ben Pleysier RSS

    using class divs

    thefortunecookieguy Community Member

      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

        • 1. Re: using class divs
          Nancy O. CommunityMVP

          .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.

          • 2. Re: using class divs
            thefortunecookieguy Community Member

            nancy,

             

            i ready have the .blue, .red, etc...... for my quick order boxes, how does css know which goes with which?

             

            also in the html code above why do you use <p class= ....> what does this mean?

            • 3. Re: using class divs
              Nancy O. CommunityMVP

              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.

              • 4. Re: using class divs
                MurraySummers CommunityMVP

                <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...)

                • 5. Re: using class divs
                  mhollis55 Community Member

                  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.

                  • 6. Re: using class divs
                    Nancy O. CommunityMVP

                    Yes.  What Murray said.  Do that.

                     

                     

                    Nancy O.

                    • 7. Re: using class divs
                      polar_bare Community Member

                      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

                      • 8. Re: using class divs
                        Ben Pleysier CommunityMVP

                        Try

                        <div class="smallspecial blue">

                        <div class="smallspecial green">

                        etc....