I have a website I really don't understand much of what I'm doing but:
My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Academia Gamer Latina</title>
</head>
<body link="555555" vlink="999999">
<div id="welcome"><b><font color="red">Atención: Estamos reclutando programadores y editores gráficos</font></b>. <br><br><a href="proy.html"><b>Proyectos</a> ||| <a href="jue.html">Juegos</a> ||| <a href="don.html">Donativos</a> ||| <a href="http://piratepad.net/GAMLAT" target="_blank">Chat</a></b><br><br>Bienvenidos al proyecto Academia Gamer Latina<br><br> Nosotros buscamos compartir experiencias y conocimientos de gaming en plataformas PC, Android, Linux y iOS<br><br> Del mismo modo también hemos fundado una cooperativa de programación para editar juegos ya existentes y crear nuevos<br><br>Finalmente, el apoyo económico que provenga de tu difusión a este sitio web, y mediante el donativo de los interesados, será invertido en más apoyo de programadores para la misma cooperativa, tecnologías que puedan resolver mejor nuestra vivencia en el mundo virtual y finalmente, también será utilizado para financiar albergues animales localizados en la ciudad de México [videos acá]</a><br><br>Envíanos tus videos de gaming a whatsapp +5215568542161 o [email protected] muchas gracias por ser parte<br><br><div style="text-align: center;"><iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Gj2dfyfEMRc?rel=0" style="font-family: arial, helvetica, sans-serif;" width="420"></iframe></div><br /><br><br>Adherentes a la Academia Gamer Latina:<br><br><a href="https://www.youtube.com/user/luishs45/videos" target="_blank">ZeroGames</a> ||| <a href="https://www.youtube.com/channel/UCvVJmNEA4hO6YFvAIxst5NA/videos" target="_blank">Maxigamer</a> ||| <a href="https://www.youtube.com/user/XXLEONYDASXX/videos" target="_blank">xXLEONYDASXx</a> ||| <a href="https://www.youtube.com/user/nicobarreraa/videos" target="_blank">Nicobarrera</a> ||| <a href="https://www.youtube.com/channel/UCMl7zPblHMjSx6iOpMfD65Q/videos" target="_blank">Academia Gamer Latina</a> ||| <a href="https://www.youtube.com/channel/UClrypkYJLFCW1B2d2r_w49g/videos" target="_blank">Family Templarios</a> <br><br> Recomendados no adheridos aún a la Academia Gamer Latina: <br><br> <a href="https://www.youtube.com/user/paula30972/videos">¡Hey!</a> ||| <a href="https://www.youtube.com/channel/UCILr-2RVL6GCLn5LnQxTlhA/videos" target="_blank"> Astala Vista</a> ||| <a href="https://www.youtube.com/channel/UC-TXRRAr_FvLLNkz9Ib98ww/videos" target="_blank"> Evil Teemo</a></span> |||<a href="https://www.youtube.com/channel/UCbhacmRBTDSzet69u74GzrQ/videos" target="_blank"> Bogi096 </a> ||| </span><a href="https://www.youtube.com/channel/UCe50kq56qUsavVz15X7NIFw/videos" target="_blank">tedj11</a> ||| <a href="https://www.youtube.com/watch?v=6uLxM14_lSA" target="_blank">SuperstarMacAwesomeville</a> ||| <a href="https://www.youtube.com/watch?v=ybHpwV2EPzo" target="_blank">Hegal</a> ||| <a href="https://www.youtube.com/watch?v=Bj_PxfFgOVk" target="_blank">Luisgameplay</a> ||| Mario Ovalle ||| Broker ||| Zedrus ||| Whiskas ||| Nukes ||| Vegeta ||| Aerobomber ||| zanpakuto ||| kumara ||| pacosmosis ||| jole24 ||| topwar ||| decepticons ||| lux0s ||| allelujah
</body><script type="text/javascript" src="index.js">
</script>
</html>
This implies that the text format is in index.js
the following way:
window.onload=function(){
var $ = function(c){
if(c.indexOf('.') == 0)
return document.getElementsByClassName(c.substring(1))[0];
if(c.indexOf('#') == 0)
return document.getElementById(c.substring(1));
return false
}
Element.prototype.html = function(h){
if(h)
return this.innerHTML=h;
return this.innerHTML;
}
var full = window.location.host;
var parts = full.split('.');
$('#welcome').setAttribute("style", "width:50%;margin:2% auto;text-align:center;font-family:sans-serif;color:#666;background:#eee;padding:20px 100px;box-shadow:0 5px 9px 0 #bbb;border-radius:5px;text-shadow:0 1px 0 #fff");
var ah = '<b><font color="red">Atención: Estamos reclutando programadores y editores gráficos</font></b>. <br><br><a href="proy.html"><b>Proyectos</a> ||| <a href="jue.html">Juegos</a> ||| <a href="don.html">Donativos</a></b><br><br>Bienvenidos al proyecto Academia Gamer Latina<br><br> Nosotros buscamos compartir experiencias y conocimientos de gaming en plataformas PC, Android, Linux y iOS<br><br> Del mismo modo también hemos fundado una cooperativa de programación para editar juegos ya existentes y crear nuevos<br><br>Finalmente, el apoyo económico que provenga de tu difusión a este sitio web, y mediante el donativo de los interesados, será invertido en más apoyo de programadores para la misma cooperativa, tecnologías que puedan resolver mejor nuestra vivencia en el mundo virtual y finalmente, también será utilizado para financiar albergues animales localizados en la ciudad de México [videos acá]</a><br><br>Envíanos tus videos de gaming a whatsapp +5215568542161 o [email protected] muchas gracias por ser parte<br><br><div style="text-align: center;"><iframe allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/Gj2dfyfEMRc?rel=0" style="font-family: arial, helvetica, sans-serif;" width="420"></iframe></div><br /><br><br>Adherentes a la Academia Gamer Latina:<br><br><a href="https://www.youtube.com/user/luishs45/videos" target="_blank">ZeroGames</a> ||| <a href="https://www.youtube.com/channel/UCvVJmNEA4hO6YFvAIxst5NA/videos" target="_blank">Maxigamer</a> ||| <a href="https://www.youtube.com/user/XXLEONYDASXX/videos" target="_blank">xXLEONYDASXx</a> ||| <a href="https://www.youtube.com/user/nicobarreraa/videos" target="_blank">Nicobarrera</a> ||| <a href="https://www.youtube.com/channel/UCMl7zPblHMjSx6iOpMfD65Q/videos" target="_blank">Academia Gamer Latina</a> ||| <a href="https://www.youtube.com/channel/UClrypkYJLFCW1B2d2r_w49g/videos" target="_blank">Family Templarios</a> <br><br> Recomendados no adheridos aún a la Academia Gamer Latina: <br><br> <a href="https://www.youtube.com/user/paula30972/videos">¡Hey!</a> ||| <a href="https://www.youtube.com/channel/UCILr-2RVL6GCLn5LnQxTlhA/videos" target="_blank"> Astala Vista</a> ||| <a href="https://www.youtube.com/channel/UC-TXRRAr_FvLLNkz9Ib98ww/videos" target="_blank"> Evil Teemo</a></span> |||<a href="https://www.youtube.com/channel/UCbhacmRBTDSzet69u74GzrQ/videos" target="_blank"> Bogi096 </a> ||| </span><a href="https://www.youtube.com/channel/UCe50kq56qUsavVz15X7NIFw/videos" target="_blank">tedj11</a> ||| <a href="https://www.youtube.com/watch?v=6uLxM14_lSA" target="_blank">SuperstarMacAwesomeville</a> ||| <a href="https://www.youtube.com/watch?v=ybHpwV2EPzo" target="_blank">Hegal</a> ||| <a href="https://www.youtube.com/watch?v=Bj_PxfFgOVk" target="_blank">Luisgameplay</a> ||| Mario Ovalle ||| Broker ||| Zedrus ||| Whiskas ||| Nukes ||| Vegeta ||| Aerobomber ||| zanpakuto ||| kumara ||| pacosmosis ||| jole24 ||| topwar ||| decepticons ||| lux0s ||| allelujah';
$('#welcome').html('<h2>'+sub+'</h2>'+ah+'<br><br><i>Gracias por tu visita!</i>');
setTimeout(function(){top.location='index.js';},9999999999999999);
}
I would like to add the following code:
a:hover {
color:hotpink;
}
Where should I add that format so that it changes to pink when I put the mouse over the link, without invalidating the text format referred to in index.js
?
Anywhere I add it in JavaScript it makes it seem like it index.js
ceases to exist. And anywhere I add it in html
it either does nothing or shows up as text.
What you really want to add is CSS, which has nothing to do with Javascript(js). The former is simply a cascading style sheet while the latter is a programming language.
The CSS can be included in three ways:
In an inline way, which I do not recommend, and which would be adding the attribute
style=""
to the element that you would like to style.In the HTML file, including it in the head inside the tags
In a separate file, adding it inside the tags of the
head
, with the following link:In the latter you should add the CSS code you have above (without tags
<style>
).POSTSCRIPT : For your specific case, the first form will not be worth anything since you cannot use a
:hover
with inline styles. Among the other two possibilities, I would recommend you to separate the CSS in an external file for greater readability and maintenance.The order DOES matter.
In CSS, as its name suggests (Cascading Style Sheets), the order in which you apply the styles is important, since they are applied from top to bottom (cascading), with the last prevailing in case of conflict between them. (in case they have the same specificity ).
This is usually taken into account when we define our styles in a single CSS file, but it is very common to overlook it when we use several files.
RECOMMENDATION: Therefore, the order (from top to bottom) when using several files that I recommend is the following:
I recommend this order because there are libraries that apply many styles to common elements of the page (buttons, borders, padding, etc...) and, in case you want to customize them, if you include these libraries last, your styles will be overwritten. since those of the bookstore will be in last place.
Of course, this doesn't imply that you don't have to "play" with CSS specificity in some cases because libraries tend to use higher specificity (they even make use of
!important
in many cases), but it will save you a lot of headaches in other cases. Many occasions.you can add it now
so you can do it
Hi Friend I hope that I can help you truthfully in the image a boxed part you add to your html code a css style sheet, where it is HREF"" and between the quotes you put the name of the file.