CODEWITHSUNDEEP
csstextfonts
Mayron
Mayron

Reputation: 345

How I can set a different font size for my text by css?

My css code is

#footer .right {
    font-weight: bold;
    color: #ffffff;
    margin: 0px auto;
    padding: 10px 0px 0px;
    float: right;
}

and the text is

<p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.<br />
         Powered By ScriptName</p>

I need to set :

text font size (12px) for "Copyright © 2012 SiteName. All Rights Reserved."

and text font size (11px) for "Powered By ScriptName"

It should be exactly look like that

enter image description here

How i can do that please ?

Update

Thanks everyone for your useful help :)

My Regards

Upvotes: 2

Views: 1114

Answers (4)

Michael Zaporozhets
Michael Zaporozhets

Reputation: 24566

In order to get your footer to look identical to the image you supplied some additional styling was necessary apart from the font sizing, however it was also necessary to wrap the second line in order to be able to reference it in the css. After doing so the <br /> was no longer necessary.

Here is the example

html:

<div id="footer">
    <p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.
         <span id="secondline">Powered By ScriptName<span>
   </p>
</div>​

css:

#footer {
background:#25B5EA;
    width: 421px;
    height: 46px;
    font-family:Verdana, Geneva, sans-serif; 
}
#footer .right {
    color: #ffffff;
    margin: 0px auto;
    padding: 7px 0px 0px;
    width: 330px;
    font-size: 12px;
    float: right;
    line-height: 16px;
}
#footer #secondline {
 font-size: 11px;   
}

​

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15609

Use two different paragraphs for each line. Give each one their own class. Apply their specific styles by targeting those classes.

Wrap them in a div and apply the common styles to it:

HTML

<div class="footerTxt">
    <p class="copyright">Copyright &copy; 2012 SiteName. All Rights Reserved.</p>
    <p class="poweredBy">Powered By ScriptName</p>
</div>

CSS

.footerTxt {
    font-weight: bold;
    color: #ffffff;
    margin: 0px auto;
    padding: 10px 0px 0px;
    float: right;
}

.copyright {
    font-size: 12px;
}

.poweredBy {
    font-size: 11px
}

Upvotes: 2

Connor
Connor

Reputation: 1034

Using a span would be the easiest. Like this...

<p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.<br />
     <span class="small">Powered By ScriptName</span></p>

And the css

#footer .right {
font-size: 12px;
}

.small {
font-size: 11px;
}

Upvotes: 3

grc
grc

Reputation: 23575

HTML:

<p class="right">Copyright &copy; 2012 SiteName. All Rights Reserved.<br />
<span>Powered By ScriptName</span></p>

CSS:

#footer .right {
    ...
    font-size: 12px;
}

#footer .right span {
    font-size: 11px;
}

Example: http://jsfiddle.net/4CpRk/

Upvotes: 1

Related Questions