Text shadow?

I've seen this code on a style sheet:

.item-title {
font-size: 20px;
font-family: Arial Narrow, Arial, Helvetica, sans-serif;
text-shadow: #999999 0px 2px 4px;
font-weight: bold
}

Now, presumably this what gives the text a shadow effect. But what's the difference between stuff that you put a '.' before it and stuff with '#' before it?

How do you label your titles in this manner?

Thanks.

As far as I know, that text-shadow only works in Safari, but I could be wrong, Firefox too maybe, but definitely not Satan's browser (IE)

anything with a # in front of it, and outside the curly brackets signifies a CSS ID. Inside the curley brackets signifies, usually, a hex color code.

. refers to a CSS CLASS, and is used instead of an ID when the item appears more than once on the same page.

I'm sure the above is confusing, but some things cannot be taught in 3 paragraphs...

Thanks.

What I'm wondering though is how you actual label the title. The only way I can see you label stuff is by making it a table. I can't make every title in a separate table. Well i can, but is that how it's done?

By the way i like your personal site and i was intrigued by the xhtml validation link at bottom. I noticed, however, that every big name site i entered, including yours, fails validation.

When you use a CLASS (.), you can give an element those properties by including 'class="blah"' inside it's opening tag. more than one element can have the same class.

When you use an ID (#), you can give an element those properties by including 'id="blah"' inside it's opening tag. however, only ONE element per page can have that particular ID...

for example:

Code: Select all

// CSS CODE //
. red {
color:#ff0000;
}

#green {
color:#00ff00;
}

// HTML CODE //

<h1 class="red">Hello</h1>
<h1 class="red">These are BOTH red</h1>

<h1 id="green">Hello</h1>
<h1 id="green">Only the ONE ABOVE is green</h1>

Thanks Ben, very well described.

Can you set the width of the tables?

By the way, thanks for interest in my projects but I'm starting to realise how much I can do now with PHP etc and how much is done for me already. I am still looking for a 3D animator though.

the width of any element can be easily set by:

width:100%;

or

width:100px;

etc...

Yeah, I don't have full control over the xhtml that WordPress writes... I think it's a bit funny it says valid xhtml down there... I'll look into it more. thanks for bringing it to my attention. And what do you mean by "big name site"?

Well when I got to the validation site I'd thought I'd see if the 'Big Boys' had no errors. So I checked out the likes of Apple and Konfabulator etc. Alarmingly, I thought, none of them passed. But I assume that if you get even one error then you've failed. And the test is ridiculously strict. I assume. Plus, there seems to be a lot of different opinions out there rather than hard rules one should abide by. Or maybe you guys' holding onto your own beliefs has got me confused.

I like that you've got this validation thing at bottom. I've noticed it on various sites. "Look at me, I've done it the best way!". I shall implement it when I've got to this standard, which might not be too long. Thanks to you guys positive 'behind-the-scenes' change is spreading through my site like a virus - a good virus.

I've now bunged a lot more into my style sheet (text aligns and table width etc). But here's my latest hurdle:

www.crewsfx.com/gallery.html

Any thoughts on why the 1st paragraph is shunted over to the left.

Cheers. And thanks Benbramz for the kind description of my site on the November contest, which I should win by the way cos it was my birthday on Saturday. I make web design look easy. Yeah, I'm quite happy with that. And flawless - well, what can I say?

Looks fine in IE, Opera, and Firefox. Am I missing the mistake you noticed?