1. Starting From Scratch, Part 2: CSS
   
2. Don’t Fear Specificity
   
3. If you have not yet completed all 7 steps of the previous assignment, please do so. Step 7 is a Photoshop comp. Please recreate this in HTML and CSS using an external style sheet.
4. I want to see the intermediary step, to check and see if all elements are selected. Turn the background of each element into alternating colors, i.e. background: red;, background: orange;, background: yellow;, so that it’s easy to see that all elements are selected. Try to select them using type selectors and being specific. Writing header nav li {} to target the list items in the navigation element that is in the header. If it is not possible to select it that way, try using pseudo selectors li:first-child{} for example, and if that is not possible, use a class. Avoid using id because it is very powerful, and in complicated style sheets, its overuse can lead to difficulties, requiring the use of the important! to override styles, which is really not something we want to do.
5. Save one page of the assignment in this state and link it to the portal.
6. Once you have your selectors in place, create rules using absolute positioning for each element and make the web page look like your photoshop comp. Don’t worry if you cannot get it to look exactly right.
7. Do the best you can. We will cover CSS layout strategies next week, and you will get a chance to do the exercise again.
8. Here is an example first created in Illustrator and then translated into HTML to start you off. Know that the project requirements have changed, but it gives you an idea.
   
   This assignment uses some CSS3 properties which you will learn about later, but you can play with the CSS3 generators and use these properties now. Click on the picture to see the actual page in HTML/CSS.
   

Grading Criteria

I am looking to see if you are developing the CSS skills to present the content according to your own critical design directives. You need to develop good technique, not for the simple rule assignment you are now doing, but for more complicated rule assignments ahead, when the cascade rears its sometimes ugly head as you try to keep track of all the inheritance and selector issues.

This requires more than knowing the proper method, because the conflicts are not always so easy to manage. Experience will teach you, but that means you have to make mistakes. Try not to make the little mistakes, like leaving out a semicolon, or misspelling a value. Those are a lot like hitting a wall. To prevent from becoming lost, validate often, and you can catch the little mistakes before they compound into a full-blown mess.

You can see in the CSS demos the havoc that broken CSS code brings. One mistake and the whole thing fails to render, or renders incorrectly. This is why I put emphasis on learning to do it right from the beginning, for problems will only compound as the document tree and the number of CSS rules become more complicated.

As for the creative methodology: you are at Parsons. That means you enjoy conceptual and visual problem solving. Be clear and logical in identifying the problem and the solution, but move me in how you implement that. Show me.

I will be grading you on levels of confidence, consistency, creativity, innovation, precision, accuracy, efficiency and the ingenuity by which you are able to solve the problems.