How can i duplicate a CSS style?

Question

On the .master file i have...

<div id="menu">
    <ul>
        <li class="1"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
    </ul>
</div>
<div id="Div1">
    <ul>
       <li class="1"><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

and on the css file i have

#menu {
    width: 940px;
    height: 49px;
    margin: 0 auto;
    padding: 0;
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

So how can use the same style "#menu" both for the <div id="menu"> AND the <div id="Div1"> ?

Answer 1

You can target both elements:

#menu, #Div1 {

but the more clean way is probably to use a class to set the properties:

.default_menu { 

and giving that class to both elements:

<div id="menu" class="default_menu">
 ......
<div id="Div1" class="default_menu">

classes are independent from a specific element, and usually the better option. Use classes where possible, and IDs only in very, very specific cases of unique elements.

You can also assign multiple classes - as many as you want - to one element:

<div id="menu" class="default_menu menu_big">

if a property was set in both default_menu and menu_big, the setting from menu_big will override the first one.

Answer 2

Make use of classes like (you may change the name .menu to something which makes sense for the two div´s):

.menu {
    width: 940px;
    height: 49px;
    margin: 0 auto;
    padding: 0;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

And:

<div class="menu" id="menu">
    <ul>
        <li class="1"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
    </ul>
</div>
<div class="menu" id="Div1">
    <ul>
        <li class="1"><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

Answer 3

You have to use classes instead of ids for that reusable styles:

<div id="menu" class="menu">
    <ul>
        <li class="1"><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
    </ul>
</div>
<div id="Div1" class="menu">
    <ul>
        <li class="1"><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div>

And the css:

.menu {
    width: 940px;
    height: 49px;
    margin: 0 auto;
    padding: 0;
}

.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

Answer 4

Either use a class

<div class="menu">...</div>

And in your css

.menu {...}

OR target both divs

#menu, #Div1 {
    ....
}

Answer 5

You can try and target both divs div#menu, div#Div1 { css goes here }