/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */
/* Style the navigation bar */
/* The sidebar menu */
/* The side navigation menu */
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
/* Sidebar links */
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
/* Active/current link */
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
/* Links on mouse-over */
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
body {
background-color: #F4C2C2;
color: #304529;
font-family: monaco;
}
.thick {
font-weight: bold;
}
h2 {
outline: 5px dotted green;
}
img {
float: left;
}
This is a heading
This is a paragraph.
This is a div.
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Demonstrating the Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.
.