AV1611 Posted November 1, 2007 Share Posted November 1, 2007 can you do this: a:link {color: #000000; text-decoration: none} a:active {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} but inline? <a href='#' style=?????> Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted November 1, 2007 Share Posted November 1, 2007 It isn't a good idea. Sure you can do it, but you will eventually get into problems with "specificity" (where one element specifies the order of other similar elements). But, your link order is wrong and WILL cause problems. When using the "pseudo elements" for a link (":link", ":visited", ":hover", ":active:), the correct order REQUIRED is - a:link, a:visited, a:hover, a:active (think of it as LVHA or LoVeHAte). So change your order to this: a:link {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} a:active {color: #000000; text-decoration: none} Rather than style within the markup tag level, you are better off designating all links "pseudo elements" for every specific "select" (tag element, ID element or Class element) in your css, like this: tag element select: a:link {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} a:active {color: #000000; text-decoration: none} ID element select: #footer a:link {color: #FFFFFF; text-decoration: underline} #footer a:visited {color: #FFFFFF; text-decoration: underline} #footer a:hover {color: #006699; text-decoration: underline} #footer a:active {color: #000000; text-decoration: underline} Class element select: .nav li a:link, .nav li a:visited {color: #800000; text-decoration: none} .nav li a:hover, .nav li a:active {color: #555555; text-decoration: none} A simple tutorial you should bookmark that is important for anyone using css is: http://css.maxdesign.com.au/selectutorial/selectors_pseudo_class.htm. This will easily explain about "selects" and the rules of order and syntax. Quote Link to comment Share on other sites More sharing options...
AV1611 Posted November 1, 2007 Author Share Posted November 1, 2007 Thank you. You said that it is possible, however. I only need this because I am trying to pull in some code as part of an include, and w3c doesn't allow me to introduce new css other than inline once the <body> is open. this small script is going to be used on a ton of sites, so inline would save a lot of work, otherwise I have to drop a class= then add that class to the css of each site I use the include on Back to the question: How would I do it inline? Thanks. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted November 2, 2007 Share Posted November 2, 2007 I don't think the inline will over-rule the specificity of the css. The "type" (tag), "class" or "id" selectors will still over-ride the markup level styling. default "type" selector, id= or class= takes precedent over tag designated "style=". So if you are dropping an include into a document with a css, even if it is out of the flow and not using a class or id, it will use the default css designated a tag. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted November 2, 2007 Share Posted November 2, 2007 Actually, the style attribute (inline styles) will override all other styles, i.e., those in the style element, in link element, and using the @import statement. I'm afraid that you cannot style all those pseudo classes using the style attribute. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted November 3, 2007 Share Posted November 3, 2007 So if you are dropping an include into a document with a css, even if it is out of the flow and not using a class or id, it will use the default css designated a tag. pseudo classes are a given. What I said was I believe he cannot override the default a element just using the style= attribute within a link tag. That would be like trying to use a span class to change the style of an a element. Remember, he is dropping his include into many websites, each with its own css (style inline, @import or external). Some of these will not even have just a basic "a {}" selector (I know I only use the 4 a pseudo classes). So even if he wants to just style the <a href=> tag it will default to the page css. Quote Link to comment Share on other sites More sharing options...
mainewoods Posted November 3, 2007 Share Posted November 3, 2007 <a href="??" style="color:red;">test</a> --the above will cause the link to always be 'red'. It will be red even in the 'visited' and 'hover' states. It will override for that link whatever you have set for your general link classes: a:link {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} a:active {color: #000000; text-decoration: none} --if I desired to have a different color for the :hover state, the inline 'color:red' above would block that. You cannot manipulate the ':hover' or any of the other psuedo classes with inline css, but inline css overrides all of them for the link in which it is used in. --inline css is the strongest and overrides id's which are the second strongest, and classes which are the third strongest, and html element assignments are last: a:link { color:blue; } /* this is the least strong and will be used last */ Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted November 3, 2007 Share Posted November 3, 2007 Interesting. While it makes "logical" sense in the usual specificity flow, I never expected using <a href="??" style="color:red;">test</a> would override all previously styled selects INCLUDING pseudo elements. While it isn't something I would do, or recommend doing, for general usage, for AV1611's purpose, it is perfect. Cool. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted November 4, 2007 Share Posted November 4, 2007 inline css is the strongest and overrides id's which are the second strongest, and classes which are the third strongest, and html element assignments are last There are also the differences between style declarations in stylesheets, those called in using @import, and those found in the style element! I never expected using <a href="??" style="color:red;">test</a> would override all previously styled selects INCLUDING pseudo elements. I just said this earlier! You are defining only a, which encompasses (and hence overrides) all (previously declared) pseudo classes for a. Quote Link to comment Share on other sites More sharing options...
mainewoods Posted November 4, 2007 Share Posted November 4, 2007 I don't know how much code you can insert, AV1611, but you may be able to do this inline: <style type="text/css"> #mylink:link {color: blue; } #mylink:active {color: orange; } #mylink:visited {color: purple; } #mylink:hover {color: red; } </style> <a href="???" id="mylink">link</a> if whatever you are doing allows you to paste in all that code, it will work. It will not validate because the style tag is supposed to be in the head section of the document but it will work on all browsers. There are also the differences between style declarations in stylesheets, those called in using @import, and those found in the style element! and there are a bunch of other rules having to do with the order of stuff in the style section, and also if you use child relationships: <style type="text/css"> #oneID #childID .childClass { color:red} </style> --that would have a strenght value of 210 for 2 id's and 1 class and no html selectors. However, the 'style=' tag has a strength value of 1000 and will override everything else as shown below: <div id="oneID"><div id="childID"><div class="childClass" style="color:green;"> This text will be green because the inline 'style=' tag overrides everything else! </div> </div> </div> Quote Link to comment Share on other sites More sharing options...
AV1611 Posted November 7, 2007 Author Share Posted November 7, 2007 //EDIT I guess the answer is I'm stuck, can't be done, I have to retrofit the .css for each site to provide this as a generic include to multiple sites if I am going to remain w3c compliant. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted November 7, 2007 Share Posted November 7, 2007 Actually, I just wondered. Maybe you can include a php "preg_replace" expression in your includes file to replace all instances of a:link, a:visited, a:hover and a:active. This wouldn't insert the link changes in your body, it would replace instances of the link tags with yours. As the guys in the regex with php thread They can advise you on how to create the expression. This would save you days. Quote Link to comment Share on other sites More sharing options...
AV1611 Posted November 19, 2007 Author Share Posted November 19, 2007 I don't think that would help as I am trying to be w3c for the site. Dunno why I bother sometimes, cause w3c doesn't mean it will work on IE7 of course, as m$ uses whatever arbitrary flipping standard they feel like using... GRRRRR! Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted November 19, 2007 Share Posted November 19, 2007 Dunno why I bother sometimes LOL, we ALL feel your pain. But, don't punch the screen, yet. I know there are a few others here, like me, who can NEVER accept defeat ... THERE IS ALWAYS A WAY! First, using a regular expression has nothing to do with standards or css or even where the tags are located (inline or otherwise). It simply replaces any instance of the element specified with the new elements you specify in the regex. Particularly what I was suggesting was using a "Preg_replace". This will scan the document and simply replace any instance of a:link{}, a:visited{}, a:hover{} and a:active{} with a:link {color: #000000; text-decoration: none} a:active {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} before displaying the browser side html ... powerful stuff, preg. I assume you are doing a "PHP includes" which means your client pages are php. You can simply include the Preg_replace code within your includes file. It can't hurt to ask the mavens at the Regex with PHP, thread Quote Link to comment Share on other sites More sharing options...
mainewoods Posted November 19, 2007 Share Posted November 19, 2007 I've dissected google gadgets before and found out that when you place a google gadget into a web page, it calls a javascript file which does a bunch of document.write's. Those document.write's start out by writing out a style /style section with the classes that are going to be used by the code to follow. That means that the code produced by the gadget writes a style /style section within the body section and is therefore non w3c compliant except that it's written out by javascript and would not be checked by the validator! Since the google gadgets write out the style /style within the body section, it can't be all that bad and I can vouch for having tested it on all major browsers and it works. If you still wanted it to validate, you could use googles trick: insert at the very start of your document body: <script type="text/javascript"> document.write('<style type="text/css">'); document.write('a:hover { color:red; } '); document.write('</style>'); </script> Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted November 22, 2007 Share Posted November 22, 2007 can you do this: a:link {color: #000000; text-decoration: none} a:active {color: #000000; text-decoration: none} a:visited {color: #000000; text-decoration: none} a:hover {color: #ff0000; text-decoration: none} but inline? <a href='#' style=?????> Do it like this: <a href="#" style="color:#000000;text-decoration:none" onmouseover='this.style.color="#ff0000"; return true' onmouseout='this.style.color="#000000"; return true'>Test Link</a> And that is how you do a basic inline css/dom event javascript for a link. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.