presented by linda hemenway
CSS Assignment Explained
Listed below are the steps you need to follow to complete this week's assignment. I have allocated 2 weeks for this assignment so you can thoroughly understand the concepts.
- Read Chapter 2 "How CSS Works" pages
27 - 45 in your textbook. The author explains the 3 ways you can add style to your pages, the syntax of a CSS rule, and the use of "multiple" and "contextual" selectors, child selectors, ids and classes.
- Now it is time to use the DVD > css-part1 > start-here.html > CSS lesson. Since we have 2 weeks you do not need to complete all the lessons in one week. Here is a list of what you need to watch the first week.
# 3 types of styles
# syntax
# multiple selectors
# contextual selectors
# creating a class
# class vs. id
# cascade sample - The videos and web pages closely follow the information covered in the textbook. After watching the movie, the Web page will have instructions and code samples you can use. If you hate to type, you can just copy the code from the Web page and paste it into your HTML editor. If you have questions on the general concepts please send me a note, or post it to the class message board.
- Now it is time to create a cascade sampler. This is a Web page which will have 4 styles controlling it, the 3 types of styles you add (inline, embedded and external), and the browser default styles. Watch the "cascade sampler" video, and read the Web page, click on the link at the end of the lesson which takes you to my "cascade sampler".
Then create your own "cascade sampler" making sure you are telling me what style is producing what result. I have provided a sample which you can use as a model, but please do not copy this code and use if for your homework.
Save this file as "cascade-sampler.html" and place it in the "samples" sub folder. Please place a validation icon at the bottom of the page. If you have broken code send me an email with the URL for the page. - After saving the cascade sampler you will need to validate the page.
If your page is on the Web you can simply click on the validation icon at the bottom of the page or go to http://validator.w3.org/ and enter your URL.
If your pages are on your computer you can go to the validator, and select the middle tab near the top of the screen named "Validate by File Upload". This will cause a window to appear with a "Browse" button. Use this button to locate the CSS folder > "samples" sub folder > "cascade-sampler.html" file. - Next you need to work on the "live" site. Open the "clean-code.html" file you used last week and rename it "live-site.html". Add a link tag in the head of the document to allow an external CSS file to control it. Then create a "live.css" file which has at least one multiple selector. If you want to add other CSS styles to this file, feel free, however a multiple selector is all that is required. Place the "live-site.html" page and the "live.css" file into the "live" folder.
- View the "live-site.html" page in the Web browser to make sure the CSS is working, then validate the page.
- Now return to your textbook and read Chapter 2 "How CSS Works" pages
45 - 64. The author discusses a wide range of selectors which you may not know about. In the HTML class we covered the basic selectors that are most frequently used. In this lesson all possible selector options are discussed. When I first read the textbook I was totally impressed by some features and convinced I would never use others. I have found that every concept covered in this chapter can come in handy when you are working on an existing Web site, do not want to change the HTML, and find yourself in a "pickle".
- Next watch these lessons on the DVD > css-part1 > CSS:
# universal selector
# adjacent sibling
# attribute selectors
# pseudo-class
# other pseudo-classes
# pseudo-elements
These lessons show you how to implement the code discussed in the textbook. Please try and recreate all the examples I have on the DVD. - After reviewing the concepts I would like you to create a "selector sampler" that contains the selector name, a CSS code sample, and an explanation written in your own words for what this selector does. The "selector sampler" lesson has a link to an example of what your sampler look like. Please do not copy this file, just use it as a reference. Here is a list of all the selectors you should include in the sampler:
* syntax for a standard selector
* multiple selector
* contextual selector
* contextual selector - child
* explain when to use a class and when to use an id
* universal selector
* adjacent sibling
* attribute selector
* pseudo classes
* other pseudo-class
* pseudo-elements
Save the file as "selector-sampler.html" and place it in the "samples" folder. Please validate the page when you are done. - After the page validates, take a well deserved break.
- The final 2 DVD lessons listed below review the upload and validate process and have a link to every sample file used in the CSS lesson
# upload & validate
# files used in this lesson
- Next update the homework page so that the links in the CSS lesson are activated. You will link to the following files in the following folders:
"live" folder link to "live-site.html" and "live.css".
"samples" folder "cascade-sampler.html" and "selector-sampler.html".
SPECIAL NOTE - I recommend that students name the HTML page
"live-site.html" and the CSS file "live.css". When you view the sample homework pages found at this web site, and included on the DVD you will find I have used a different naming convention for these files. I save my live site with a unique name which reflects the lesson, such as "lesson-css2.html". I do this so that I can have several versions of the live site and show students how it changes from lesson to lesson. You will modify one file from week to week. - Please upload the files (including your modified homework page) onto "student"
Don't forget to use a Web browser to view your homework page and click on the links to make sure the homework page links to the new files you have created. - That is all you need to do. I have created a "student work" page which has links to everyone's homework page. I will use that page to grade your work, and you can also use it to keep track of what everyone is doing.
