1. HTML and CSS HTML is used for the content of web pages CSS is used for the style of the web pages You are going to learn how they can be combined to create web pages that can easily be updated with an improved

2. Today You will : Use an IDE (I ntegrated D evelopment Environment ) Create a web page using divisions Use CSS to control the look of the web page Test and update your webpage

3. Jsfiddle.net Create an account using your school email address (we can not help you recover passwords if you use your own email account) Create a new Fiddle

4. Hide the Side bar Ctrl + Alt + ↑ Start your web page with this html Then Click Save

5. What you should see Your Web Page Your HTML

6. Add some CSS Then Click update

7. Add a Division Then Click update

8. Add CSS Then test it to see the changes Add the CSS for the Paragraph Tag

9. ID’s If you could only add CSS to then you would not be able to have more than one style for a paragraph or division. can have ID’s so that you can make them look different the html for adding an ID is id= followed by the class name

10. CSS for an ID The CSS for a ID starts with # and the ID name (case sensitive) #Side Remember to update

11. Add a second division Click to update

12. Setting up the ID Extension : tiny.cc/bhs-color

13. Your page should look like this

14. Add the positioning data

15. DIV inside a DIV

16. SETTING UP THE CLASS

17. Adding and Image

18. Setting up the ID

19. Your finished web page

20. Share your finished web page on the forum

21. Extension See what else you can add to your webpage Add extra text to the main area Add hyperlinks Change the image Put an image in the div in a div Add borders to the divisions Add a menu http://tiny.cc/bhs-css

22. http://tiny.cc/xh6ucw