McKay High School Web Design II Class Site

CSS Pix

CSS Lessons

You played with CSS a little bit in HTML Lesson 3...but how much did you really grasp??? Now you will take a little more careful look at CSS through a tutorial. Each step allows you to "play" with CSS and learn how it works and, hopefully, why it is used. This is self-paced, so you get out what you put in. The more effort you give, the better your CSS project will be and the more you will learn....and that is, I hope, your goal in being here:-)

1: What is CSS?

Cascading Style Sheets (CSS is a language that combines with html documents to define how information appears to the viewer.) There are specific styles that are put directly into html elements, the head of an html document, or in a separate style sheet. A style sheet contains CSS rules and each rule selects an html element, then determine how the elements will be styles.

Why are they called Cascading Style Sheets?

There are three style sheets that can effect how a web page is displayed in a browser:
  • Browser Style Sheets- these are the default settings that come with every browser.
  • User Style Sheets - Anyone who looks at your site is a user. Browsers allow users to set up their own preferences. these settings override the browsers default settings.
  • Author Style Sheets - The web designer...you...are the author of the website. When you add a style sheet, you have created an author style sheet and that will override a user style sheet and the browser default settings.

This all means what????? That the style selections you make will be what the user sees first, then the user settings, and last, the browser default settings.

2. Digging into a tutorial

Now that you have read a tiny bit to hopefully give a basic understanding of how style sheets effect a website, let's roll up our sleeves and create some CSS by using a tutorial. You can use NOTEPAD+ to do the activities.

Save your work on your P drive in a 'CSS-play' folder, so you can keep things straight. Hopefully, when you finish, you will feel comfortable creating and using CSS...because that is a big part of web sites today!

While there are many tutorials we could use, this one at HTML Dog.com is pretty good and fairly easy to follow. Have fun! Try some of the style ideas you see in the tutorial.

You are already familiar with W3Schools and their CSS tutorials, so you can that site as a resource as well to expand your knowledge about CSS.

When you have explored and played a bit (a class period or two) and are feeling a bit more comfortable with CSS, take a little quiz and see how you do.

After you get 80% or more on the quiz, you are ready top move on to your CSS project.

 

 


Contact the Teacher | ©2012 McKay High School