Here's a basic HTML file that will do what you want. A couple of things to notice.
1) CSS rules can be either:
- inline (added to the actual HTML tags e.g <p style="color: #fff">), but this is generally not done as it is difficult to maintain and update.
- in the document head using the <style> tag
- in an external file (or files)
2) There are numerous ways to declare CSS rules. For example the rule for your margins was written as:
- margin: 5px 0 ; when there are only two numbers the first number is applied to the top and bottom margins and the second to the left and right. But I also could have written it as:
- margin: 5px 0 5px 0 ; in this case number go Top, Right, Bottom, Left. Also note the for "0" values you don't need to use the units since zero is always the same no matter the unit ( e.g 0 inches is the same a 0 feet). or each individual margin could be defined as follows:
- margin-top: 5px;
- margin-bottom: 5px;
- margin-right: 0;
- margin-left: 0;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<style>
#main_menu {
margin: 5px 0 ; /* this is
color: #fff ; /* you can use hex values for colors #000 is black, #fff is white */
background-color: green ; /* or you can use name */
}
</style>
</head>
<body>
<div id="main_menu">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
</p>
</div>
</body>
</html>
