so i submitted one of my html5 labs and got a 4/20 for a grade... which i think is bs but u be the judge
RequirementsInstructions: you need to assemble an HTML5 page and its corresponding CSS3 style sheet using the following features.
CSS styles within HTML tags
CSS styles listed in the head of the document
Applying CSS styles from an external file
Use the <div> tag to wrap elements within the body
Use the <a> tag within the <nav> element
Identifying an element by its id attribute
Referencing by the value of the class attribute
Assigning styles through the class attribute
Referencing <p> elements by the value of the class attribute
Applying a general CSS rule for margin and padding (i did forget to add this one in before i submitted my work but w.e.)
Adding styles for <h1> and <h2> elements
Centering all text in the body
Adding styles for <header>
Declaring the display, width, and float attributes to accommodate blocks
Applying proper nesting of elements
** these labs are not graded on "prettyness"**
MY CSS FILE/*css file*/
body {
text-align: center;
margin: 0px;
max-width:1000px;
}
header {
background-color:cyan;
display:block;
text-align:center;
}
h1 {
font-size: 15px;
background-color: Red;
}
header h1 {
background-color:DeepSkyBlue;
font-size: 42px;
margin: 0px;
}
footer {
clear: both;
display: block;
background-color: Lime;
color:FireBrick;
text-align:center;
padding: 15px;
}
footer h2 {
font-size: 12px;
}
h2 {
font-size: 15px;
background-color: Aqua;
}
h3 {
text-align:center;
color: IndianRed;
}
.subtitle {
font-size:20px;
}
nav {
font-size: 15px;
display:block;
width:25%;
float:left;
}
nav a { color: Fuchsia;
}
nav a:link, visited {
display: block;
padding: 5px;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
nav a:hover {
text-decoration: none;
color: Blue;
background-color: Gold;
}
nav h3 {
margin: 15px;
color: Olive;
}
#mydiv {
background-color: Beige;
}
section {
display:block;
width:50%;
float:left;
}
section h1 {
padding: 5px;
font-size: 24px;
margin: 0px;
text-align:center;
color: Black;
}
aside {
display:block;
width:25%;
float:right;
}
aside h3 {
margin: 15px;
color: Crimson;
}
p.general {
font-size:32px;
font-style: italic;
color: Navy;
}
MY HTML FILE<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Lab 2</title>
<style>
body{
background-color: LightSlateGray;
font-family:Arial, sans-serif;
border: dashed;
border-color:Yellow;
}
</style>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<header>
<h1 style="font-size: 35pt;color: green">Lab #2</h1>
</header>
<div id="mydiv">
<nav>
<h3 class="subtitle">Menu</h3>
<a href="http://www.google.com">Google</a>
<a href="http://www.uiowa.edu">UIowa</a>
<a href="http://www.yahoo.com">Yahoo</a>
</nav>
<aside>
<h3 class="subtitle">Aside</h3>
<p class="general">1</p>
</aside>
<section>
<h1 class="subtitle">Section</h1>
<p class="general">2</p>
</section>
<footer>
<h2>Hi</h2>
</footer>
</div>
</body>
</html>