QP School
CSS styling the blog - Printable Version

+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: CSS styling the blog (/showthread.php?tid=69)

CSS styling the blog - Derp - 08-29-2020

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