Let’s clear up the misconception about css.
There are many components to CSS, but a lot of people just clump these components together and call them “styling”. Then present them all in one giant bundle expecting new comers to figure out what they meant. In your case, you went from tutorial to tutorial trying to find that “piece” that will fit everything together, and by the end of it, you forgot what you were researching at first. Happens to me too. LOL
If we go through each component’s category in CSS, we find that it is not all that confusing. For example: Quote from @rmdawson71
.navbar {
position: fixed;
top:0px;
left: 0px;
right: 0px;
margin: 0 auto;
z-index:1000;
width: 75%;
background-color: orange;
border-radius: 10px;
}
CSS Positioning
position:fixed, tells the element to stay fixed even if the all the other element is scrolling. The position we have it to stay fix, is describe using top, left, and right.
Top:0px, meant that, start offsetting the element from the top of the viewport at 0px. So it stuck on the top. Left, right, bottom all does the same thing if it is presented by itself.
The confusing part starts when Left:0px and Right:0px are presented at the same time. Because logically, this does not make sense. It is like trying to look left and right at the same time.
What it did was it created an imaginary space between the left and right side of the viewport.
If we change right to right:1000px; The positioning would adjust accordingly between left and right. But we cannot get absolute center by setting fixed value to left and right.
We then use margin:0 auto; Which means to automatically and equally place a margin left and right side. Which gives you the centering.
CSS Layering
The z-index tells the order of element to be display. Were not talking about order as in placing them left and right, but more like layers in photoshop foreground and background. Placing higher value meant you are lifting the element forward while smaller values stay in the background.
Setting z-index to 1000 meant that this element is the most front element in the page.
CSS Element Layout
width:75% which is very straight forward, but it can be confusing depending on the context which it is used. 75% meant 75% of the viewport width.
If this percentage was used in another context, it meant 75% of the parent element. For instance
<div style="width:1000px">
<div style="width:75%">
The inner div is 750px wide
</div>
<div>
CSS Styling
Lastly we got background-color and border-radius. Those are straight forward. They do exactly what they say they do.
So now you have 4 different components of CSS working unison in one. Is not as simple as tutorial says it is, but it is at the same time.
Here is a codepen. http://codepen.io/Cowwy/pen/dvBjmZ