3 replies [Last post]
mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 20 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: 20 min 7 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9054
Points: 3023

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

mdwebcat
mdwebcat's picture
Offline
Regular
Last seen: 2 years 20 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: 20 min 7 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9054
Points: 3023

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.