0

I have Addthis code on the very bottom of the page HTML code, and then, after it I have CSS file with some custom decorations of Addthis widget.

Everything looks like this:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js%23pubid=bigjohn;%23async=1"></script>
<link media="all" rel="stylesheet" href="http://site.com/a.css" type="text/css">
</body></html>

The problem is that having CSS file in there hurts my W3C validation, as CSS file should be in the body of the HTML document, and W3C validator gives this error: Element link is missing required attribute property.

Is there any chance of doing it the other way so W3C validation goes fine?

Improve this question
3
  • Is your CSS currently working OK with it located as above, but is simply failing validation?
    – MrWhite
    Commented Apr 29, 2014 at 9:48
  • @w3d Yes, everything works fine, I just want it to be valid.
    – CamSpy
    Commented Apr 29, 2014 at 9:51
  • In that case you probably need to look at specificity (see my comment on bybe's answer below). As bybe says, your styles need to go in the HEAD section in order to pass validation.
    – MrWhite
    Commented Apr 29, 2014 at 10:00

1 Answer 1

Reset to default
1

Your problem is that CSS with <link> should be placed within <head> </head> and not within the tags <body> </body>. This should fix your validation problems.

e.g:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Your Page Title</title>
    <link media="all" rel="stylesheet" href="a.css" type="text/css">
</head>
<body>
    <article>
        <header>
            <h1>Example Header</h1>
            <span>Example of what a tagline looks like</span>
        </header>
        <div class="content">
            <p>This is dummy content of the article or page content.</p>
        </div>
        <footer>
            <p>Example of dummy footer content within article</p>
        </footer>
    </article>
<script src="//s7.addthis.com/js/300/addthis_widget.js%23pubid=bigjohn;%23async=1"></script>
</body>

CSS files have and always should be loaded in <head>. If you want to use styling outside of the head then you use inline styling which looks something like <div style="background:#fff;"> </div> and this does not support loading of files i.e CSS. If your worried about load times then you can extract the contents of the CSS file and place it into your site CSS so that way your not loading multiple files. See John's Answer on Ideas to improve website loading speed? on Pro Webmasters.

Improve this answer
4
  • unfortunately putting a CSS file within <head> </head> is not gonna work as CSS needs to go after the Addthis script, to override Addthis styles with my custom ones. I cannot use inline CSS as well since I have no way of getting inside of Addthis code and insert my inline style into it.
    – CamSpy
    Commented Apr 29, 2014 at 9:27
  • @CamSpy: The CSS does not necessarily need to be physically located after the script in order to override styles that the script might generate. You need to use specificity. ie. Make your custom styles more "specific".
    – MrWhite
    Commented Apr 29, 2014 at 9:37
  • @w3d thanks for that, silly me I couldn't think of this myself, it perfectly solves the issue! However, since you did not post this as an answer, but comment only, I cannot select it as the solution. Post it as an answer so i will do my part
    – CamSpy
    Commented Apr 29, 2014 at 10:09
  • @CamSpy CSS generally works in reserve order in terms of importance. So the first is less important as the last... So if you have rules that clash the last CSS will be treated as more important as the first CSS file unless a !important Is used. Put <link> after all your other CSS files and it'll work fine. Or use more specific styling in your main template as @w3d has suggested, but correct loading of order of CSS will resolve this issue too.. if using WP check your enqueues and load via functions or similar rather than editing just the header.php.
    – Simon Hayter
    Commented Apr 29, 2014 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.