Description
PRINCIPLES OF WEB DESIGN Sklar Chapter 4 Hands-On Projects CIT-150
3. In this project, you will have a chance to test a few simple style rules on a standard HTML document and view the results in your browser.
a. Using your HTML editor, create a simple HTML file (or open an existing file) that contains
, and
elements. Save the file as csstest1.htm in the Chapter04 folder in your work folder.
b. Add a
c. Add a style rule that uses body as a selector and sets the color property to green, as shown in the following code:
d. Save csstest1.htm and view it in the browser. All of the document text should now be green.
e. Now add a style rule that sets
elements to be displayed in black:
f. Save csstest1.htm and view the results in the browser.
g. Finally, add a style rule that sets a margin for
elements to 30 pixels:
h. Save csstest1.htm and view the results in the browser.
4. In this project, you will have a chance to test a few basic selection techniques on a standard HTML document and view the results in your browser. Save the file and view it in your browser after completing each step.
a. Using your HTML editor, create a simple HTML file (or open an existing file) that contains
,
elements, and so on. Save the file in the Chapter04 folder in your work folder as csstest2.htm.
b. Add a
c. Write a style rule that uses body as a selector and sets the color property to the color of your choice.
d. Find two elements on the page, such as
and
, which can share the same characteristics. Write a single style rule that applies to both elements. Set the color property to red and the margin property to 20px.
e. Find one element that contains another, such as a or element within a
element. Write a descendant selector rule that affects the contained element and sets the color property to green.
5. In this project, you will have a chance to test a few advanced selection techniques on a standard HTML document and view the results in your browser. Save the file and view it in your browser after completing each step.
a. Using your HTML editor, create a simple HTML file (or open an existing file) that contains the elements:
,
,
, and so on. Save the file in the
Chapter04 folder in your work folder as csstest3.htm.
b. Add a
e. Find one element that contains another, such as a or
element within aelement. Write a descendant selector rule that affects the contained element and sets the color property to green.
5. In this project, you will have a chance to test a few advanced selection techniques on a standard HTML document and view the results in your browser. Save the file and view it in your browser after completing each step.
,
a. Using your HTML editor, create a simple HTML file (or open an existing file) that contains the elements:,
, and so on. Save the file in the
Chapter04 folder in your work folder as csstest3.htm.
b. Add a