3 replies [Last post]
mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 4 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Hello - Big smile

I am trying to learn the best way to use more than one style for a <h2> and <h3> tag. For example, on one web page I want the <h2> style to be one color and size but on another page I want it to be different. I am working with a few new web pages and style sheets that were created by someone else.

There is a global style sheet already in place so I am trying to figure out if I should try to add to it for these new pages that will have different styles for the <h2> and <h3> tags OR should I just place those styles within each page itself instead of the global stylesheet?

I have been researching the forums and Google for some guidance but have not found a clear solution yet.

Below is an example of the html and CSS. I added the .item, .photo, and .item-text styles to the global style sheet and it works fine but I need to know how to add the heading tags because it keeps defaulting to what is already in the style sheet.

<head>
<style type="text/css">
.item {
    border: none;
    margin: 1.2em 0;
    overflow: hidden:   
    }
 
.photo {
    float: left;
    width: 130px;       
    }
 
.item-text {
    overflow: hidden;   
 
    } 
	h3 {
	color: #629933;	
 
		}
	h2 {
	color: #525252;	
	font-size: 2.18em;
 
		}
  </style>
</head>
<body>
 
<div class="item">
    <p class="photo">
      <img src="images/imagename.png" width="102" height="81" />
    </p>
 
    <div class="item-text">
      <h3>TITLE</h3>
      <p>Content Goes Here.
       </p>
  </div>
  </div> 
 
</body>

Many thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9569
Points: 3632

Since the different h2

Since the different h2 presentations derive from the page, there are a couple or more ways to do things.

  1. Give the odd body elements an id token. You can have a global rules, and then rules that apply only to the odd pages. For example:
    <body> <!--all the 'normal' pages-->
    ...
    ===========================
    h1, h2, h3, h4, h5, h6 {
        color: black;
        }

    Then add tokens to the odd pages, for example each of the sales pages:
    <body id="sales">
    ...
    =========================
    h1, h2, h3, h4, h5, h6 {
        color: black;
        }
     
    /*then add the #sales rules to the stylesheet*/
    #sales h1, #sales h2, #sales h3, #sales h4, #sales h5, #sales h6 {
        color: blue;
        }
  2. For this next method, refer to my site, linked in the sig. In a nutshell, in the case of two selectors' differing rule-sets, the last set read will override the first. So I link to the subset that differs from the the global set. That subset imports the global, and thus overrides where there are differences.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 4 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-03
Posts: 24
Points: 32

Hi Gary Thanks so much for

Hi Gary Big smile Thanks so much for your help again. I tried the first solution you listed but for some reason I cannot get the color to show up on the title

Below is what was added to the global style sheet

.item {
    border: none;
    margin: 1.2em 0;
    overflow: hidden:   
    }
 
.photo {
    float: left;
    width: 130px;       
    }
 
.item-text {
    overflow: hidden;   
}
 
#sales h3 {
	color: #525252;	
	font-size: 2.18em;
}

Below is what I have in the html doc. I only updated the <body> tag.

<body id="sales">
 
<div class="item">
    <p class="photo">
      <img src="images/imagename.png" width="102" height="81" />
    </p>
 
    <div class="item-text">
      <h3>TITLE</h3>
      <p>Content Goes Here.
       </p>
  </div>
  </div> 
 
</body>

I am still looking at your second recommendation (looking at your website).

Thanks!!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 52 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9569
Points: 3632

I had no trouble with your

I had no trouble with your code. I did change the css h3 part a bit, to reflect the use of multiple alternative body id tokens:

      h3 {
          font-size: 2.18em;
          }
 
      #sales h3 {
          color: red;
          }
 
      #bean-counters h3 {
          color: blue;
          }

With no id on body, color is black, with id="sales", color is red, and with an id token of bean-counters, color is blue. So, look for a typo or something. (The validators will catch some errors that are seemingly invisible to the Mark I human eyeball.)

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.