This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to write a:hover in inline CSS?
Using CSS, I want to define a link's style. However, I want to do it in document, instead of defining it as part of the header. Is it possible to define it (including a:hovor, a:visited, etc).
I'm using the tag, and I would like to be able to do
<a style="a:hovor:color:#ffffff"><!-- ... --></a>
or something like that. I'm pretty sure that doesn't work. So how would define that, or can you even?
No, you can't.
Please, if it is possible, refrain from inline styles. They are bad practice.
If you really need to do this inline without stylesheets, you can solve this with javascript:
<a onmouseover="window.oldlinkcolor=this.style.color;this.style.color='#ffffff';" onmouseout="this.style.color=window.oldlinkcolor;">...</a>
Though, using onmouseover and onmouseout statically like that is also bad practice, but it will solve your issue cross browser.
You can always apply a CSS style on Mouseover with Javascript/jQuery. With that said, you should really avoid inline styles. Why can't you use a Stylesheet?
I'd prefer to give it a class and then define it in a stylesheet, but it's possible with JS/jQuery.
http://jsfiddle.net/Sxpkp/
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Should global css styles be set on the html element or the body element?
There's some really interesting discussion about applying CSS to <html> and <body> in order to get some cool effects — like two background images, one transparent (but CSS3 may render that useless).
However, for the standard cases, which element is most appropriate to use for appling page-wide CSS to?
Perhaps there's even some CSS properties that are better suited to one selector over the other? Thus, split among the two?
(This concerns things like cross-browser compatibility, as well as proper semantics according to spec.)
And we can also bring the wildcard * { } selector into this discussion.
Following Verandaguy's answer, http://www.w3.org/Style/Examples/011/firstcss.en.html applies the style to the body. It doesn't say why, but, that's what it says.
I believe that the W3C recommends that you apply any page-wide styles to the <body> element.
For creating a site with several pages it is best to use the CSS as an external linked page. That way each page can have access to it. But for a single page to page, it would be a "cool effect" on some browsers. But in the same effect other computers might see those effects in a different and less rendered method. Stick with uses the CSS mostly as an external link, and use style tags only as needed, or leave a note on the page of how and what browser they are supposed to view it on.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I have this code :
<div class="main_parent">
<a href="www.google.it">
<img src="/path/image.jpg" alt="image" />
</a>
</div>
and I'd like to set the attribute text-decoration:none; to the link that contains an image.
So, somethings like :
.main_parent img < a
{
text-decoration:none;
}
but of course it doesnt works. How can I do it with CSS 2?
Simply put, you can't. CSS can only traverse the DOM downwards. If javascript/jQuery is an option for you, you could use that.
Nope, this is not possible.
Some smart people also wrote about this: http://css-tricks.com/7701-parent-selectors-in-css/
You read CSS selectors from left to right. So there is no real syntax for this right now.
I think this is not possible via CSS. You would have to use JavaScript and assign the style via DOM manipulation.
You can even do it with CSS3. There is no parent selector unfortunately.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS selector for “foo that contains bar”?
All the <p> on my site get margin-bottom of 20px.
I don't want to apply this margin-bottom to <p> which contain an <em> element.
Is it possible to this without classes or id's.
CSS3 can be used.
To apply style to all p not containing an em:
p:not(:has(em)) {
margin-bottom: 20px;
}
I'm afraid this isn't possible with pure CSS.
Unfortunately, there is no way to do this with pure css. See Is there a CSS parent selector?
You could use some jQuery though.
$('em').parent().css('marginBottom','0');
http://jsfiddle.net/jasongennaro/5pPGF/
The only way I could see doing this in pure CSS is with a parent-node selector. Unfortunately, such a thing does not exist in CSS2 or CSS3.
What you're describing is basically an "ascendent" selector, selecting some element based upon its descendents. This isn't possible using just CSS, you would have to also use JavaScript.
Pure CSS does not do that (yet) as far as I know, but you can achieve this by smart use of jQuery:
$(function() {
$("em").parent("p").addClass("nomargin")
})
Or something like that...
Your question is unclear. Pleae recheck your question. But you can set margins, paddings for global tags like
p{margin:0}
or
*{margin:0; padding:0 } for all elements then change it for exact divs, classes. In that case all other ones still will set to margin:0, padding:0
Using CSS it's easy to apply a custom color to a link when you hover over it using:
.myId:hover{
color:green;
}
But what about the style tag? It is possible to do something along the lines of:
<a style="*insert nifty markup here to change color on hover*" href="somewhere.html">text</a>
Or is changing the hover color only possible trough the first method (using only html/css, no javascript allowed).
You cannot and should not do this. Give it a class or id, and a stylesheet.
Nope, I don't think you can alter states or add selectors via the style tag.
AFAIK you can only use either the <style> tag in the <head> section, or an external stylesheet.
The first suggestion is the best. Inline styles are the most specific and can never be ovridden, also it's difficult to find them when editing. It's best to keep all CSS either in the head of an external stylsheet :) (imo)
This question already has answers here:
How can I write 'a:hover' in inline CSS?
(24 answers)
Closed 5 years ago.
I want to do something like this:
<li style="hover:background-color:#006db9;">
But it wont work. Is this possible to do in some way, or do I have to write the css in the head or external css-document?
It is not possible with inline styles, but the (in)famous onmouseover / onmouseout event handler can do the same thing.
<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor=''">
Caveat: CSS definitions with hyphens have to be translated to Javascript using camelCase, like (css)background-color = (javascript)backgroundColor
This is not possible using the style attribute. You'll have to use CSS, either in the document itself or in an external file.
li:hover { background-color:#006db9; }
If that's not an option then you'll have to resort to JavaScript.
AFAIK this can't be done inline without Javascript. You will have to put it into the head or external stylesheets as you already suggest.
A <style> tag in the body is also interpreted by all browsers I know but is not valid and therefore not recommendable.
AFAIK You can't use pseudo-classes (:hover, :active, etc) on inline css.
Instead of just having the <li>, you can nest it in an anchors tag <a href="#" class="hoverable"> and then put this styling at the top of the file or in an external CSS file:
a.hoverable:hover{background-color:#006db9}
Or you can just use Javascript to avoid using the anchor tag.
I'd recommend JQuery.