Jump to content
xisto Community
Sign in to follow this  
mrdee

Question About Css Setting the style of titles.

Recommended Posts

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:

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
<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.

Share this post


Link to post
Share on other sites

Remove :first-letter and modify a bit:

h1.title {background: gold;}
For background image:

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.

Share this post


Link to post
Share on other sites

Remove :first-letter and modify a bit:

h1.title {background: gold;}
For background image:

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.

Share this post


Link to post
Share on other sites

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

/* 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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.