Applying CSS style to part of a paragraph

Below is the CSS file I'm currently using.

/* cssbb06.css: 08/16/03 (based on css05.css) To implement this CSS file, */
/* insert it into the head element of pages where it's needed. */
/* Add tr to the list below? Add span? Delete div? Delete hr? */
/* The rule below sets the default font to Arial and the size to 1 em. */

/* Note that Times New Roman must be in double quotes because of the white space. */

body, p, ul, ol, dir, menu, div, dt, dd, address, blockquote, pre, br, hr, form, table, dl, td, th, span
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
}

/* Note of Dec. 2002: Above used to be font-size: 1em, not 12pt */
/* I made this change to fix the occasional error when users have IE's Text Size set to other than Medium */
/* Should I change the other ".em" designations? */

/* cssbb05.css, comapred to 04, tests using Verdana 11 ahead of instead of 12-pt. Arial */

/* sansserif small Verdana 9 */
/* sansserif normal Verdana 11 (set above, not below) */
/* sansserif big Verdana 13 */
/* sansserif title Verdana 14 bold */
/* serif small TimesNR 10 */
/* serif normal TimesNR 12 */
/* serif big TimesNR 13 */
/* serif title TimesNR 14 bold */


.sansserifsmall
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
}

.sansserifbig
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13pt;
}

.sansseriftitle
{
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14pt;
}

.serifsmall
{
font-family: "Times New Roman", serif;
font-size: 10pt;
}

.serifnormal
{
font-family: "Times New Roman", serif;
font-size: 12pt;
}

.serifbig
{
font-family: "Times New Roman", serif;
font-size: 13pt;
}

.seriftitle
{
font-weight: bold;
font-family: "Times New Roman", serif;
font-size: 13pt;
}

.CourierNew
{
font-family: "Courier New", Courier, serif;
font-size: 11pt;
}



.hoverbutton a
{
color: yellow;
background-color: blue;
text-decoration: none;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

.hoverbutton a:hover
{
color: yellow;
background-color: black;
text-decoration: none;
}

.hoverclaimsbutton a
{
color: aqua;
background-color: blue;
text-decoration: none;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

.hoverclaimsbutton a:hover
{
color: yellow;
background-color: black;
text-decoration: none;
}

.hoverhomebutton a
{
color: yellow;
background-color: black;
text-decoration: none;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
}

.hoverhomebutton a:hover
{
color: yellow;
background-color: navy;
text-decoration: none;
}

My question is this: Is it possible to apply a font change, perhaps from the default of Verdana 11pt to Times New Roman 10pt, within only part of a paragraph?

Thanks.

--johnnyg aattssiiggnn kc.rr.com
http://barelybad.com

Using the styles you have defined:


Hope this helps,
Jeroen

use DIV tag instead of P, it's better to do it as a habbit.
DIV without class inherits its class from the BODY

static07 - using DIV to mark up a paragraph is a bad habit. The entire purpose of CSS is to seperate visual design from structural markup. A paragraph should always use <P> just like a headline should always use <H1> ... <H5> not <DIV class="headline">.

This allows your HTML to be portable to multiple viewers, be it a standard web-browser or someone's PDA, or even someone surfing with netscape 2.0.

DIV's are for places where there is no standard markup that will work, or where no standard markup is appropriate, or, as a worst case, when a bug won't allow anything else to work.

- Erik

An element for which no style rule is defined will inherit its style from its parent. This parent can be an HTML body element, but just as well another element.
It's also perfectly possible to define a style for all divs (the original poster JohnnyGee defines a font-family for all div elements).
And all browsers assign default styles to elements (display: block for a div, for example).

As background reference, check: http://www.w3.org/TR/CSS2/cascade.html.

I fully agree with Erik: use <p> if you mean paragraph.

Hope this helps,
Jeroen

Sorry if I ranted there in my post. I just had a HUGE arguement with a development team -today- on this very issue - visual vs structural markup and why its better for the company to spend the money to have it done *right*.

Really makes me want to SCREAM.

Finally I sat down 2 management types, and a few of the HTML-monkekys and showed them http://www.csszengarden.com/ talk about your shock & awe. I think I may have finally made some headway on the argument. The best part was then loading that same website in Netscape2.02. Sure, its not PRETTY, but at least its READABLE. And not only is is READABLE, but it looks like it was designed for a text-only display. Sexy stuff, proper css. =)

- Erik

I knew my proffesors are full of crap, they said if I use <p> they would substract points from my works ... wankers

Static:

For the most part, the few people TEACHING web development are .... clueless. Not all of them, but most of them.

Over the last few years, I've been in posistions where I hire developers/html-monkies ... and a lot of them have degrees from schools teaching web development, and most of those applicants need serious reteaching.

Its going to be that way a long time because the technoogy advances at such a rate that a class syllabus is nearly invalid by the time the class is over.

By way of trying to get back in this discussion, should I change the exact elements I assign to the normal font? You'll find that list near the top of my first post.

I have always used this list, but not for any good reason. If it needs to be changed -- if changing it will increase my flexibility -- please tell me how and, more important, why.

Is there any combination that allows me easily, using Front Page 2000, to inject a new font inside a paragraph? Why are H1, H2, etc. preferred?

Thanks.

P.S. I already greatly appreciate this Dev Shed forum, and I'd like to become more useful, or at least less irritating. Is there any way in which I am posting that could be improved?

JohnnyGee: Sorry to hijack your thread :-)

H1,H2 etc are preferred because they are structural markup and describe the content. This means your pages can be displayed in everything from Netscape2.0 to IE6.0, PDA's, Screen Readers, and things that haven't even been invented yet.

The idea is all visual markup is done via CSS.

There is no simple way to arbitrarily subclass a paragraph outside of using <span class="myattribs">text you want different</span> within the paragraph.

Use span in this situation over DIV because SPAN is inline (does not create a block -- line returns -- around it). This is the type of case span and div are for: where there is no structurally correct markup.

However, why are you using a new font within the paragraph? If its a book title you can use <EM class='title'></EM> then define:

em.title { attributes; }

in your css. (EM means emphasis). Is it for a citation? There' s a <CITE> tag for that purpose.

So tell us, WHY do you need to change the font of text within a paragraph?

- Erik