Quote:
Originally Posted by JSWolf
Do not use line-height for anything. You do not need it and it's best to use the default line height. It's best to be as minimal as you can with the CSS and line-hight is one thing that doesn't need to be there. Also, display: block does nothing so it can go. Use top and bottom margins like this...
Code:
h3 {
margin-top: 1em;
margin-bottom: 1.5em;
text-align: center;
}
.line2 {
font-weight: bold;
text-align: center;
}
The only think you need to add to that CSS code is font-size if you want specific font sizes. Oh and the way your CSS is written is not as easy to read as the way I've written it. |
display: block actually has quite a useful purpose if used correctly. Be careful when you say things like that...maybe clarify with: "When using two different block level tags, display:block is redundant."
My example uses 'display: block' correctly in a minimalist fashion and achieves the OP's request quite well (
it is even in pretty CSS just for you!):
Code:
<h3>Chapter 1 <span>The Ending of the Beginning</span></h3>
/* (however you want to style it:) */
h3 {
font-size: .75em;
margin: 2em 0;
text-align: center;
font-weight: bold;
font-family: sans-serif
}
h3 span {
display: block;
font-size: 2em;
margin-top: 1em;
font-weight: normal;
font-family: serif;
font-variant: small-caps
}
Of course there are multiple ways to achieve the results and mine is just one example.