0

I have several pages in my website and they all have the same div structure:

 <div id="page">
    <div id="header">
    <div id="logo">
    </div>
    <div id="title1">
    </div>
    <div id="title2">
    </div>
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
    </div>

However, each page has its name in the id, like this for page1:

<div id="name1_page">
<div id="name1_header">
Etc.

The same is true for page2, page3, etc.

I'd like to use one style sheet for all these pages.

I found this works for styling the div id's:

div[id*=page] {
    width: 900px;
    margin: 30px auto;
    background-color: #FFFFFF;
    }

How can I make it work for the styling of classes, a, p, ul, etc.? Such as:

 #title1 a
    .content
Priya
  • 1,359
  • 6
  • 21
  • 41
Stryker79
  • 1
  • 1
  • Possible duplicate of [wildcard \* in CSS for classes](http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes) – TheBakker May 26 '16 at 06:35

1 Answers1

1

You may use the class attribute on div element and can use class selector in your css to define styles for all elements with that class.

e.g. <div class="page"></div>

and your css might look

div.page
{
    width: 900px;
    margin: 30px auto;
    background-color: #FFFFFF;
}

for detail you may visit http://www.w3schools.com/cssref/sel_class.asp

mhsarosh
  • 308
  • 1
  • 7
  • For the div it works. But how to apply this to the following: #page a {}, .page {} – Stryker79 May 26 '16 at 07:51
  • i found the answer for this here: http://css.maxdesign.com.au/selectutorial/selectors_class.htm. #page a {} becomes div.page a{} and .page {} doesn't change – Stryker79 May 26 '16 at 08:14