To make boxes look like boxes... not sure what you mean.
Add a border?
border: solid 3px #000000;
Or make the text align right/left?
text-align:right; text-align:left;
Is that what you're trying to do? And what's this about a notebook?? :)
No, you don't NEED photoshop for anything.
If you wanted to make custom menubars and images, then photoshop/GIMP or something is necessary, but it's not something you absolutely must do.
All of your codes are based off of the names you give to your parts of the HTML.
For instance,
would be #stories in your CSS.
I would suggest going here: http://www.w3schools.com/html/html_tables.asp
Learn how to make a table, name all the parts of it, and then change it to look the way you want. It's a cool tool, and it's nice to know how it works.
Feel free to PM me if you need help.
Some cool tricks I've discovered:
If you want to use text wrapping on an item, make it a div or span (
IMG
)
and use float:right; or float:left; to make text wrap around it.
When putting text inside a box, it often sits right against the edge, or against the border, and is a little hard to read.
Adding border: solid 2px transparent; to a given text div will fix that.
Add a border?
border: solid 3px #000000;
Or make the text align right/left?
text-align:right; text-align:left;
Is that what you're trying to do? And what's this about a notebook?? :)