Show us some style! CSS makes it happen.

What is CSS? Simply stated, CSS tells browsers how to display the html code (content) you create. HTML was never designed to be a formatting (presentation) tool, but in the early days it was all we had to work with...so style information was included in HTML. Designers were not happy, because it required too much time and work to add style information with every piece of HTML code they created. Thankfully, W3C (World Wide Web Consortium) created CSS - Cascading Style Sheets. This design tool separates the CONTENT from the PRESENTATION. CSS can be done three ways: inline, internal, and external.

Step 1- Let's get started learning CSS

Before you create your own CSS to go with your HTML documents, you should understand a bit more about what CSS is and how it works. There is a great tutorial that shows the basics very clearly! The tutorial has many parts...and that would be too much now. We will just work with the first section, and then you can go back to learn more AFTER you finish the beginning work with HTML & CSS.

CSS Basic includes these sections:

Simply navigate your browser to W3Schools.com and go through 'CSS Basic' (the menu is on the left side). When you finish, return here and go on to Step 2.

Step 2- Let's create some CSS to style an HTML document.

Step 3: Upload your files

When you are finished, upload your files - “mypage.html” and "mystyle.css" to your website. Remember that you will need to create a new subfolder, 'css_one', before you upload.

Step 4: Add a link to your "mypage.html".

Following the pattern you learned in the HTML lessons, add a link to your 'mypage.html on your index.html and re-upload your modified index.html to the server. Be sure to test your links to make sure everything works properly and it looks like it should.

Step 4: Turn in your work

Send an email to scotswebteach@gmail.com informing me that you have completed the CSS Lesson and that it is ready for grading.

Congratulations! You are ready to move on! Ask the teacher for your next project.