CSS Training in Facebook Chat

This is lifted from a Facebook chat I had with a friend as I talked him through the basics of CSS.

So, when you’re coding, you can only code down the page right? But your CSS can make images/areas appear wherever on the actual web page
So you need to keep the constraints of the HTML in place as you code and remember to think of the final page so you’d have something like:


< div id= "sidebar_right" >
Content
< /div >

< div style = "margin-top: -50px; margin-left: 20px; ">
< img src ="picture2.jpg" />



I had to add in lots of spaces to get the code to appear on this page. This text is to be used as an example.

You have to give the pictures negative top margins so that you can pull them up the page instead of being below the sidebar.
The margin-left will move the images to the left of the item to the left of it
Adjust the numbers as needed
Make sense?

Do you know the difference between class and id in CSS?

• id is where identify the div like
• and I reference it using a #
• is ONLY used for one item on the entire site. Which means that you can’t (or shouldn’t) call that id on any other page
• In the CSS, it is referenced as #sample
• can be repeated as many times as you want