Mobile app version of vmapp.org
Login or Join
Frith620

: How to add custom CSS for Addthis and validate on W3C validator? 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

@Frith620

Posted in: #Addthis #Css #Javascript #W3cValidation

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?

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Frith620

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi995

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.

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme