I've been doing HTML and CSS for a few months and as a part of my website I made a joke fake sales website. I am sort of basing it on the Amazon pages, with a picture on the left, a header on the right, and a product description on the right underneath the heading. Now yes I know what you're thinking looking at my code "He hasn't even done anything to his description!", well there's nothing there because I got angry and got rid of my CSS for the description. You can see a class .description for putting CSS and whatever there. I've tried floating it to the right (it doesn't work), floating to the right and then using padding to push it in a certain direction (it doesn't work), E.T.C. If you want the full code I'll put that at the bottom or something. Please show me how I can get my description under the title?
(For this chunk of code I have removed a few bits that were unnecessary)
<!DOCTYPE html>
<html>
<head>
<title>merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.description{
}
</style>
</head>
<body>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
The output of the code
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
float:right;
padding-right:100px;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.description{
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<h1>
<div id="merch">
Hamsterlover606 merchandise for sale
</div>
</h1>
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</body>
</html>
Use div to order and group your code. Try to think of the elements on your page as different groups in a box, and create a div for every group.
To make the div with the text appear right next to the image, make the image float: left.
` <!DOCTYPE html>
<html>
<head>
<title>Hamsterlover merch for sale</title>
<style>
#merch{
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
#img {
float: left;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Buy
Sell
About
</div>
<div id="img">
<img src="https://cdn.glitch.com/d006369a-81f1-413d-a5cd-ce34e241b87c%2F775B0830-9365-46FF-AEF7-66F8939D8617.jpeg?v=1575572530269" height="500">
</div>
<div>
<h1>
Hamsterlover606 merchandise for sale
</h1>
<div class="description">
<h3>
Merchandise for Hamsterlover606.
<br>
<br>
Perfect condition, hardly used. Comes with a t-shirt, a hat, and a pillow.
<br>
<br>
</h3>
</div>
</div>
</body>
</html>`
Related
I am trying to do some projects in my HTML book, and for one exercise I need to move embedded css to an external stylesheet before continuing on in the exercises. For some reason the external CSS is not being picked up even though in previous exercises I have never had this problem.
This is the html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lighthouse.css" media="screen">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner">
<h1>Lighthouse Island Bistro</h1>
</header>
<nav role="navigation">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Map</li>
<li>Contact</li>
</ul>
</nav>
<main role="main">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside.
Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer role="contentinfo">Copyright © 2016
</footer>
</div> <!-- end of wrapper -->
</body>
</html>
And the CSS
header, nav, main, footer, figure, figcaption { display: block; }
* {box-sizing: border-box; }
body { font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:850px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
}
nav { float: right;
width: 150px;
letter-spacing:0.1em;
font-weight: bold;
}
nav ul { list-style-type: none;
margin: 0;
padding: 0;
}
nav a { text-decoration: none;
display: block;
padding: 20px;
background-color: #b3c7e6;
border-bottom: 1px solid #ffffff;
background-image: url(sprites.gif);
background-repeat: no-repeat;
background-position: right 0;
}
nav a:link { color: #ffffff; }
nav a:visited { color: #eaeaea; }
nav a:hover { background-color: #eaeaea;
color: #869dc7;
background-position: right -100px; }
main { background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
h1 { margin-bottom: 20px; }
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
#floatright { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
padding: 10px;
background-color: #869dc7;
clear: both;
}
All I am trying to do at this point is get my HTML to recognize the external stylesheet so I can move on to a farther point. Any aid or guidance to finding the answer to this exercise would be greatly appreciated.
Try opening your web browser's Developer Tools console and reloading your webpage while watching the Console panel. You might see an error that will give you a hint as to why the CSS didn't load - perhaps the file path wasn't found.
Is your stylesheet in the same folder? If its in a different folder do ./foldername/lighthouse.css
Maybe you have your css inside of another Folder so you must be write on your link something like this /yourfolder/lighthouse.css
Forgive my ignorance if this sounds stupid, but it works in chrome but not IE(or edge). I assume there is a line of code that was in the HTML that would explain why (im pretty new to this)
When my site is full screen, the four pictures show up in a horizontal line. However, when the window gets smaller, the last picture folds over into the next line. I want all the pictures to stay in a horizontal line no matter what the window size. Any suggestions?
My code:
body {
font-size: 1.5rem;
margin: 0;
display: inline-block;
list-style-type: none;
position: relative;
width: 100%;
background-color: #d5e0e8;
}
img {
padding: 2px;
}
h1 {
text-align:center;
padding: 20px;
font-family: 'Oswald', sans-serif;
}
h2 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h3{
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h4 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
ul {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
background-color: #6e95ad;
margin: 25px;
}
p {
text-align: center;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif;
background-color: #6e95ad;
margin: 25px;
}
p1 {
margin: 525;
font-family: 'Open Sans Condensed', sans-serif;
}
<html>
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
<head>
<link rel="stylesheet" href="styles.css" >
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<title> My Job </title>
</head>
<body>
<div style="visibility: hidden; height: 0; width: 0">
</div>
<div>
<h1> ... ENTERTAINMENT </h1>
<h2 class="display-3"> Who We Are </h2>
<p class="lead"> ...is a television production and development company located in S..., California. We create content for television and digital sites such as The History Channel, TLC, Netflix, Discovery, YouTube Red, and many more.
INE was founded by ... and .... These exectives are responsible for creating shows such as The Office (US), The Biggest Loser, Masterchef, Real Housewives of Orange County, Tabatha‘s Salon Takeover, and several others. </p>
<p1> ...Entertainment Sizzle Reel </p1>
</div>
<div>
<h3> My Role </h3>
<p> In the summer of 2017, I was hired as a Development Research Associate after working for three months as an intern for .... My role as a research associate varies each work day. My duties include finding and contacting potential talent for digital and reality series, writing and organizing television pitches for networks, deck design, cold-calling experts, and exectuive assitance to ... and .... </p>
</div>
<!-- They are very scary. -->
<span>
<h4> Employment Hightlights </h4>
<ul>
<li> Transcripting broadcast scripts for <i> Making a Scene with James Franco </i></li>
<li> $ $ $ </li>
<li> Acting as Production Assistant for <i> MVP </i> starring Rob Gronkowski, Andre Ward, Terell Owens, and Julius Randall at CBS Studios</li>
<li><s> Free Lunch </s></li>
<li> My roommate was named Morgan Freeman. </li>
</ul>
</span>
</body>
</html>
I guess you are searching the CSS white-space: nowrap. The effect is that a line will never break.
HTML
<div class="nowrap">
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
</div>
CSS
.nowrap {
white-space: nowrap;
}
Demo:
https://jsfiddle.net/2yxcz34d/1/
You could further control the behaviour of the .nowrap container with the CSS overflow: hidden; or overflow: visible;.
So I have this working for you, but first note is you need to remove the HTML tag to the very top. It should come before the body. For this question I moved it to the top and put everything else below inside of a tag. Use for a headline that should appear in the body.
Working Example: https://codepen.io/anon/pen/LzZpbe
In the HTML I wrapped the images in a div and gave it the class "gallery-container" and wrapped each image in a div and gave it a calss "gal-image".
HTML
<div class="gallery-container">
<div class="gal-image">
<img src="https://i.sdlcdn.com/img/product/descimg/SDL008306056_2.jpg">
</div>
<div class="gal-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71GTFDd4KiL._SX355_.jpg">
</div>
<div class="gal-image">
<img src="http://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c03815648.png">
</div>
<div class="gal-image">
<img src="https://assets.logitech.com/assets/65057/k840-mechanical-pdp.png">
</div>
</div><!-- END GALLERY CONTAINER -->
For the CSS I gave the .gallery-container a width of 100% and the .gal-image a width of 25%. This ensures the images will always be 25% of the total .gallery-container width(100%) so all 4 images will always be side-by-side. I gave your images a padding-right of 2px to separate them by 2px but gave the last image a padding-right of 0 so it does not push the container our 2px and cause a horizontal scrollbar.
CSS
img{
padding-right:2px;
max-width:100%;
}
img:last-of-type{
padding-right:0px;
}
.gallery-container{
width:100%;
}
.gal-image{
width:25%;
float:left;
}
I want to align these two images on the right but I want them to be on separate lines. Right now the only method I can think to do that is a very large margin for one of the images but i'm wondering if there's a better way.
I want the paragraphs to appear beside the first image, on the right.
Also the background of the paragraphs changes when scrolled over, but I would like to restrict the colour change to being just around the text.
Use any images you want in this code
This is my code:
<!DOCTYPE HTML>
<html>
<head>
<title> Stack Overflow Question </title>
<link rel="stylesheet" type="text/css" href="./css/q7.css"></link>
</head>
<body>
<h1> Holla lolla lolla la </h1>
<figure id=real>
<img src="images/RealDog.jpg" </img>
<figcaption>Figure 1. Real Dog</figcaption>
</figure>
<p id="Gar"> Gar Gar Gar </p>
<p id="lol"> lol lol lol </p>
<figure id=fake>
<img src="images/FakeDog.jpg"></img>
<figcaption>Figure 2. Fake Dog</figcaption>
</figure>
</body>
</html>
Css file:
body {
font-family: sans-serif;
font-weight: normal;
background-color: #EDEDED;
}
h1 {
color: blue;
font-weight: normal;
}
img {
height: 100px;
/*display: block;*/
}
p:hover {
background-color:white;
}
#Gar {
float: right;
color: blue;
margin-right: 100px;
}
#lol {
float: right;
color: blue;
margin-right: 100px;
}
figure {
float: right;
margin-left: 1000px;
}
First of all it's very important to understand the way that html and css works.You should be more specific with your classes and improve your structure in html code.For css it's wrong to use margin:1000px.It's wrong!I set max-width but you can change it.I tried to correct your code as much as I can...but there are a lot better ways to fix your problem
html code:
<div class = "container">
<h1> Holla lolla lolla la </h1>
<div class="right-part">
<figure id=real>
<img src="images/RealDog.jpg" </img>
<figcaption>Figure 1. Real Dog</figcaption>
</figure>
<div class="two-p">
<p id="Gar"> Gar Gar Gar </p>
<p id="lol"> lol lol lol </p>
</div>
<figure id=fake>
<img src="images/FakeDog.jpg"></img>
<figcaption>Figure 2. Fake Dog</figcaption>
</figure>
</div>
css code
body {
font-family: sans-serif;
font-weight: normal;
background-color: #EDEDED;
}
.container{
position:relative;
max-width:900px;
margin:0 auto;
}
h1 {
color: blue;
font-weight: normal;
display: inline-block;
vertical-align: top;
}
.right-part {
display: inline-block;
}
p:hover {
background-color:white;
}
#Gar {
color: blue;
}
#lol {
color: blue;
}
.two-p {
display: inline-block;
vertical-align: top;
}
figure#real {
display: inline-block;
}
So I've noticed in my website that there if you scroll to the right (not as if there is any content to the right) there is a long vertical white strip. This is only if you scroll that you'll see it. This is only alongside certain div elements. Once I get to the rows, the content just stretches to the extra space to the right rather than have the white space as well. Since the problem isn't consistent, I've included all the HTML and CSS code to see if there may be two problems in two separate locations.
This is the HTML
<!DOCTYPE HTML>
<html>
<head>
<title>ACA Technology</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="MyWebsite.css">
</head>
<body>
<div id="infoHeader" class="header">
<div id="header_container">
<!-- header -->
<header class="header_shadow nav_type_12 sticky_header header_to_shrink clearfix" >
<div style="float: left; margin-left: 20px">
<h2> EAZYnetz </h2>
</div>
<div style="float: right; margin-right: 10px">
<button id="home" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-home"></span> Home</button>
<button id="ourApps" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-phone"></span> Our Services</button>
<button id="contactUs" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Contact Us</button>
</div>
</div><!-- end panel-footer -->
</div>
</div>
<div class="Home">
<div id="bigPicture" class="container" align="center">
<h1>BUILD YOUR EMPIRE.</h1>
<p>Every idea needs a website to express itself. Tell us what you need and how you'll like it. We'll make the layout, animation, and paint the final picture to your future method of advertisement.</p>
</div>
</div>
<div id="OurServices">
<div id="information" class="row">
<h3 align="center"> What's included in any option </h3>
<hr>
<div class="col-sm-4">
<h3>Your preferences</h3>
<p> Every idea needs a website to express itself. Tell us what you need and how you'll like it, then we'll make it perfect.</p>
</div>
<div class="col-sm-4">
<h3>Layout</h3>
<p> Tell us how you want everything formatted and where to place what according to your liking. </p>
</div>
<div class="col-sm-4">
<h3>Content</h3>
<p>What do you want to show your costumers? What do you want them to see? Put whatever you want to express on your webpage, no limits.</p>
</div>
</div>
<div id="servicesInfo" class="row">
<h3 align="center"> Choices to pick from</h3>
<hr>
<div class="col-sm-4">
<h3>Front End </h3>
<p>This consists of content text only.</p>
</div>
<div class="col-sm-4">
<h3> Front End + Design </h3>
<p>This consists of the content text and the design (colors, layout, menu, animation, etc). </p>
</div>
<div class="col-sm-4">
<h3>Whole Package <br> Front End + Design + Databases </h3>
<p> This is the whole package. It consists of the text of the website, design of the website, and the databases(forums, users, etc) in the website. <p>
</div>
<p> Overall price depends on level of complexity and number of pages </p>
</div>
</div>
<div id="ContactUs" class="jumbotron">
<div class="container">
<h3>Contact Us</h3>
<ul style="list-style-type:none">
<li><span class="glyphicon glyphicon-earphone"></span> 647-550-3998</li>
<li><span class="glyphicon glyphicon-envelope"></span> temporary#easynetz.net</li>
</ul>
<p> If you're interested or have any questions or concerns,<br> feel free to contact us. </p>
</div>
</div>
</body>
</html>
This is the CSS
a{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}
p{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
}
h1, h2, h3{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 35px;
}
li{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-size: 25px;
color: #FFFFFF
}
#infoHeader{
height: 70px;
background-color: #1A1C27;
}
.header button{
position: relative;
top: 50%;
transform: translateY(50%);
}
.header a{
text-decoration: none;
}
.body{
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.Home{
height: 573px;
background-image: url("clouds.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.Home h1,h2,h3{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home p{
color: white;
font-weight: 900;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.Home .container h1{
margin-top: 170px;
}
.top button{
background-color: black;
color: black;
font-size: 18px;
padding: 8px 30px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
#theName{
color: white;
}
#information{
background-color: #68ABDD;
}
#information h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#information p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo h3{
color: #ffffff;
text-align: center;
font-size: 20px;
}
#servicesInfo p{
text-align: center;
font-size: 14px;
color: #ffffff;
}
#servicesInfo{
background-color: #ff0000;
}
#ContactUs{
height: 635px;
padding:0!important;
margin:0 !important;
background-image: url("http://hdwallpaperspretty.com/wp-content/gallery/beautiful-buildings-wallpapers/Best-top-desktop-3d-buildings-wallpapers-hd-3d-buildings-wallpaper-13.jpg");
background-repeat: no-repeat;
}
#ContactUs{
color: white;
}
#contactHeader{
padding:0;
margin:0;
}
add following class to your CSS
#information, #servicesInfo {
margin: 0;
padding: 0;
}
you can fix that with adding the next css to the html tag on the html file or target the html on the css file:
overflow-x:hidden
The overflow means scrolling when the elements on the page are too big for the page. I didn't check your code to the end in order to see which element is too big for the page but this is a quick way to fix that.
The best option though is to check which element is too big and resize it with css in which way you want to.
One way is
max-width:100%;
I'm creating a navigation system and currently all I have is the titles at the top of the screen, side by side, e.g. home, about us and so on.
I'm unsure how I would create a fixed position for the navigation system at the top of the screen, so when you scroll down etc the options will still be there to click onto at the top of the screen.
Also, how it would be possible to add a background colour just to the navigation system?
Thank you.
Try something like this:
In between the tags in the HTML:
<div id='header'>NAVIGATION LINKS</div>
and in the CSS put:
#header{
padding:10px;
height:20px;
position:fixed;
width:100%;
}
Here's a JSFiddle: http://jsfiddle.net/MGumH/
It would most probably be best to go the HTML5 route, and use SEMANTIC tags.
Something along the lines of the below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<!-- next line points to EXTERNAL Stylesheet -->
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body>
<!-- HEADER -->
<header>
<h1>Header in h1</h1>
</header>
<!-- NAVIGATION -->
<nav>
<ul>
<li class="MyMenuItem">Menu Option 1</li>
<li class="MyMenuItem">Menu Option 2</li>
<li class="MyMenuItem">Menu Option 3</li>
</ul>
</nav>
<!-- SECTION(S) -->
<br />
<section>
<article>
<header>
<h3 class="MyArticleHeader">Article #1</h3>
</header>
<section>
<p>This is the first article. This is <mark>highlighted</mark>. This is some body text, lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again. Lorem ipsum dipsum and some more unknown latin words over and over again.</p>
</section>
</article>
<article>
<header>
<h3 class="MyArticleHeader">Article #2</h3>
</header>
<section>
<p>This is the second article. These articles could be blog posts, etc.</p>
</section>
</article>
</section>
<!-- FOOTER -->
<footer id="MyFooter">Footer - Copyright 2013</footer>
</body>
</html>
There are also other semantic tags too, like Aside for example.
And this is the stylesheet that goes with the above sample
body
{
padding: 12px;
}
h1
{
color: #FFFFFF;
background-color: #FF0000;
text-align: center;
vertical-align: middle;
}
.MyMenuItem
{
margin: 2px;
padding: 2px 8px 2px 8px;
list-style-type: none;
vertical-align: middle;
text-align: center;
float: left;
color: #FFFFFF;
background-color: #FFCC66;
}
.MyMenuItem:hover
{
margin: 2px;
padding: 2px 8px 2px 8px;
list-style-type: none;
vertical-align: middle;
text-align: center;
float: left;
color: #000000;
background-color: #99CCFF;
}
.MyArticleHeader
{
color: #FF0000;
text-decoration: underline;
font-weight: bold;
}
p
{
font-family: Tahoma;
font-size: 12pt;
}
#MyFooter
{
color: #FFFFFF;
background-color: #FF0000;
vertical-align: middle;
text-align: center;
}
Simply copy ans paste the above two samples into separate files one called test.htm and the other called mystylesheet.css (in the same folder)
Ref: for further information http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx