Linking external style is not working - css

Question

I have been trying this in any possible way, I can not figure out what is wrong here.
Here is my code
http://jsbin.com/xeroborohe/edit?html,output
and this is how I link my css
<link rel='stylesheet" type="text/css" href="https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css" />
For some reasons the line that links to the Google drive stored style sheet is not working,. I ahve also tried to link the file locally on my drive..no luck
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
window.toggleDiv = function(divId) {
var ele = document.getElementById(divId);
var state=jQuery(ele).is(':visible');
jQuery(ele).toggle();
state=jQuery(ele).is(':visible');
localStorage.setItem( divId, state);
}
</script>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$(".collapsible").each(function(index) {
if (typeof($(this).attr('id'))!="undefined") {
id=$(this).attr('id');
var state = localStorage.getItem(id);
ele = document.getElementById(id);
if (state=="true") {
ele.style.display = 'block' ;}
else {
ele.style.display = 'none'; }
}
});
});
})(jQuery)
</script>
<link rel="stylesheet" type="text/css" href="https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css" />
<a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA==');" style="font-
size:13pt">Root</a><br>
<div class="collapsible" style="display:none " id="PktS/h+L5EeSqM/4hMH9JA==">
<a class="ConceptLevel2" href="javascript:toggleDiv('KlHtq+Xe60essn+0zs9E6g==');" style="font-
size:12pt">level 1</a><br>
<div class="collapsible" style="" id="KlHtq+Xe60essn+0zs9E6g==">
<div>Level 2</div>
<a class="ConceptLevel3" href="javascript:toggleDiv('EdMUp+28okWIWHVbvUaU1g==');" style="font-
size:11pt">Level 2</a><br>
<div class="collapsible" style="" id="EdMUp+28okWIWHVbvUaU1g==">
<a class="ConceptLevel4" href="javascript:toggleDiv('wIZCSCx/Xk2YShMAkF33Pg==');"
style="font-size:10pt">Level 3</a><br>
<div class="collapsible" style="" id="wIZCSCx/Xk2YShMAkF33Pg==">
<div>Level 4</div>
<a class="ConceptLevel5" href="javascript:toggleDiv('7GKbN5XRqkybT
+XsbHkyqw==');" style="font-size:9pt">Level 4</a><br>
<div class="collapsible" style="" id="7GKbN5XRqkybT+XsbHkyqw==">
<div>Level 5</div>
<a class="ConceptLevel6" href="javascript:toggleDiv
('rV75pTUXp0KP6Mx6EJznDg==');" style="font-size:8pt">Level 5</a><br>
<div class="collapsible" style="display:none "
id="rV75pTUXp0KP6Mx6EJznDg==">
<div class="details">Conclusion: for all the below levels ....</div>
<a class="ConceptLevel7" href="javascript:toggleDiv
('a5qCUDoqI0CPlS4pPGcODQ==');" style="font-size:7pt">Level 6</a><br>
<div class="collapsible" style=""
id="a5qCUDoqI0CPlS4pPGcODQ==">
<div>Level 7</div>
<div>Level 7</div>
</div>
<div>Level 6</div>
</div>
</div>
</div>
<div>Level 3</div>
</div>
</div>
</div>
Update: I have fixed the link, now it leads to a css file https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css

Answer 1

You've got a single quote followed by double quotes in the first attribute in your html tag (the one you link your css with).
Try keeping an eye on your syntax coloring. Stackoverflow already does this.
Try using an IDE("Integrated Development Environment" or code assisting text editor), like Notepad++, Atom, Sublime Text 3, etc.
Google "top 10 ide's".
Good luck.

Answer 2

This is embarrassing, mostly for me (a programmer by night) but it should be more for the pro who rushed to sanction my typos or what they believed it would be typos.
I was using ConceptLevel in the html code and conceptlevel in css
I am wondering why jsbin worked with this