help with converting css styles from tag to tag

Question

Need some points on how to convert a styled tag to be used on another tag.

If my css has a particular style that works on a <div> tag, what do I have to do so it works on a span tag?

What if the css style works on any paragraph tag <p>, how can I get it to work on a div tag?

Answer 1

div, p, span{
color: blue;
}

This will get applied to all p,div and span tags

Answer 2

There isn't any particular rule of thumb. It depends on what element the style is currently applied to and what element it needs to be applied to. Most elements, unless you're using a reset CSS, will have default styles that will be combined with whatever styles you apply. For example, a <div> has a display of block. A <span> has a display of inline. A <p> has a display of block and margin-top and margin-bottom set. You can use Firebug in Firefox to see the styles that are applied to an element by default. Different browsers have different default CSS rules.

Answer 3

The difference is that p and span are displayed as inline elements (take up as only as much space as they need) and divs are displayed as block elements (takes up the available width). Luckily, you can change this behavior with css:

p.className, span.className {
    margin: 0;
    padding: 0;
    display: block;
}

Answer 4

Could you provide some more details on the exact type of styles you're using? The simple answer is that you just apply the style to both tags using a class:

<div class="someClass">contents of div here</div>
<span class="someClass">contents of span here</span>

or by just declaring the style under the tags:

div, span, p {
    font-weight: bold;
}

But, there are problems. To use your example, div is a block element and span is an inline element, so some positioning-related styles, like float, can't work for both. And if you're using IDs instead of classes, you won't be able to reuse at all, because an ID can only be attached to one element.

Answer 5

You can apply the same class to each tag or you can use muliple tags in your selector:

div,p,span {/*your styles*/ will apply to div's, p's and span's

Answer 6

div, p {  /* adds styles for both the tags */
    color: red;
}

Answer 7

Creating CSS like so:

.mystyle
{
/* style info */
}

Means it can be used like so:

<span class="mystyle">stuff styled using the CSS above</span>
<p class="mystyle">more stuff like my CSS</p>