I am new to using CSS and it's been a while since I used HTML. I am trying to make a hearder with the <h1> tag with blue text and a green background, while the rest of the page has a white background, for instance. when I use:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
<h2>Second Line</h2>
<a href="http://www.hotmail.com">Hotmail</a>
<a href="http://www.gmail.com">GMail</a>
<a href="default.html">This Page</a>
<div class=box>
<ul>
<li>First</li>
<li>Second</li>
<li>Third and last</li>
</ul>
</div>
</body>
</html>
and the CSS doc:
body {
background-color: white;
}
h1 {
color: blue;
background-color: green;
font-variant: small-caps;
font-family: "Times New Roman";
text-transform: capitalize;
}
h2 {
color: yellow;
background: red;
font-family: arial;
}
a:active {
color: orange;
}
a:hover {
background-color: black;
}
div.box:hover {
height: 50px;
width: 200px;
background: orange;
}
When I load these pages, I get the colors right, but the h1 and h2 lines are their respective background colors across the width of the page, when I just want the text to have the background color. I have tried to set it by pixels, and proportions, but then when I change the font size in the browser or resize the window, it throws it all out of whack.
I am trying to learn by tutorials online, and am just using notepad, so I don't have advanced tools at my disposal. Is this even doable? If anyone has any insight, please let me know. Thanks!
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
<h2>Second Line</h2>
<a href="http://www.hotmail.com">Hotmail</a>
<a href="http://www.gmail.com">GMail</a>
<a href="default.html">This Page</a>
<div class=box>
<ul>
<li>First</li>
<li>Second</li>
<li>Third and last</li>
</ul>
</div>
</body>
</html>
and the CSS doc:
body {
background-color: white;
}
h1 {
color: blue;
background-color: green;
font-variant: small-caps;
font-family: "Times New Roman";
text-transform: capitalize;
}
h2 {
color: yellow;
background: red;
font-family: arial;
}
a:active {
color: orange;
}
a:hover {
background-color: black;
}
div.box:hover {
height: 50px;
width: 200px;
background: orange;
}
When I load these pages, I get the colors right, but the h1 and h2 lines are their respective background colors across the width of the page, when I just want the text to have the background color. I have tried to set it by pixels, and proportions, but then when I change the font size in the browser or resize the window, it throws it all out of whack.
I am trying to learn by tutorials online, and am just using notepad, so I don't have advanced tools at my disposal. Is this even doable? If anyone has any insight, please let me know. Thanks!