Question About Css - Setting the style of titles.

mrdee

Feb 10 2008, 05:43 PM

Hello,
I would like to ask a question about setting a style for titles on my web site.
So far I have managed to set my titles with a different capital by doing this:

CODE

h1.title:first-letter {color: gold; font-size=xx-large; font-style: oblique; background: black};

Then my titles come out with a big golden italic capital in a black box, and I get there by doing

CODE

<h1 class="title">Blablablablabla</h1>

However, if I also want a certain background for the rest of my title, eg. a golden background or even a background image, how do I set that in the same "h1.title" setting?
The setting h1.title:first-letter only seems to affect the first letter.
Also, I want this to only affect my headers for titles, not just any header (h1).
Is there anyone who can help me out here?
Thanks in advance.

truefusion

Feb 10 2008, 05:58 PM

Remove :first-letter and modify a bit:

CODE

h1.title {
background: gold;
}

For background image:

CODE

h1.title {
background-image: url(path_to_image.ext);
}

Do note, however, that the golden background may cause some visual issues with the first letter of the H1 element with the title class.

mrdee

Feb 10 2008, 06:05 PM

QUOTE(truefusion @ Feb 10 2008, 05:58 PM)

Remove :first-letter and modify a bit:

CODE

h1.title {
background: gold;
}

For background image:

CODE

h1.title {
background-image: url(path_to_image.ext);
}

Do note, however, that the golden background may cause some visual issues with the first letter of the H1 element with the title class.

Thank you for your reply, truefusion.
However, doing it your way removes the special capital at the beginning of the title, which is exactly what I would like to keep.

rvalkass

Feb 10 2008, 06:53 PM

If I understand what you want, you just need two declarations to get it done.

CODE

/* Applies to all the other letters */
h1.title {
color: #0000FF;
font-size:0.1em;
background-color: #FF00FF;
};

/* Applies only to the first letter */
h1.title:first-letter {
color: gold;
font-size=xx-large;
font-style: oblique;
background: black
};

I see no reason why it can't be done that way.

kobra500

Feb 10 2008, 07:01 PM

Yes it shoudl work like that because the specific letter will overright the specifications set in the previous statement!

mrdee

Feb 10 2008, 08:39 PM

Thanks for your help.
That did the trick.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE