Main Content - 2 Column, grid-row: 4;
Use pre code to display the HTML & CSS code as seen below in a web page to others.
Use HTML Formatter to indent the code.
<!DOCTYPE html>
<html>
<head>
<title>Title appears in web browser tab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Webpage code comments
HTML section: <!-- write your comments here -->
CSS section: /* write your comments here */
body {
background-color: #487286;
margin-right: auto; <- centers the div
margin-left: auto; <- centers the div
}
p {
font-family: "Roboto Slab", serif;
font-size: 100%;
text-align: left;
margin: 0px;
padding: 0px;
font-size: 1em;
line-height: 1.3em;
color: #000000;
font-family: Verdana, Geneva, sans-serif;
}
<br> this is a break that will cause text or photo to fall to the next line. You can use more then one </br>
<b> is to make text bold</b> <-- depreciated
<strong> makes text bold </strong> <--new
<i> for italics text</i>
<p> for paragraph text</p>
<div> any sort of content inside a div </div>
Think of it as a box that you put in the text and images etc.
You can then style it with borders or drop shadows or corners or color backgrounds or images.
Hyperlink colors and hover color
<style>
a {color: #blue;
font-family: "Georgia", "Times New Roman", serif;}
a:visited {color: #0080ff;} /* blue */
a:hover, a:active, a:focus { color: #ff0000; /* red */
background-color: #FFFFFF; /* white */
text-decoration:none; }
</style>
