I suppose I could figure this out by myself, but I would like to use best css practicesto do this correctly.
I have a background image that is in a div that I want to layer 7 columns of text over it. As you can see by the attached image, each column has text that is centered or in some cases flush left. In some cases there is a graphic check mark in the column instead of text.
All of the "body" fonts will be Helvetica regular or bold and will be white. And they would all be 12 px.
Also there are some "headers" such as the words "Form Factor" "Devices" etc., that need the fonts to be larger and the font color "green". Those fonts would all be 15px Bold Helvetica
And then, as you can see in the image
Column 1 is flush left....
There is some text in Column 1 that needs to be indented approx 15 px. But further down the column the text is flush left and is not indented.
For consistency in your suggestions let's call each column "col1", "col2", "col3"
Headers would be called "headers"
The white text would be called "whitebody"
The background image can be called "background22"
Because there is so much type in such tight spaces in this mockup I need control over line height, padding, etc.
Any suggestions will be appreciated!