I'll also include a fully annotated version of the page so you can understand what's happening. I hope this makes sense. I know it can be a minefield when you first start out, but you'll get the hang of it. Let me know if there's anything you don't understand and we can help fill in the gaps.
Please note:
Anything within <!-- --> tags are HTML comments (annotations) and will be ignored by any browser when viewing the page. It is not a good idea to keep any annotations you use within the page on a "live" website. It increases page size and makes pages slower to load. But for demonstration purposes, use this to help you learn what things are. Within the CSS stylesheet, anything between /* */ is an annotation/comment.
<!--
The DOCTYPE tells the browser which rules to use to display the page.
Here, we're using HTML5. This is widely becoming the industry standard.
-->
<!DOCTYPE html>
<!--
The <html></html> tag is required. This holds all the information for the page.
-->
<html>
<!--
The <head></head> tag is required. It holds information for the browser
about this particular page. Any CSS and Javascripts in the head tag will
be run as the page is first loaded.
-->
<head>
<!-- The following line tells the browser which character set to use for the page. -->
<meta charset="UTF-8" />
<!-- The following line is the page title, displayed in the browser's title bar. -->
<title>CSS Centre Example</title>
<!--
This is an "internal" CSS stylesheet. Internal stylesheets and links to external
stylesheets should always be in the head of the page and should be contained
within <style type="text/css"></style> tags.
-->
<style type="text/css">
.nav
{
display: block;
width: 203px;
height: 57px;
background: url('ClosedButton.jpg') transparent;
font-family: 'Fredoka One', serif;
text-align: center; /* This will horizontally centre the text within the element */
margin: auto; /* This will horizontally centre the element on the page. */
}
.nav:hover
{
background: url('HoverButton.jpg') transparent;
}
</style>
</head>
<!-- This is the body of the page; what is displayed to the user. -->
<body>
<!--
This anchor tag creates a hyperlink to another page. It's been given
the CssClass of "nav", relating to the .nav selector within the
internal CSS Stylesheet in the head of the page.
-->
<a href="movies.html" class="nav" title="Movies">Movies</a>
</body>
</html>