Hover Effects
Make the page react to the mouse, with CSS alone.
index.html
1<!doctype html>
2<html>
3 <head>
4 <title>Hover</title>
5 <link rel="stylesheet" href="style.css">
6 </head>
7 <body>
8 <h1>Buttons soon!</h1>
9 <button>Hover over me</button>
10 </body>
11</html>
style.css
1button {
2 font-size: 20px;
3 padding: 10px 20px;
4}
5
6button:hover {
7 background-color: gold;
8}
Every line, explained
<!doctype html>- <!doctype html> is the very first line of every real web page. It simply tells the browser "this is a modern HTML page"; it is a declaration, not a tag, so it never gets closed.
<html>- <html> is the root: every other tag on the page lives inside it. Intro to HTML skipped this wrapper; now you are writing pages the way the pros do.
<head>- <head> holds information ABOUT the page: its title, and links to other files. Nothing inside <head> is drawn on the page itself.
<title>Hover</title>- <title> names the browser tab. Look at the tab bar of a real browser: every name you see there is one of these.
<link rel="stylesheet" href="style.css">- This line connects the stylesheet: rel="stylesheet" says what the file IS, href="style.css" says where it lives. From now on, everything in style.css shapes how this page looks. One page, two files, working together.
</head>- </head> closes the head. The visible part of the page comes next.
<body>- <body> holds everything you can actually see: all the tags you learned in Intro to HTML go in here.
<button>Hover over me</button>- A button from Intro to HTML. It still does nothing when clicked; that changes in lesson 8.
</body>- </body> closes the body.
</html>- </html> closes the root tag. Nothing comes after it.
button {- Styling the button tag itself.
padding: 10px 20px;- Two values: the first is padding for top and bottom, the second for left and right. Wider than tall makes a comfortable button.
}- The } closes the rule.
button:hover {- The :hover part is a state: this rule applies ONLY while the mouse is over the button. CSS can react to the mouse!
background-color: gold;- Gold while hovered, back to normal when the mouse leaves. Try it in the preview when the page runs; it really works.
}- The } closes the rule. Hovering is as far as CSS goes, though: it can change looks, but making a click DO something needs the third file. Enter JavaScript.