PDA

View Full Version : 2 text styles in one line


WotNow
08-11-2009, 02:10 PM
Hi! Does anyone know if its possible to have two different text styles in one line. This is what I tried and i thought it wouldn't probably work and it doesn't, lol.
HTML
<h1>E Quote - <h2>Please select the services you require:</h2></h1>


CSS
#Formcontainer h1 {
font:1.7em "Lucida Grande", Verdana, sans-serif;
color:#e70505;
margin:0;
padding:0 0 1em 0;
font-variant: small-caps;}

#Formcontainer h2 {
font:1em "Lucida Grande", Verdana, sans-serif;
color:#333;
margin:0;
padding:0 0 0 8em;}

I remember seeing the important attribute and wondered whether this would solve the problem?

DWcourse
08-11-2009, 03:40 PM
You can't nest heading or paragraph tags inside other heading or paragraph tags.

What you need to do is:

replace the h2 tag with a span tag
change the h2 style to a class style (.customStyle for example)
apply the class style to the span.

DWcourse
08-11-2009, 03:44 PM
BTW, you should use heading tags logically based upon their use in your page.

An h1 tag should be the most important headline on your page. You should have only one h1 tag per page.

h2 to h6 tags should be used as subheadings of decreasing importance. Use as many of them as make sense. You can think of the heading/subheadings as the outline structure of your page.

domedia
08-11-2009, 07:03 PM
'!important' can be used if you want to override any specificity that is higher than your current CSS rule.

I don't think it's needed here. DWCourse gives excellent recommendations on how web standards can help you out.

WotNow
08-12-2009, 02:09 AM
Thanks to both of you. I have followed your directions but unfortunately the h1 tag is overriding the text size of the span tag
HTML
<h1>E Quote <span class="select"> - Please select the services you require</span></h1>
CSS
#Formcontainer h1 {
font:1.7em "Lucida Grande", Verdana, sans-serif;
color:#e70505;
margin:0;
padding:0;
font-variant: small-caps;}

#Formcontainer .select {
font:.9em "Lucida Grande", Verdana, sans-serif;
font-variant: small-caps;
color:#6a7378;
margin:0;
padding:0;}

http://www.kimberleywebdesign.com.au/Services/E_Quote.html

edbr
08-12-2009, 02:24 AM
no it doesn't. change
.9 em for a smaller value and you will see
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Formcontainer h1 {
font:1.7em "Lucida Grande", Verdana, sans-serif;
color:#e70505;
margin:0;
padding:0;
font-variant: small-caps;}

#Formcontainer .select {
font:.3em ;
font-variant: small-caps;
color:#6a7378;
margin:0;
padding:0;}
}
-->
</style>
</head>

<body
>
<div id="Formcontainer"><h1>E Quote <span class="select"> - Please select the services you require</span></h1></div>
</body>
</html>

WotNow
08-12-2009, 02:39 AM
Thanks so much! Why would the h1 set at 1.7em and the span set at .9em look to be same size?

DWcourse
08-12-2009, 03:15 AM
Em is a relative value based upon the font size of the parent container.

In your case, assuming a browser default font size of 16 pixels, your h1 tag would be 16 x 1.7 = about 27 pixels. Your span tag (base upon the parent container, h1) would be 27 x .9 = about 25 pixels.

If your span was outside the h1 tag it would be 16 x .9 or about 14 pixels.

Corrosive
08-12-2009, 06:02 AM
<h1>Quote <span class="select"> - Please select the services you require</span></h1>


Are you absolutely sure that this should be h1? Is it the most important info on the page or the 'page title' if you like?