CSS Tutorial

I think this tutorial will be very helpful in getting you all on the right path for getting started with external CSS – Use it as a reference!!! My colleague Doris Yee put it together and I think it’s a great way for everyone to become more comfortable with external CSS.

Getting Started with External CSS

1. On your home computer, go to the folder on your desktop you created to store your website files. Refer to the A Server tutorial to refresh your memory on how to stay organized.

2. Within the folder you created on your desktop, create another folder called “public_html”

3. Within “public_html”, create a folder for each of the following: “stylesheets”, “images”, “media”, and “documents”.

Public HTML Screen Shot

An Easy Way to Organize Your Files Locally

4. Other than the “stylesheets” folder, you should already have these folders on your server space already. But since we don’t have one for stylesheets, lets add it!Log into your server space using the SFTP client of your choice (Fugu, Fetch, Cyberduck, Filezilla, etc.)

5. Within public_html, create a new directory called “stylesheets”. This is more of less what you should be seeing (may be different if you’re using a different program).
Organize your folders and files the same!

6. Download and save this .html template and stylesheet onto your computer (not server) in the folder you created and called public_html. Look at the zip and see how it is organized (put the stylesheet in the stylesheets folder and the image in the images folder). Open the index.html and style.css it in the text editor of your choice (Text Wrangler, Textpad, Textmate, etc.)

7. Read the comments that I placed above and below each element. It explains what it is.

8. What you see here is a template homepage that is calling to an external stylesheet. Begin to manipulate it locally on your computer. Change the properties and values of the selectors (elements). Follow this video tutorial that explains CSS syntax and code. If you want to see what it would look like online, keep uploading and overwriting your current index.html on your a-server.

9. Hack my code. In other words, begin to tear my .html and .css apart to the way you want your homepage to look like. Use your new documents as the template for all your secondary pages (i.e. aboutme.html, portfolio.html, contact.html, etc.).

Leave a Reply

You must be logged in to post a comment.