CSS tag overlapping

[Kevlar]

Let's say I make a p.a1 tag and give it a red text color attribute. Then, I make a p.a2 tag and give it a bold style attribute. What will happen if I use both of those tags on a single line of text? Also, why is CSS called cascading style sheets?

[jkd]

You'll have red, bold text. The values inherit.

And about why it is called cascading stylesheets, straight from the specs:

[quote]
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification.
[/code]

[Kevlar]

Well, right now I am using CSS to define simple attributes for p and a tags. Is there anything special I need to know about CSS? Also, I am making a website on a free server. Are there any other languages I need to know (such as XML) before I start the actual web designing?

[boxer_1]

Originally posted by Kevlar
Well, right now I am using CSS to define simple attributes for p and a tags. Is there anything special I need to know about CSS? Also, I am making a website on a free server. Are there any other languages I need to know (such as XML) before I start the actual web designing?

If you want to study up on CSS specs. and usage, you can visit the World Wide Web Consortium's (http://www.w3.org/Style/CSS/) CSS section, following the links from there.

As to what other languages you should learn, well, that all depends on how far you want to go. XHTML would be a good starting point and you could learn some simple JavaScript as well. It's a process and you'll never stop learning as long as you keep designing ;).

[BrainJar]

I've got an article posted at http://www.brainjar.com/css/using/ which covers many of the rules governing how styles are applied to elements. You might find the examples and tips useful.

[Kevlar]

Also, I want to make my link change style onmouseover. How do I do this? onMouseover: color: red?

What about working with images? Also, how do I make the "title" thing appear with a custom bg and text style? And what about adding a "status" tag to appear at the bottom of the browser?

[mouse]

Originally posted by Kevlar
Also, I want to make my link change style onmouseover. How do I do this? onMouseover: color: red?

What about working with images? Also, how do I make the "title" thing appear with a custom bg and text style? And what about adding a "status" tag to appear at the bottom of the browser? a:hover{color:#00ff00; font-weight:bold} will apply bold and the color 00ff00 to a link on mouseover (hover)

[Kevlar]

body {background-color: #000000}
p.newsText {color: #c0c0c0; text-align: center; font-family: Tahoma; font-size: 15}
p.newsDate {color: #ffffff; text-align: center; font-family: Tahoma; font-size: 15; font-style: italic}
p.newsTitle {color: #fff000; text-align: center; font-family: Tahoma; font-size: 20; font-style: bold}

p.dotted {border-style: dotted}
p.dashed {border-style: dashed}
p.solid {border-style: solid}
p.double {border-style: double}
p.groove {border-style: groove}
p.ridge {border-style: ridge}
p.inset {border-style: inset}
p.outset {border-style: outset}

a.deflink {color: #000fff; active: #00ffff; font-family: Tahoma; font-size: 15; cursor: crosshair; a:link color: #ffffff}


I can't get deflink to work properly.

Nevermind, I found the problem:

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

Note: IE 4 and higher supports the anchor pseudo-class. NN 4.5 and Netscape 6 support the anchor pseudo-class only partially.

And this fixes it:

a.deflink {color: #000fff; active: #00ffff; font-family: Tahoma; font-size: 15; cursor: crosshair;}
a.deflink:a:link {color: #FF0000}
a.deflink:a:visited {color: #00FF00}
a.deflink:a:hover {color: #FF00FF}
a.deflink:a:active {color: #0000FF}

Now, what about my other questions?

[Roy Sinclair]

Now, what about my other questions?

What about working with images?

What do you want to know about images?

Also, how do I make the "title" thing appear with a custom bg and text style?

Use a custom tooltip javascript, there's dozens of them available so you can find one to suit yourself.

And what about adding a "status" tag to appear at the bottom of the browser?

Do you mean updating the status line of the browser?

[Kevlar]

Yes. Also, I've been having some problems with the SRC attribute. Never seems to work...

[Roy Sinclair]

To update the status line:

window.status = "New Text for the status line"

Used in a link it would be:

<a href="somewhere" onmouseover="window.status='Go somewhere';return true;" onmouseout="window.status='';return true;">Somewhere</a>

[SYP}{ER]

The thing about CSS is that you can only modify VISUAL elements. The src attribute isn't actually SEEN. The browser uses it to see where the image actually resides and sticks it in there. Same goes for the ALT attribute; it tells the browser what to show if an image is not found (only IE uses it like the TITLE attribute, NS and Moz don't).

For images, the only thing you can style on them are the basic block-element attributes, like border, margin, position, bgcolor, etc.

[Kevlar]

So SRC attributes in script tags and image tags are a no no?