CODEWITHSUNDEEP
css
muhammad tayyab
muhammad tayyab

Reputation: 822

Are span tags only used for overwritting styles?

I've a question in mind about span tags. I have written styles with classes and ids for my web elements. I'm looking to overwrite/change formatting of specific web element where class style is already applied, but purpose here is to only change individual part of the element. At this position using span tags are good I think.

Maybe I'm wrong. Because I don't work on HTML/CSS too much. Is it a good practice to use span tags for overwriting styles of the individual elements or should I have to create compound div tags. This what a window prompts me in dreamweaver whenever I change the element where class/id style is already applied.

Upvotes: 1

Views: 464

Answers (5)

Craig Johnson
Craig Johnson

Reputation: 31

I use span tags for 'One Off' edits. For example I had a request by a department to add a RED "New" in front of an item added to their page, since this was a one time use, I just used a span tag. If it were to be used on all pages, I would have created a "subclass" either the way beautifulcoder recommended, or in the StyleSheet with:

.class1 
{
 color:#000;
}
.class1 .class2
{
 color:#333;
}

Then you can use the span class to assign the "class2" inside a div section to allow for inline and repeatable styling.

Upvotes: 2

Gerald Goshorn
Gerald Goshorn

Reputation: 65

no a span is an inline element and a div is a block level element. If you want to change multiple elements that have the same class then you can assign id names to each class to achieve this, although this may not be a good practice to begin with. If you had multiple elements with the class name of foo for example than you could assign a unique id and assign that too each element.

Upvotes: 0

Marcus Rommel
Marcus Rommel

Reputation: 1294

There is just one important difference between div and span.

A div is a block and span is an inline element.

A div should be used to wrap sections of your content - bigger parts - and span should be user to wrap small things like text, images etc.

For example:

a div should wrap a bigger block which contains smaller blocks of images, text or other things

To put a div inside a span is illegal. The rule is, that a block element is not allowed to be inside a inline element.

Upvotes: 1

beautifulcoder
beautifulcoder

Reputation: 11340

No! Markup should be kept as clean as possible. Children may inherit CSS properties so this might not work. My recommendation is to avoid !important alltogether and add class definitions at the end of each tag.

For example, say you want to override this:

<div id="name" class="somestyle"></div>

CSS makes this easy by simply:

<div is="name" class="somestyle mystyle"></div>

If the override needs to happen at the id level you can add your own:

#name { ... }

Make sure to add the override after the initial style. The browser reads styles from top to bottom.

Upvotes: 3

nisargjhaveri
nisargjhaveri

Reputation: 1509

span and div are two different tags created to behave differently. You cannot always replace one with another.

span is an inline tag, whereas div is a block element. Use of these purely depend on your requirements.

It is completely fine to overwrite inherited styles with span inside div

Further reading :P

Upvotes: 3

Related Questions