-
Expand by clicking on the topic name
Example: Objectives, Assignments and Due Dates, Required Readings, Required Tutorials, and so on or click on the Open All link located above the first blue area on the right of the screen.
- Scroll down to read Professor's Class Notes and Comments.
These are essential to your success in the course.
Objectives
Chapter 3: Configuring Color and Text with CSS
- Describe the evolution of style sheets from print media to the Web
- List advantages of using Cascading Style Sheets
- Configure background and text color on web pages
- Create style sheets that configure common color and text properties
- Apply inline styles
- Use embedded style sheets
- Use external style sheets
- Configure element, class, id, and descendant selectors
- Utilize the "cascade" in CSS
- Validate CSS
Assignments and Due Dates
Assignments and Due Dates: View
Required Readings
Web Development & Design Foundations with HTML5 - 7th Edition by Terry Felke-Morris
Chapter 3: Configuring Color and Text with CSS
Appendix E: CSS Property Reference
Required Tutorials
- Text's Companion Website - VideoNotes: http://wps.pearsoned.com/ecs_felke_webdevdesf_7/
(Page number indicates related page in the textbook)
- Chapter 3: External Style Sheets (Page 104)
- Chapter 3: CSS Validation (Page 113)
Note the text covers using jigsaw.w3c.org which is good. However, all validation for this course must be done through either Google or FireFox's Web Developer Tool Bar. (see below). This allows for a more complete validation especially when checking CSS.
- Creating Readable CSS Code
CSS code should be well documented and easy to read. Although class exercised do not require these specifications, they will be mandatory for the final project.
http://coding.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/
Sample Code and/or Data Files
- Textbook's Chapter and Web Site Case Study Data Files
- http://wps.pearsoned.com/ecs_felke_webdevdesf_7/243/62410/15977113.cw/index.html
- Click on Student Resources
Click on Student Data Files in left margin
- Download the Zip file for the current chapter
- Extract/unzip the file
- Chapter files will be visible or accessible by opening various folders
- "If" needed for this chapter's Case Study Hands-On, the files for Pacific Trails are located in the casestudystarters/pacific folder.
Software
No new software.
Chapter Questions and Test Reviews
Chapter 3 Reviews:
Although no points are earned for the Quizlet tests, it is highly recommended that students know the answers. It is an excellent way to prepare for both the weekly quizzes and major tests.
- Chapter Review Questions
- Author's Chapter Review Activities (Quizlets)
Test 1 Review Sheet: Test 1 Review
It is highly recommended that students work through the test review sheets as each chapter is studied. It will help with learning the material and may reduce the amount of study time required for the major tests.
Professor's Class Notes and Comments
This week...
Hopefully, this will be an exciting week for you as start to learn about CSS (Cascading Style Sheets). Style sheets are a very powerful tool. Imagine a web site (500 web pages) maybe for greeting cards. The site needs to change its look for each holiday season. For Valentines, the site has red accents. For Halloween, it is black and orange. If color changes need to made to each of the 500 pages, it could take a long time and there is a great deal of room for error. With external style sheets, the change could be made in one place and all 500 pages would be updated. What a time saver!
As you will learn, there are three types of styles: inline: attached to one tag, embedded: attached to one web page, and external: can be attached to multiple web pages.
In this class we will use external style sheets exclusively for all assignments.
Chapter 3:
p. 86
CSS Colors from W3Schools.com http://www.w3schools.com/cssref/css_colors_legal.asp
Color Equivalents Table: http://meyerweb.com/eric/css/colors/
p. 93
Font Names with Spaces
When using a typeface with more than one name such as Times New Roman, the name must be in quotes. On page 98, the coding examples for h1 and h2 selectors provide good examples.
Serif vs Sans Serif Fonts
For web pages, sans serif fonts are recommended for the main body of text. Serif may be used for titles and headings. Do a quick check of this following article to have an understanding of the two. In this course, the main body of text on web pages must be a sans serif font. http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle/
p. 110, FAQ
Comments in the CSS file. The delimiters for
comments are
/" Comment "/
All CSS files in this course MUST be well documented. There must be a heading section with the information indicated in the example. This includes the project, file name, last changed, author, color codes, and typography information. The actuals selectors must be arranged in a logical manner with identifying comments for each area. Below is a revised version
of a portion of trillium.css
p. 113, 3.10 CSS Validation
CSS Validation will also be done with the FireFox/Chrome AddOn called Web Tool Bar. Open the web page in FireFox/Chrome. Then from the menu, click on the dropdown next to tools and then select Validate CSS (viewing file on Apollo) or Validate Local CSS (viewing file on your computer).
Even one CSS or XHTML error will prevent work from being graded. When grading is done, the web page is viewed in FireFox and/or Chrome. Using the Web Developer toolbar, the Validate HTML and Validate CSS options are chosen for ALL pages in the site. See the screenshot.
If any of the pages do not validate, the assignment is not graded. If time permits during the late/resubmit period the assignment may be resubmitted for a maximum of 90% credit. If it is past the final deadline, it can no longer be submitted for credit. Assignments (not quizzes or tests) may be submitted multiple times, but only the last submission will be graded.
If FireFox's Web Developer's CSS Validation is set to CSS2.1. It is a simple fix to update it to CSS3. In the Developer Tool Bar, click on Tools | Edit Tools. Select Validate CSS and then click on the Edit button. If not selected, choose the radio button next to URL. Change the URL as indicated below. Click on OK and the close the Tools dialog box. You may need to restart the browser. This also seems to alleviate some of the errors associated with webkit and moz (These extensions will be used in WSD05 Assignment.)
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=
http://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=
Appendix E: CSS Property Reference
Chapter Wrap Up
Study the Material: (Note: Although this outline may not be listed in future weeks, it is recommended that it be followed on an ongoing basis)
- Read the chapter, watch the VideoNotes, read the Professor notes in the LMS, and check the text updates page.
- Read the Assignment Specifications also located in the LMS.
- Complete the Assignments. Upload the web page files to Apollo. Submit the URL in the LMS.
- Review the chapter. Answer the Chapter review questions located in the LMS, use the resources located in the author's Chapter Review (Quizlets) , and check the Test 1 Review Sheet. These items do not need to be submitted for grading.
- Take the weekly quiz (Located in the LMS)
