Text shadow, text transform and overlap.

This chapter will be longer than intended so do scroll and be patient while reading. If there's any inquiries, feel free to drop a comment, thank you! :) We will get on  each topic one by one. 

text transform
= words can be transformed to lowercase and uppercase without pressing off or on the caps lock.
advantage: it will stay that way (maybe permanently unless you delete the tag) lowercase or uppercase.
disadvantage: you just can't TyPe LiKE ThiS OKaY?

< p style= "text-transform:uppercase; "> transform me < /p >

transform me

< p style="text-transform:lowercase;"> transform me < /p >

transform me

okay, you might not be able to see it works here. but have a little faith on me. :)

overlap

there's three things that can be overlapped which is the texts, images and boxes.

let's start with text. this overlapping text also known as text shadow. okay, down below is the specimen of my layouts. 

 

this is done in a one div tag and couples of span tag. heh.  if you see in my codes.. as provided,, [code]

the margin-left for your first div tag is up to yourself. (for the font with soft pink color).  while for the blank color font, the margin-left can be either a few number infront or behind of your first number for first div tag. (e.g. the first div tag's margin-left is 100px . so the margin-left for second div tag can be around 97px-99px or 101px-104px.. this is up to you really. but here, i put three px different.) this apply to the margin-top for the second div tag. this margin-top will follow the number of your first box's height. for example if your first box's height is 100px, then the margin-top for your second box should be around 99px-97px or 101-104px.. 

next is the image overlap.
[christmas house cake] [snowman]

this is how we do it,.

first up, type your div tag. 
< div style =" width: 500px; height:407px;" > < img alt= "" src =" http://i3.minus.com/iHuGRtQQbC8Km.png "/> < / div >
then onto your second div tag.
< div style=" width:100px; height:100px; margin-left:380px; margin-top:-140px; "> < img alt="" src= "http://i2.minus.com/iqKCS6XOsq6ND.png" / > < / div >
it's up to you whether or not you want to put margin-left, but it's particularly important to add up margin-top, as it's important to make the images overlapped.
result; 

this is how we do it,. for boxes.. it;s just the same process all over again.. [code]

>> it's easy, if i'm being honest. 'cause all we need is patience, eagerness to learn and experience, and the div tags. i mean, html tags are easiest than css, javascript & ors. not being arrogant or anything but it's my view.. lol :D anyway, if you have any questions, just drop a comment.