This is for a class project I have finished, but we can get bonus points for doing extras. I removed the underline in my hyperlink, and I was wondering if there was a way to put the underine back on a mouseover? I'm also not allowed to use CSS or anything other than HTML. I don't know if it is possible, but here is what I have:
<a href="http://www.tolkien.co.uk/index.html" style="text-decoration:none">J.R.R. Tolkien
This is the best I could come up with. What I will say though is that you are technically using CSS with the style, onmouseover, and onmouseout events, it is just doing so without the need of a CSS file because the style event is just making html understand it itself. The style event is then on the other two events, giving them the power to use CSS with only the html file.
J.R.R. Tolkien
You can't do this without Css, if you want to try it's :
a:hover{ text-decoration: underline;}
HTML has no mechanism to remove the underline from a link containing text.
The text-decoration: none syntax you are using is CSS. The style attribute takes the body of a CSS rule-set as its value.
The only ways to apply CSS dynamically based on if the mouse is pointing to something are with a separate stylesheet (where you can use selectors, including rulesets) or with JavaScript (where you can modify the CSS based on events).
Related
When I use external CSS for underlining the word "pro", I'm unable to do so, whereas when I use inline CSS in <span> tag, it works perfectly fine. I have been trying to debug this code since past 2 hours. I'm still unable to do so. Please reply as soon as possible.
The inline-style has higher specificity than the external CSS selector. That's why it always takes precedence in the code when both are used.
However, if you are using only the external CSS and your CSS not being applied, you need to check few things.
Whether your external CSS is correctly linked to your HTML page.
And if so Are you using the Selector correctly.
Thanks
You have to mark important in your external css file to apply any overlay css on your html
like if you are tring to apply background color for span tag from external css
your css must be like this
span{
background-color:#000 !important; /*EDIT: important to !important
}
Use !important css property between style rule property value and semicolon in the external style sheet to increase its priority like following :
Selector {property :property-value !important;}
I wrote a HTML/CSS snippet that is included in some 3-rd party website.But CSS rules of that website make my snippet look terrible. To keep the snippet's appearance I must use !important keyword, but it's horrible, I have to write this keyword for about 1000 times (besides such a code looks not very nice).I can also use inline CSS instead of external .css file, but it's not a solution too.So, how can I protect my css styles in some elegant way?
The suggestion to use a div with a unique ID is good. However, there is a chance that other rules in the host page's style sheet use !important. Those rules would override yours, even if you use a unique ID.
Short of using an external document in an iframe in the first place (which is not always possible), using !important is the only 100% safe way that I can see.
Your snippet should be included inside an iframe.
It's the usual way these "widgets for 3rd party sites" work.
If you use an iframe, CSS from the parent document can't affect your "HTML/CSS snippet".
You can try enclosing your snippet inside a DIV with a unique id.
Then on your CSS for that snippet's style, include the id selector of the DIV for the items in your stylesheet.
The only way I can think of is to make the selectors more specific in some way. For example,
LI { color: red; }
LI.class { color: blue; }
<li class="class">I will be blue</li>
but you're really at the mercy of the 'rest of the CSS' you don't have control over.
I think your best bet is to put ID's and unique classes on all yoru stuff and spec the heck out of it. This is not great either though becuase you might WANT some of the 'rest of the CSS' to apply.
If you can't go with the iframe method, you'll need to figure out what level of specificity the parent page declarations have and beat that with your style declarations, keeping in mind that they'll still apply if you don't clear them. Otherwise, bring on the "!important"s!!! You may want to look for a clear.css or something as well that does this for you, as many sites offer this.
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)
So instead doing it using css:
<style type="text/css">
a:visited {
color: red;
}
</style>
Could it be done using inline code. Something like this doesn't work:
<a href="http://google.com" style='a:visited:color:red'>Google.com</a>
You can't do this, the specification (CSS2 here) covers it briefly here:
Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.
:visited along with the others modifiers are all pseudo-classes, and there was never a standard syntax setup to do what you're trying. Honestly this is the first time I've ever seen it requested, so I don't think it'll be added to the specification anytime soon...sorry that answer sucks, but it is what it is :)
Just to add one motivation to achieve this inline style for the various a href states:
in some page it could appear text with link in one are where the background is different from the overall background.
The main CSS for the "a" gives them one color that is not good on that particular and singular area.
For this reason, to give the user the idea that the link is a link, you need to color that link differently from the others.
For me it worked to set some style="color: #5070BB;" inside the <a href=".." tag, but maybe that neither the a:visited nor the a:hover colors are good for that background and it would be useful to set them inline.
Yes, it is definitely a singular and lonely situation, but that is a real case.
Ciao!
Sure you can....
<a href="https://www.yahoo.com/" target="_blank"style="text-decoration: none; border-bottom: 1px solid pink;color:pink !important;">
some link
</a>
jfiddle
No, that's not how inline styles work. It is in the specification, however browsers don't seem to support it.
No. Pseduoclasses (e.g :first-child, :hover) are used as selectors based on behavior and relation to other DOM elements. Inline styles contain rules. Even if at some point browsers do support this, it'll feel weird.
As far as I know, it isn't supported ... but to add some clarification for the reason for wanting to do this, since it would definitely be the sub-optimal way to do it on a regular web page, the reason would be to use in HTML email, which, except for certain good email clients, does not support regular style sheets, so it's necessary to define all styles inline to ensure good support across email clients (Gmail and Outlook (ugh) come to mind.)
Of course, it's possible to use some other program that lets you import a stylesheet and automatically convert it to inline styles, which is much easier to manage (that's what I do), but you're still using inline styles in the end-analysis.
I have an external CSS file (I cannot change it at all) which I need to use in my HTML file, but I want the CSS to only affect a section of my HTML. (For example everything in <div id="externally_styled"></div>)
How is this possible, again, without changing the CSS file (and the CSS file contains also general styles that affect body tags etc)
You'd probably have to use an iframe with a page containing only the HTML you want styled and a reference to the stylesheet. This would mean the general styles wouldn't be applied to the containing page, but it sounds like that's what you want.
Any classes or style-declarations attached to a tag will override the declarations in the CSS-file.
Just add your own style-declaration to a tag:
<div style="<your own declarations>">
...
</div>
You can overwrite the general styles that you don't want to be applied to your HTML document. This may be a good idea if the CSS if not that extensive.
The way to overwrite an style is using the keyword important!.
e.g:
original stylesheet:
body {
color: #000000;
}
your stylesheet:
body {
color: #CCCCCC !important;
}
You can find more information here.
I'd guess any client side solution is going to be messy.
Can you use a server side solution where you suck in the external CSS file and append a class selector to the start of each rule? I'm sure this would be easy enough with regex.
One way that springs to mind is to have the "to-be styled" portion of your HTML exist in a completely separate file and then pull it in via an iframe that uses the CSS from the external file.
The only thing i can think of is to re-render the content from your DIV to an Iframe.
Either use classname of the class that you have created for your specific section or use proper parent child relationship css that will render only when it falls under the parent child relationship.
You can enforce style by using "!important" in your css codes.
take a look at this example.
http://www.craiglotter.co.za/2010/01/21/important-css-how-to-force-one-style-above-another/