It’s just a semi-transparent PNG image. It’s quite large, and is just centered on screen. The circle is off center in the actual image, making it off center on screen.
You can do this with CSS3, but in this case, he just has a single bg image on various different divs. In CSS2, you can have one bg image per element, but you can have as many elements as you like. If those bg images have transparency, they will create the effect you see there.
I see on tutorials, people put p.maintext { } , why not just do .maintext { } instead of specify the paragraph before the class?
In most cases, the p is redundant. It might help with specificity (to override other rules on the same element), or if .maintext is used on other elements as well, like <ul>, you may just want a special style for when that class is applied to a <p>.