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"

Time to try again, it's been a while! It's November 20, 2024 now!

Setting a width and then "margin:auto", which I've done before

text-align:center, which is something I always use for titles so yeah, something I know very well, lol

With the image above I did "margin:auto;width:50%;display:block", but what if I don't put "display:block"? Let's see!

Alright, seems like "display:block" is necessary to center it! What if I don't put the width?

Alright, width is not necessary, it seems!

border:5px solid magenta;position:absolute;right:0px

Alright...

float:right does the same thing... there are many ways to align elements!

Center HTML tag!

Works with images too, of course!

The div has "display:table;border:5px solid magenta" whereas the image has "float:right"

Center text vertically using "padding", hmm...

Center text vertically using "padding" and horizontally with "text-align:center", hmm...

The guide says that if I put "line-height" and "height" at the same value it will center vertically, let's see!

Not bad...

Same as before but also with "text-align:center"

But what happens if I put "line-height" and "height" at the same time and the text is longer than just one line? I'm curious to see what happens since the guide only mentions that it won't work, but doesn't say what actually happens! IKUSO!!!

Oh, I see it now, haha! "line-height" just simply refers to the height of the line. Alright then, let's keep using different methods to align elements! There's a rather complicated one called "transform", I'm gonna try it!

Yeah, some text... this method is really complicated and I don't see any point in using it when I can simply use "padding" and "text-align:center", but I'm thinking that this "translate" method can do so much more stuff... I'll experiment with it a lot more one day! (Also... why is the text yellow??? lol oh wait, I know why... I set "div p" as background-color:yellow earlier in this page, lol)

I'm gonna try the flexbox now, which is used by "display:flex".

justify-content:center

align-items:center

both at the same time

Alright, seems like justify-content:center centers the text horizontally, while align-items:center centers the text vertically! The alignment is over, next will be the combinators, which I may try soon!

Combinators!

This seems a bit complicated but I'll try...

Ok... descendant combinator is simple... I got it... and I've already did this in this page... any p element descendant of a div has a yellow background color because of the setting I put earlier in this page...

here's an example of a p that is a descendant of a div

Alright, this one is simple enough. Then there's the "child combinator" (with the "greater than" sign), "next-sibling combinator" (with the plus sign) and "subsequent-sibling combinator" (with the tilde). I'll try them eventually. Actually... I've done them already at the beginning of the page. I'll move on to the next part... pseudo-classes!

Now, whenever you hover the cursor on an element that has the class "a", it becomes green.

For the class "b", I have set it that when you hover the cursor on it, the background becomes green!

Basically, it seems like there are four pseudo-classes: link, visited, hover and active. I've seen that one can create a theme selector with CSS alone, and if I remember correctly, pseudo-classes are used in order to do that. I'll learn how to do that eventually, lol.

---

If you hover over this div (paragraph, you'll get... something, idk)

something...idk

"Active" instead of "hover"... idk what it does... maybe you have to click on this paragraph?

Idk... I'll check later what it does

Alright it seems like in order to "activate" the "active" pseudo-class you need to keep the paragraph clicked. Now there are also other pseudo-classes like "first-child" but they seem complicated and I'm too lazy to try now. But I will in the future. After the pseudo-classes I'll learn the pseudo-elements.

Alright, now I've put "input:focus" to "background-color:yellow". So in an input form, if you click on it, the background should become yellow

Could it be that "focus" is a pseudo-class, and there are more than four pseudo-classes? The guide isn't saying that so far... I'll try something...

Let's see what the "focus" pseudo-class does... or it if exists, lol.

Hmm... it should become something in a red background, let's see...

Either it doesn't exist or I'm doing it wrong! OwO

Then there's another pseudo-class! first-child! Basically it styles any element of my choice that is the first child of any element! I'll try it!

This text should be green

Alright, it worked! It should had just been green text but since I've already specified that any p inside a div has a yellow background, it also has a yellow background! Clear enough!

Then there's a pseudo-class called "lang", which IMHO is pretty useless as I can just do it manually. But whatever, it exists, so I'll learn it!

Che roba inutile -.-

Let's see if this text becomes green if you click on it!

It doesn't!

Yeah, it does! The focus pseudo-class exists, then! But maybe it only works on buttons? But if I remember correctly, the styles on buttons can be removed, making it look like a regular paragraph! I'll check again eventually.

It works, but it seems like buttons have a different font compared to regular paragraphs! I'll try to use "arial" as a font!

Actually... I don't remember how to change fonts lol I put "font-family" but I don't remember if that was correct. Idk, I'll check eventually. But what about without changing the background color to white?

As expected, it does! It also looks like that starting from the second line, the text is centered! Interesting! Now I'll try the pseudo-elements! It's been a while since I've last practiced CSS!

So, I've put "p.bluefirstline::first-line" (that is, the first line of paragraph elements with the "bluefirstline" class, that is, this one) as "color:blue". So, this text should be blue.

Alright, it works! I'll try the other pseudo-elements now!

The first letter of this text should be blue, because I've put "p.bluefirstletter::first-letter" as "color:blue".

Alright, that too works! Now, "before". What I'm gonna do is... before a paragraph with the "smiley" class, I'm gonna put an animated smiley GIF that I've found randomly on the Internet.

So, this is the "smiley" class!

And now, with the "smileyafter" class, I put the smiley after the paragraph!

And now, a pretty cool one! I can style the markers in a list! Now I'll put red markers!

Idk
Something
A wise religious figure anally penetrated by Shrek (and enjoying it, it's perfectly consensual!)

This is actually pretty neat! You can modify the text selected by the user with the ::selection pseudo-element! In this case I've put it green, instead of the regular dark blue that is in other paragraphs! You can try for yourself!

Yellow text with red background if you select it!

Then there's a pseudo-element called "backdrop" but I guess you need Javascript to run it so I'll skip it for now. I don't know if I'll ever learn Javascript. Maybe one day. I mean, with generative AI it's gonna become pretty useless to learn programming eventually... but I do it purely for fun and to keep my mind active, so idgaf lmao.

Now, opacity! I've already learned this one but I guess I'll do it again!

Opacity: 0.9

Opacity: 0.8

Opacity: 0.7

Opacity: 0.6

Opacity: 0.5

Opacity: 0.4

Opacity: 0.3

Opacity: 0.2

Opacity: 0.1

Opacity: 0.0

With the "hover" pseudo-class I can make it so that if you hover on this paragraph with your cursor, it will become much more transparent, hardly visible! The same can be done with images, of course!

And now, navigation bars! I've tried them a long time ago but I knew pretty much nothing about CSS! I'll try again, I suppose I'll understand now!

Uh, I guess the same can be done even without "ul"?

My DeviantArt account
Same as above
STONE OCEAN!!!

Yeah... it's basically just a paragraph with break lines. I wouldn't exactly call it a "navigation bar" -.- but what if I applied a light green background color that gets slightly darker on hover?

My DeviantArt account
Same as above
STONE OCEAN!!!

Not bad...

Now, what about the text also changing color if you hover on it?

Now the text below if you hover on it should become a dark red/brownish color: rgb(64,32,16)

My DeviantArt account
Same as above
GOLDO EKUSPIERENSUUU!!!

Pretty cool! Now I'll try something else, namely, that each singular link changes the text color if you hover on it (rather than all of them changing color simultaneously!)

My DeviantArt account
Same as above
EMERALD SPLASH!

Alright, worked as intended! Next time I'll try the horizontal "navigation bar"!