CSS to style one line of text - css

Question

I have a single line of text that looks like this:
GIVE US A CALL AT ###.###.###
I want the phone number to be significantly bigger than the text and I want it all bottom aligned within the div.
I can't seem to get this to work... what I am missing?
Current HTML:
<div class="accessSlogan">
<div class="access-slogan-text">GIVE US A CALL AT </div>
<div class="access-slogan-number">###.###.###</div>
</div>
Current CSS:
.accessSlogan{
position: relative;
float: right;
display: inline;
}
.access-slogan-text {
display:inline;
font-size: 1.2em;
line-height: 2em;
padding-right: 6px;
vertical-align: text-bottom;
}
.access-slogan-number{
position: relative;
float: right;
display:inline;
font-size: 1.8em;
line-height: 2em;
vertical-align: text-bottom;
}

Answer 1

Use the <strong> tag and style accordingly.
<div class="accessSlogan">
GIVE US A CALL AT <strong>###.###.###</strong>
</div>
CSS:
.accessSlogan{
float: right;
}
.accessSlogan strong {
font-size: 1.8em;
position:relative;
bottom:0.4em;
}
The point is to use the existing "semantic" HTML to work with you and avoiding over-complicating things. The <strong> tag is what you mean, so use it:-)
The relative position of the strong text will need to be adjusted to align perfectly. 0.4em is a starting point (half of the extra height), but it depends upon the size of the accessSlogan text.

Answer 2

Both your markup and CSS seem over-complicated, although without knowing where this is to be positioned on a page it's hard to know if that's necessary or not.
At it's simplest this will achieve it:
.access-slogan {
float: right;
text-transform: uppercase;
}
.access-slogan .access-slogan-number {
font-size: 1.8em;
}
<p class="access-slogan">Give us a call at <span class="access-slogan-number>###.###.###</span></p>
Note that you can't apply float and display:inline to an element since float applies display:block along with it's own document flow rules. You'll also note I've uppercased the text in CSS rather than in the source HTML, since this is a display artefact.

Answer 3

I think there is a much more minimal set of CSS you can use for this. Is this demo here what you were after?

Answer 4

use <span> instead of <div>. It will solve your problem
<div>
call me at <span>0000-000</span>
</div>
or
<div>
<span>call me at</span><span>0000-000</span>
</div>