QP School

If you didnt see my HTML Marking UP the blog post
watch it before you watch this post

Code:
/* i tag color */

i {

  color : red;

}

/* 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: #ffffff;

  color: skyblue;

}

/* Links on mouse-over */

.sidebar a:hover:not(.active) {

  background-color: skyblue;

  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;

  }

}

Code:
i {

color: red;

}

in css you can add i or a or p after them curly brackets inside them codes to manipulate how they work like here i have made
my" i " tags to print out text in red colors

Code:
.sidebar {

  margin: 0;

  padding: 0;

  width: 200px;

  background-color: #f1f1f1;

  position: fixed;

  height: 100%;

  overflow: auto;

}

do you remember the " class" in html?
well to call it in css use
.your class {
}
as you see in the code
The CSS

Code:
margin

properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

All the margin properties can have the following values:
1- auto - the browser calculates the margin

2- length - specifies a margin in px, pt, cm, etc.

3- % - specifies a margin in % of the width of the containing element

4- inherit - specifies that the margin should be inherited from the parent element

Also Negative values are allowed.

To shorten the code, it is possible to specify all the margin properties in one property.

Code:
margin

property is a shorthand property for the following individual margin properties:

margin-topmargin-rightmargin-bottommargin-left

So, here is how it works:

If the

Code:
margin

property has four values:

[b]margin: 25px 50px 75px 100px;[/b]
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px

The CSS

Code:
padding

properties are used to generate space around an element's content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left)

it also has the same use case as margin

The

Code:
float

property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The

Code:
float

property can have one of the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

In its simplest use, the

Code:
float

property can be used to wrap text around images.

and if you copy my css and html codes your page should be looks like that

[attachment=1]

Derp