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
# document hierarchy
# multiple selectors
# contextual selectors
# creating a class
# class vs. id
# cascade sample
# add <div> tags - 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. This is a web page that begins as a very simple HTML document with no CSS styling, as the semester progresses we will add code to the CSS file so that by the end of the semester the "live site" has a complex layout, with colors, fonts, and features that improve page appearance and functionality. I have provided 2 "live sites"options for you to choose from.
- Live Site option 1 - Lesson 2 from "Business of Web Design. Most students will use this page. You will be working on lesson 2 of the "live site" I will be using Lesson 1 from this site in the DVD demonstrations.
Here is a link to the "Business of Web Design" site in it's original form with tables, Javascript and code errors. If you are feeling brave you can view the code and see how long and complicated it is. Thank goodness we have the cleaner code of HTML5 and CSS3 which will allow us to create the same look for the page with much simpler code.
Here is the simple HTML file you will use for the live site assignments. Click on the link below, view the source code, and copy and paste it into a new .html file which you name live-site.html""Business of Web Design" course Lesson 2
Live site option 2 - a lesson from an old version of my "Creating Web Pages with HTML" site. If you want more of a challenge, then this may be a good option. Choose this site if you want to be able to figure things out on your own, without having a video demonstration that shows you exactly what to do.
Here is the "Creating Web Pages with HTML" site in it's original form with tables, Javascript and code errors. You may want to view the code and see how long and complicated it is. We will not be using this code but I wanted you to see it.
Here is the simple HTML file you will use for the live site assignments. Click on the link below, view the source code, and copy and paste it into a new .html file which you name live-site.html" "Creating Web Pages with HTML class" Lesson - 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 and a contextual selector. Surround the page content with either <div> tags or semantic tags you learned in HTML5. 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
# pseudo-classes [1]
# pseudo classes [2]
# pseudo classes [3]
# 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 (all 3 types)
* 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
# review of block vs inline elements
# class file/folder strucutre
# 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. - Next create a homework page which you will use each week to point to your new assignments. Here is a copy of a sample homework page can use as a model for your page. Save this file as "homework.html" and save it in the CSS folder (not the live folder or the samples folder).For the CSS lesson you need to create these links:
If you chose to use the "Business of Web Design" lesson as your example do this: - As you review my homework sample you will notice that the assignments for the entire class are listed on the page, but the only active links are for lesson 2 CSS. That is exactly what I would expect at this stage of the class. Each week links will be activated as you complete additional assignments.
- Please upload the files 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. - Register the URL of the page - this is a VERY IMPORTANT STEP - Register HW page form
- After submitting the form your name and the URL for your homework page will appear on this page, http://www.sonic.net/%7Ewebclass/work/css/xhtml.html. I will use this page to grade your work and to create a "student work" page that lists all students enrolled in the class and contains a links to their homework page.
- That is all you need to do. After the work has been graded I will send a note to the class mailing list.
- If you are confused about any of the steps in this lesson please send me an email with your full name, class name, section #, and a detailed description of the problem. If you have a code question you must load the page onto the Web and include the URL in your email.
