Previous part, which had become unreadable because I put so many elements in a "sticky" position for fun and giggles O_O lmao

Red

Green

Blue

I won't try "position" anymore because I'd put so much stuff in a "sticky" or "fixed" position and make this page unreadable as well lol

Red

Green

Blue

Time to try other CSS properties

Like overflow!

FUCK LOREM IPSUM!!! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA OVERFLOW IS VISIBLEEEEE!!! OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO

FUCK LOREM IPSUM!!! AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA OVERFLOW IS HIDDEN!!! OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO HEIGHT IS JUST 150 PIXELS!!!

Alright...

Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...Hmm...

Float property

Red

Green

Blue

Hmm...

Red

Green

Blue

Hmm...

Red

Green

Blue

Hmm...

Red

Green

Blue

Hmm...

Red

Green

Blue

Hmm...

Blue

Hmm...

12 (inline)

12 (inline-block)

12 (block)

1 (margin:auto;width:50%)2 (block)

1 (margin:auto)2 (block)

1 width:50%2 (block)

1 (margin:auto;width:50%)2 (inline)

1 (margin:auto)2 (inline)

1 width:50%2 (inline)

Lorem, lorem... a pink elephant...

Display:block

Display:inline

Display:inline-block

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And again, but with 10px of padding...

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And again, but with 20px of padding...

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And again, but with 30px of padding...

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And again, but with 20px of padding and text aligned in the center...

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And again, but with a 10px groove red border, and a green box shadow of 10px 10px 10px

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And again, with a 45 degree color gradient from cyan to white

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And here's what happens if, instead of "inline-block", I put "block"

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

And here's what happens with "inline"

Horizontal navigation link |

IDK, TBH |

A cake made of blood |

The cycle of life and death |

Moving on to other things

For example, this paragraph has "margin:auto" as a property, but since I didn't specify the width, nothing happens

Width:50%

Width:10%

Width:25%, with a white background and 10px solid red border

Same as above, but without "margin:auto"

CSS properties values in this paragraph: color:rgb(128,64,32);margin:auto;width:50%;border:10px solid red

CSS properties values in this paragraph: color:rgb(128,64,32);margin:auto;width:50%;text-align:center;border:10px solid red

So, the text align centers the text inside the element, whereas "margin:auto" centers the element itself (if a width is specified)

This is a paragraph

This is a paragraph with margin:auto;width:50%;border:5px solid red

In terms of CSS, this paragraph only has border:5px solid red, and is centered using the HTML tag "center". Let's see if there's any difference

Ah, well, of course, I didn't specify the width in the second paragraph. I'll try again.

This is a paragraph with margin:auto;width:50%;border:5px solid red, and I'm adding this text so that it will contain two lines and compare it to the next paragraph

In terms of CSS, this paragraph only has border:5px solid red and width:50%, and is centered using the HTML tag "center". Let's see if there's any difference

It seems like with the HTML tag "center", the second line is centered, whereas using margin:auto, it's not. Interesting

Position:absolute;right:0px

Position:absolute;right:100px

Position:absolute;right:0px;border:5px solid red

Position:absolute;right:100px;border:5px solid red

Position:absolute;right:50%;border:5px solid red

Interesting

Now I'll make three colored paragraphs float (left)

Red paragraph

Green paragraph

Blue paragraph

Ha, basic stuff I already knew. But what about a padding of 20px?

Red paragraph

Green paragraph

Blue paragraph

Cute

I'm gonna try the "clearfix" hack now. Let's see how it is. I'm gonna put an image floating left of this paragraph, let's see what happens OuO

I'm just gonna try to clear:both now.

I'm gonna try the "clearfix" hack now. Let's see how it is. I'm gonna put an image floating left of this paragraph, let's see what happens OuO

Oh, right, the text should be inside the "img" element

I'm gonna try the "clearfix" hack now. Let's see how it is. I'm gonna put an image floating right of this paragraph, let's see what happens OuO

Now I'm gonna apply "clear:both" and "display:table" to both the div and the img, let's see what happens OuO

Now I'm gonna apply "clear:both" and "display:table" to the div but not to the img, let's see what happens OuO

Now I'm gonna apply "clear:both" and "display:table" to the img but not to the div, let's see what happens OuO

Now I'm gonna apply "display:table" to the div, let's see what happens OuO

Alright, turned out that "display:table" was enough, lol. Anyway, moving on to other things, seems like there's more to "padding" than I knew about. You can insert multiple values. For example now I have put "padding:100px 0". Let's see what happens.

A combination of "padding:100px 0" and "text-align:center".

A combination of "padding:50px 0" and "text-align:center".

A combination of "padding:50px 0px" and "text-align:center".

A combination of "padding:50px 100px" and "text-align:center".

This paragraph has the following properties and values: "padding:50px 100px;border:5px solid green"

This paragraph has the following properties and values: "padding:50px 200px;border:5px solid green"

Alright, the second padding value is horizontal, it seems

Vertical-align:middle;border:5px solid black

Vertical-align:middle;border:5px solid black;height:50px

I have no idea what "vertical-align" does for now *shrugs*

Now I'll try with the so-called "flexbox". CSS stuff here: "display:flex;height:100px;border:5px ridge blue"

Again with the so-called "flexbox". CSS stuff here: "display:flex;justify-content:center;height:100px;border:5px ridge blue"

Again with the so-called "flexbox". CSS stuff here: "display:flex;justify-content:center;align-items:center;height:100px;border:5px ridge blue"

Again with the so-called "flexbox". CSS stuff here: "display:flex;align-items:center;height:100px;border:5px ridge blue"

It seems like in a flexbox, "justify-content:center" centers stuff horizontally, while "align-items:center" centers stuff vertically. But what if I don't put "display:flex"? This is the result. CSS stuff here: justify-content:center;align-items:center;height:100px;border:5px ridge blue

Oh, ok, I necessarily have to put "display:flex" in order for "justify-content:center" and "align-items:center" to work. Seems like those two parameters only work inside a flexbox

Hmm...

hmm...

Hmm...hmm...

hmm

Hmm

Eh

Alright, September 10 2024... it's been a while since I've last "practiced" CSS! Gotta avoid being lazy! I'll start again soon

With "margin:auto" I can center an element horizontally, as long as I specify the width!

With "padding" I can make the element "taller", in the sense that there's more space between the text and the border. I have set padding:50px here

text-align:center is something that centers the text horizontally, but it's not like I don't know lmao, I literally do it everytime I put a title on my stories, so it's one of the things I do most frequently, so I know it very well. I can move on now (actually, I'll do the text-align:center one more time with a shorter text since here the text is too long and it doesn't center the text)

text-align:center;border:5px solid green

text-align:center;border:5px solid green;width:50%;margin:auto

text-align:center;border:5px solid blue;width:75%;margin:auto

Now I'll center an image using "display:block" and "margin:auto"

And now I'll do the same thing simply using the "center" HTML tag

Seems like it's pretty much the same thing, lol

Alright, moving on... I'll align something to the right using the absolute position, that is... "position:absolute;right:0px">

position:absolute;right:0px;width:25%;border:5px solid magenta

Alright, looks good

Now I'll try using "float:right"

float:right;border:5px solid green

Alright...

Now I'll use "display:table" for... idk, it's hard to explain

Some text, and now with the "display:table" applied to the div that contains the image (and this text), it should display neatly

Alright, it worked

Centering a text vertically using "padding"

Centering a text vertically using "padding" and horizontally using "text-align:center"