So I am trying to get my background for the html file to show up as a gradient. For example, like this: http://uigradients.com/# However, my stylesheet is not linking to my HTML file so not only are my fonts not working, but neither is my gradient.
So essentially, here is what my index file looked like before I messed with it: http://crwirth.github.io and essentially all I am trying to do is make the background a gradient.
Here is my HTML file:
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" type="text/css" href="index.css" media="screen">
</head>
<!--–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<body>
<div class="element">
<h1><a id="line1" class="categories" title="shortblurb1" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>Welcome, I hope you enjoy everything you encounter here:</a></h1>
<h2><a id="line2" class="categories" href="https://github.com/crwirth" title="shortblurb2" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>My GitHub</a></h2>
<h2><a id="line2" class="categories" href="https://wirthrcody.wordpress.com/" title="shortblurb2" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>My Blog</a></h2>
<h4><a id="line5" class="categories" href="https://twitter.com/codyrwirth" title="shortblurb5" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>Follow me on Twitter</a></h4>
<h5><a id="line6" class="categories" href="https://www.linkedin.com/in/wirthcodyr"title="shortblurb6" font-family="'Lobster', cursive" font-weight="normal" text-align="left" ;>Connect with me on LinkedIn</a></5>
<style>
</style>
</div>
</body>
</html>
Ok, and here is my CSS file:
background: #ee0979; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ee0979 , #ff6a00); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ee0979 , #ff6a00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
html {
background-color: #ee0979;
}
a {
color: black;
text-decoration: none;
font-family: "Lobster", cursive;
text-align: left;
}
h1 {
color: black;
font-family: "Lobster", cursive;
font-size: 1.9em;
text-align: left;
margin-left: 15px;
margin-top: 20px;
padding-left: 60px;
padding-top: 10px;
padding-bottom: 25px;
}
a:hover {
text-decoration: underline;
}
a {
color: black;
font-family: "Lobster", cursive;
font-size: 3.1em;
text-align: left;
padding-left: 40px;
padding-top: 15px;
padding-bottom: 15px;
}
the code here in your question is fine, but in your site exists a bad reference to the css file