On February 18, 2016, Georgia State University held the second of its HTML and CSS classes: HTML & CSS 2: Adding Style to Pages 2016.
After creating a HTML document, we wrote a CSS document that coincided with and stylized the HTML document. Having only learned how to make a website through coding in a class two weeks prior, this class took the knowledge to another level adding complexity and creativity to the process. I added borders, changed margins, altered color, font, and size of text, and changed background colors.
The HTML text is as follows:
<!DOCTYPE html>
<head>
<title>Website</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
<style>
body{
background-color: blue;
font-family: “Verdana”;
}
.definition {
background-color: #99999A;
border: black 0.2em solid;
margin: 1em 0em;
padding: 0.5em;
}
</style>
</head>
<body>
<div class=”wrapper”>
<h1 id=”website-title”>My Dictionary</h1>
<div class=”definition”>
<h1 class=”def-title”>Ice Cream</h1>
<p class=”def-message”>
A <span style=”color: red; border: black 0.2em solid”>soft frozen</span> food made with sweetened and flavored milk fat.
</p>
</div>
<div class=”definition”>
<h1 class=”def-title”>Dog</h1>
<p class=”def-message”>
A <span style=”color: red”>domesticated carnivorous mammal</span> that typically has a long snout, four legs, a tail, and an acute sense of smell.
</p>
</div>
</body>
The CSS text is as follows:
#website-title {
text-align:center;
color: #FFFFFF;
margin-bottom: 1em;
}
.def-title {
font-size: 1.5em;
text-align: center;
color: white;
}
.def-message {
text-align: justify;
}
h1, p {
margin: 0.5em 2em 0.5em 2em;
}
.wrapper{
padding: 1em;
}
