<< Back

 

CSS EXercise

Download the .xsl file and the .xml file and create a new .css file. They all need to “live” in the same folder. Take the XSL file and remove all of the HTML styling and replace it with CSS styling. You are going to create a separate CSS file that will be referenced by your .xsl file. Make these visual enhancements using CSS, but you will also have to update your .xsl file in places where class and id selectors are used. Create comments for all of your CSS statements. In order to test your CSS, you will “run” the file from  your .xml file.

 

• You need to set up your .xsl file to link out to an external .css file.
• table

Define the border width (900px) and height (100px)

• th and tr
• Define a div that will create a background box under the table, change the color to light green, and make it just stick out around the edges of the table. Here’s some code to get you going:

   

  div {
  width: 9500px;
  height: 200px;
  background-color: yellow;
  box-shadow: 10px 10px 5px #888888;
  }

   

• Using an id selector, create an id for the top p tags, such as “para1” and “para2”. Center the p tag, and pick a color and make the text bold or italics etc.
  
• Apply a shadow to it using text-shadow: 2px 2px;
• Make the text bold using font-weight: bold;
• Go to CSS patterns gallery, and choose one for your background: http://lea.verou.me/css3patterns/
• Go to the w3schools page, and look up a moving animation and insert code into css, you may need to update your div code in your xsl: http://www.w3schools.com/css/css3_animations.asp
• After you’re done with the project, search for the keywords, “css code generator” in Google. Find a site that interests you, and experiment with possibilities.\

 

Above all, be creative! This is a technology where you can really experiment and express yourself.

Submit via discussion board zip file or image for credit.

Due: Saturday April 6th

 

<< Back