CODEWITHSUNDEEP
htmlcssxhtml
kubasub
kubasub

Reputation: 455

CSS: How to address specific tags

I'm just beginning to learn CSS (and XHTML) and I ran into a problem of assigning different properties to tags which have the same tag name.

For example: I have two h3 headers, but want to address them specifically using CSS because I want to make them different colours.

I believe this has something to do with naming the headers differently (i.e. h3.a), but trying this didnt work. Help would be appreciated!

Upvotes: 6

Views: 77741

Answers (9)

CLo
CLo

Reputation: 3730

Besides the tag name CSS can be applied by Class and ID. Note that it's best to make sure the case in your tags matches the case in the tags.

.myClass may not apply to class="myclass"

IDs:

<style>
#FirstHeading {color: red;}
#SecondHeader {color: blue;}
</style>

<h3 id="FirstHeading"></h3>
<h3 id="SecondHeader"></h3>

Classes: .redHeading {color: red;} .blueHeader {color: blue;} 

<h3 class="redHeading"></h3>
<h3 class="blueHeader"></h3>

The purpose of IDs are typically to point to one specific element in your page, classes are designed to work with multiple different elements

Classes can also be combined, so you don't need to load all the styles into one class.

<style>
.redHeading {color: red;}
.blueHeader {color: blue;}
.boldHeader {font-weight: bold;}
</style>

<h3 class="redHeading boldHeader"></h3>
<h3 class="blueHeader boldHeader"></h3>

Upvotes: 10

George Reith
George Reith

Reputation: 13476

In CSS by addressing a tag you address all copies of that tag unless you are more specific.

e.g.

a h3 {} would address all h3 tags within an a tag.

However if you want to style individual elements or want more freedom you should be using a class or an id.

An id can be used on one element and works like so:

<h3 id="header"></h3>

you can then use 

#header {
 // your css style here 
}

to style it.

Or you can use a class which can be used on multiple elements like so:

<h3 class="red"></h3>
<a class="red"></a>

you can then use 

.red {
  // your css style here
}

to style it.

Google provides some good video tutorials here: HTML, CSS and Javascript from the ground up

Upvotes: 2

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45731

A useful thing to keep in mind when naming classes is to avoid names that imply how the class is styled. Naming classes after their styles leaks design information into the HTML, and if you later do a redesign, you will either have class names that no longer match the design, or you will have to edit both the HTML and the CSS to keep it up to date.

A much better practice is to create classes with semantic meaning, such as: subtitle, navigationHeader etc. Additionally, it's a good practice to give multiple classes and thus "extend" objects instead of repeating yourself:

<h2 class="subtitle forum">Forum</h2>
<h2 class="subtitle group">Groups</h2>

.subtitle {
  font-size: 14px;
  font-weight: bold;
  color: green;
}

.subtitle.forum {
  color: blue;
}

.subtitle.group {
  color: red;
}

Upvotes: 2

swatkins
swatkins

Reputation: 13640

There are so many different ways to target selectors.

You can give them class names:

<h3 class="makeblue">This should be blue</h3>
<h3 class="makegreen">This should be green</h3>

// in you css
h3.makeblue { color: blue; }
h3.makegreen { color: green; }

You can use "advanced selectors":

<div class="container">
    <h3>This should be blue</h3>
    <p>
        <h3>This should be green</h3>
    </p>
</div>

// in your css
div.container > h3 { color: blue; }
div.container p h3 { color: green; }

have a look here: http://css.maxdesign.com.au/selectutorial/

Upvotes: 5

Joel Etherton
Joel Etherton

Reputation: 37543

You can use the class or a parent to define it. If you use a class it would be defined like:

h3.colorOne {
    color: #ff0000;
}

h3.colorTwo {
    color: #0000ff;
}

Then they would be used like:

<h3 class="colorOne">I'm red</h3>
<h3 class="colorTwo">I'm blue</h3>

Alternatively you can specify settings by a parent using an id field in a div of sorts:

#divOne h3 {
    color: #ff0000;
}

#divTwo h3 {
    color: #0000ff;
}

Which would be used like:

<div id="colorOne"><h3>I'm red</h3></div>
<div id="colorTwo"><h3>I'm blue</h3></div>

The usage all depends on the needs of your layout and the extensibility of your styles.

Upvotes: 0

piebie
piebie

Reputation: 2672

Make a class in CSS, like this:

h3.class1
{
color: blue;
}

Then just say:

<h3 class="class1"></h3>

Upvotes: 1

Seth
Seth

Reputation: 6260

This is where classes come in handy.

CSS

.myFirstClass { color:green; }
.mySecondClass { color:red; }

HTML

<h3 class="myFirstClass">Text</h3>
<h3 class="mySecondClass">Text</h3>

Upvotes: 3

Drew
Drew

Reputation: 6872

You can assign a class to each element and use CSS to target only that class. For example:

HTML:

<h3 class="green">Green heading for this one</h3>
<h3 class="red">Red heading for this.</h3>

CSS:

h3.green { color:green; }
h3.red { color:red; }

Upvotes: 10

Aaron
Aaron

Reputation: 5247

Add different class attributes to each h3, then address them in CSS using .className.

e.g:

HTML:

<h3 class="class1">One header</h3>
<h3 class="class2">Another header</h3>

CSS:

.class1 {
    color: #00f;
}
.class2 {
    color: #f00;
}

Upvotes: 3

Related Questions