<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#000000;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
h3000.hidden {visibility:hidden;}
h16
{
color:black;
font-size:24px;
text-align:center;
}
p6
{
color:white;
text-align:center;
}
.marked
{
background-color:#5858FA;
}
.marked p6
{
color:#40FF00;
}
h5
{
color:blue;
font-size:36px;
}
h6,p3
{
color:blue;
fontsize:14px;
}
p.one
{
border-style:solid;
border-width:3px;
}
div.ex
{
width:250px;
padding:15px;
border:5px solid black;
margin:0px;
}
#p2
{
text-align:right;
color:#FFF
}
body
{
background-color: #00BFFF;
}
h1
{
color:Black;
text-align:center;
}
p
{
color:#FFF;
text-align:left;
font-family:"Times new Roman";
font-size:16px;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<h1>CSS Practice</h1>
<p>Finally Doing My Work!</p>
<p id="p2">This isn't as hard as I thought haha.</p>
<p >Learning borders and boxmodel.</p>
<p><b>Note:</b> This borders width is 1px wide.</p>
<img src="Dark City.png" width="600" height="900" />
<div >The picture above is 600px wide.
The total width of this element is 900px. Made by Brian W.</div>
<h5>CSS ADVANCED</h5>
<h6>Grouping my code</h6>
<p3>CDAT is awesome.</p3>
<div >
<p6>Nesting Selectors</p6>
</div>
<h3000 >Hidden from you.</h3000>
<h16>The heading to the left is hidden from the reader's eyes.</h3001>
<p><b><a href="Brian Willis, HTML (BOXMODEL).html" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover must come after a:link and a:visited in CSS
in order to be effective.</p>
<p><b>Note:</b> a:active has to come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#000000;
}
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
h3000.hidden {visibility:hidden;}
h16
{
color:black;
font-size:24px;
text-align:center;
}
p6
{
color:white;
text-align:center;
}
.marked
{
background-color:#5858FA;
}
.marked p6
{
color:#40FF00;
}
h5
{
color:blue;
font-size:36px;
}
h6,p3
{
color:blue;
fontsize:14px;
}
p.one
{
border-style:solid;
border-width:3px;
}
div.ex
{
width:250px;
padding:15px;
border:5px solid black;
margin:0px;
}
#p2
{
text-align:right;
color:#FFF
}
body
{
background-color: #00BFFF;
}
h1
{
color:Black;
text-align:center;
}
p
{
color:#FFF;
text-align:left;
font-family:"Times new Roman";
font-size:16px;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<h1>CSS Practice</h1>
<p>Finally Doing My Work!</p>
<p id="p2">This isn't as hard as I thought haha.</p>
<p >Learning borders and boxmodel.</p>
<p><b>Note:</b> This borders width is 1px wide.</p>
<img src="Dark City.png" width="600" height="900" />
<div >The picture above is 600px wide.
The total width of this element is 900px. Made by Brian W.</div>
<h5>CSS ADVANCED</h5>
<h6>Grouping my code</h6>
<p3>CDAT is awesome.</p3>
<div >
<p6>Nesting Selectors</p6>
</div>
<h3000 >Hidden from you.</h3000>
<h16>The heading to the left is hidden from the reader's eyes.</h3001>
<p><b><a href="Brian Willis, HTML (BOXMODEL).html" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover must come after a:link and a:visited in CSS
in order to be effective.</p>
<p><b>Note:</b> a:active has to come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
MY CODE
This is just a basic HTML and CSS combination. The Web portion of my class is not strong but i have the basics down. Photoshop is what I specify in. HTML and CSS are extremely useful when working in CDAT. My groups are able to have complete control of the website and in addition I am able to create awesome images for the background/header.