<div style="background-color: rgb(200, 200, 200);"> 
<p>This is a box</p>
</div>

Foxglove

hey, look at that! we made a box with text in it! now for like, what that stuff means:

"div" defines a block. it's short for division. "p" also defines a block, but it's more for like, paragraphs? you can still do block things to paragraphs. THere's a lot of block elements, they all try to start new lines.

style is where you tell the computer to shut up with whatever it was doing by default and make it follow your directions. you can just tell a paragraph to make a funny box! look at this p acting like a div! i don't think you can put a paragraph inside a paragraph tough. that would be too silly.

back on the real topic: our box is kinda bland, so lets spice that up

<div style="background-color: rgb(200, 200, 200); 
     position: relative; 
     margin: 1em 1px 1em 4em; 
     padding: 1.5em 1em 0.75em 7.5em; 
     border: 3px solid #222; 
     box-shadow: rgba(0, 0, 0, 0.15) 4em 0em inset, rgba(0, 0, 0, 0.4) 1px 2px 3px; color: #000;"> 
<p>this is more like the boxes we use to talk</p>
</div>

Foxglove

that's looking familiar. now what do all the funny words mean?

1. background-color: what color is the box.
2. position: what method are you using for positioning. there are 5 options, and we really only care about relative and absolute. absolute is the one you want for overlapping objects.this is ✨foreshadowing✨
3. margin: defining the empty space left outside of the object. by having a 4em margin, i leave a handsome lil space to frame this box.
4. padding: defining the empty space inside of the object. This is what keeps the text from hugging the edges of the box.
5. border: how thick is the border, what style border am I using, and what color is the border. there's lots of options for border style, just like, look them up?
6. box-shadow: define the color, required horizontal offset, required vertical offset, optional blur, optional spread. if you add "inset" you put the shadow inside the box!
7. color: what color is the text inside the object

Foxglove

cool! We're almost done recreating this box!

all that we have left to cover is putting things on our box! and that means it's time for absolute position.

so for absolute position, lets make sure we're working with block elements, just to be safe. block elements are things like div, p, and helpfully for us, header, played here by h1! inline elements are things like span and img. these can apparently behave differently, so let's add "display: block;" to our image to be safe.

<div style="background-color: rgb(200, 200, 200); 
     background-image: linear-gradient(to bottom left, rgb(124, 35, 75), #FcF 70%); 
     position: relative; 
     margin: 1em 1px 1em 4em; 
     padding: 1.5em 1em 0.75em 7.5em; 
     border: 3px solid #623; 
     box-shadow: rgba(100, 0, 50, 0.2) 4em 0em inset, rgba(0, 0, 0, 0.4) 1px 2px 3px; color: #000;">
<h1 style="position: absolute; 
  margin: 0px; top: -0.66em; 
  left: 2rem; 
  line-height: 1; 
  color: rgb(124, 35, 75); 
  text-shadow: #fff 0px 0px 5px, #f6a 3px 3px">
  Punished Eggbug
</h1>
<img src="https://i.imgur.com/h06rBoL.png" alt="Punished Eggbug" style="display: block; 
  position: absolute; 
  width: 9em; 
  margin: 0px; 
  left: -2.5em; 
  top: 1em;">
<p>here we have a fully made chatbox.</p>
<p>look at that eggbug go!.</p>
</div>

Punished Eggbug

here we have a fully made chatbox.

look at that eggbug go!.

Foxglove

and we're done! by putting those elements inside the parent div, we got to move them around within the div, and even move them outside of the box by using left/right and top/bottom!

after all of this, i've learned why some of the codes i stole work the way they did, and really, isn't that what's most important?