CSS Style Help needed

I my website I am few font-sizes but with di开发者_运维技巧fferent colors and different paddings und margins.

for example

    h5 {
         color: #ED1B34;
         font-size: 1.1em;
         font-weight: bold;
         margin-bottom: 0.6em; 
}

i want to write such tags independent of margins and paddings.

what will be the best practice to declare padding and margins. As this

h5

Tag may have 10 different margin setting in the website.

Best practise is to define non-margin attributes for H5 generally:

h5 {
     color: #ED1B34;
     font-size: 1.1em;
     font-weight: bold;
}

And then provide a different wrapper each time you use h5, e.g.:

<div class="title-page">
  <h5>My Title</h5>
</div>

and

<div class="other-page">
  <h5>My Title 2</h5>
</div>

And set margins accordingly:

.title-page h5 {
     margin: 10px;
}
.other-page h5 {
     margin: 20px;
     padding-bottom: 5px;
}

Using css classes.

Ie.: setting these in external stylesheet (or wherever you need..)

.BigHeading {font-size:2em; margin:1em;}
.MediumHeading {font-size:1em; margin:0.5em;}

and then in html markup you use it like:

<h5 class="BigHeading">This is a big heading!</h5>

Although I don't know the structure of the website, you might want to take a look at the design again to make sure h5 elements will not differ so much.

You can use a class for each different margin setting.

Either use different h1, h2, h3, h4, h5, h6, etc with different settings, or split them into classes:

h5 {
  background: #ff0000; /* All h5 inherits this and any properties in here. */
}

h5.small_padding {
  padding: 5px;
}

h5.big_padding {
  padding: 20px;
}

<h5 class="small_padding">Title</h5>
<h5 class="big_padding">Blah</h5>

You should add classes or id to your DOM first, for example:

<h5 id="style1">title</h5>
<h5 class="style2">title</h5>

then use css to target these DOM:

h5#style1 { margin: 5px; }
h5.style2 { margin: 10px; }

note: # is for id, and . is for classes. for more information, pls visit this tutorial.

With the use of classes:

<h5 class="title">Foo</h5>
<h5 class="title margined">Bar<h5/>
<h5 class="brightTitle">Other</h5>

h5 {
    text-decoration: underline;
}
h5.title {
    color: Blue;
    font-weight: bold;
}
h5.margined {
    margin-bottom: 0.6em; 
}
h5.brightTitle {
    color:Red;
}

Foo would be blue, bold, and underlined.

Bar would be blue, bold, underlined, and have a margin.

Other would be red and underlined.

See it in action