Goal

The goal of this exer­cise is to demon­strate and doc­u­ment speci­ficity as it applies to CSS style rule conflicts.

Objective

The objec­tive of the exer­cise is to layer styles to an HTML doc­u­ment and make a visual obser­va­tion that sup­ports a clear acknowl­edg­ment of behavior.

Background

• Rob­bins, Chap­ter 5, p 69–104
• Rob­bins, Chap­ter 11, p 207–224
• Rob­bins, Chap­ter 12, p 225–264
• Rob­bins, Chap­ter 13, p 265–304
• http://​cssspeci​ficity​.com/#
• https://​css​-tricks​.com/​s​p​e​c​i​f​i​c​s​-​o​n​-​c​s​s​-​s​p​e​c​i​f​i​c​i​ty/
• http://​cod​ing​.smash​ing​magazine​.com/​2​0​1​0​/​0​4​/​0​7​/​c​s​s​-​s​p​e​c​i​f​i​c​i​t​y​-​a​n​d​-​i​n​h​e​r​i​t​a​n​ce/
• http://​www​.smash​ing​magazine​.com/​2​0​0​7​/​0​7​/​2​7​/​c​s​s​-​s​p​e​c​i​f​i​c​i​t​y​-​t​h​i​n​g​s​-​y​o​u​-​s​h​o​u​l​d​-​k​n​ow/

Exercise

Using the files pro­vided, recre­ate the basic lay­out by attach­ing the fol­low­ing style sheets sequen­tially, cre­at­ing and sav­ing each addi­tion as a new document.

HTML	CSS
01exercise01_reset.html	reset.css
02exercise01_text.html	text.css
03exercise01_960_12_col.html	960_12_col.css
04exercise01_color.html	color.html

In con­clu­sion, you should be able to open each HTML file in a browser and see how each file is pro­gres­sively altered by the addi­tion of the CSS rules. The final file should look sim­i­lar to fig­ure 1.

• The fol­low­ing rubric posted on D2L will deter­mine exer­cise score: Exer­cise Grading

Techniques

Mark up, selec­tor, dec­la­ra­tion, prop­er­ties, val­ues, validator,

Materials

com­puter, web browser, Dreamweaver, Source files: exer02_01_source_files.zip