Heres some advanced CSS stuff you need. Take dis
CSS is not just about styling stuff and shadows and stuff etc. Advanced CSS also introduces alignment: which is a hard task (because CSS is trash, as most people assume). But being hard, its not impossible! Because Google is always there for you :D
position
property:Being one of the hardest properties I don't understand, the position
property can have these values:
relative
absolute
sticky
Position sticky... uh it makes elements stick. Try this:
Make SURE to read it.
SURE, I mean
https://www.w3schools.com/cssref/pr_class_position.aspPosition absolute
aligns the elements relative to the page. This way, the elements are not aligned onto each other, but according to their specified positions (given by the top
, bottom
, left
and right
properties). The top
, bottom
, left
and right
properties act as x and y positions for the element (left
being the amount of distance from left, top
meaning distance from the top, etc.). Used if you want to position some items precisely (mostly used with JS).
Position sticky
sticks stuff to the top, like this square you see
Position static
is being used on this header, its just absolute
but it doesnt scroll away (i think)
top
, bottom
, left
and right
properties. If you dont use them, the desired effect may not be obtained.Flexbox is a CSS technique to align items more easily. You can use the following code to completely center align something:
Ok i dont know shit about this, and since you dont seem to have primary interest in webdev anymore, you can simple leave this :|
Or you can GOOGLE stuff if you want:
Property Name | Description | (related) Possible values | Try it |
---|---|---|---|
line-height |
Line height :| You should already know this :| |
Any number + unit (without space). Unit can be px , em , vh , etc. |