Lab1 ( hand in Tuesday 9/13— print your code and e-mail me the file) . You can use class today and Tuesday to work/ask questions if you need to.
- Change all presentational markup (<font> <em>, colors, etc.) to CSS rather than HTML. Use an embedded ("internal") style sheet.
- Make the following rules for the h3 and h4 tags: Verdana, italic, background color is #ff0. Font sizes are h3=1em, h4=.8em
- Turn off the bullets (Zeldman p. 178) and replace them with this image:
- Use classes as explained to format the paragraph about classes. You will need to add at least one XHTML tag to do that.
- Be efficient in combining selectors (grouped selectors), name a generic font-family and add pseudo-classes for the link.
- Include the DOCTYPE and adjust the code accordingly.
- Follow other instructions written on the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<meta http-equiv="Content-type" content="text/html;
charset=UTF-8" / >
</head>
<body bgcolor="green">
<h1><font color="008080" face="Arial">Intro to CSS </font></h1>
<h2><font color="600000" face="Arial">Why use style sheets:</font></h2>
<ul>
<li><font face="Courier">HTML is inelegant.</font></li>
<li><font face="Courier">Page loading is quicker.</font></li>
<li><font face="Courier">Presentation is separated from structure. </font></li>
<li><font face="Courier">They are standards-based and can also be used to style XML, etc. </font></li>
</ul>
<h2><font color="600000" face="Arial">Why not use them:</font></h2>
<ul>
<li><font face="Courier">There really aren't any reasons.</font></li>
<li><font face="Courier">Browsers still render them differently, so it can be frustrating.</font>
<li><font face="Courier">You have to learn a different type of coding that's not a markup language or scripting, exactly. </font></li>
</ul>
<h3>Part 2</h3>
<h4>Classes</h4>
<p>By using CSS classes, you can change the display properties within a particular element. For example, display this sentence in Courier font with a green background, but leave the rest of this paragraph with a paragraph style of Arial, black and a background color of light blue. Use a class attribute to create the effect that matches what is being said in this paragraph.</p>
<p>This paragraph is being displayed in italics with a gray background.</p>
<h2>Pseudo-classes</h2>
<p>Create a link to the La Salle home page with the following attributes:</p>
<ol>
<li>Georgia font and generic font family</li>
<li>bold text</li>
<li>no text decoration</li>
<li>the color of your choice for link, visited, hover and active (make sure hover is noticeable)</li>
<p><a href=http://www.lasalle.edu>La Salle University</a></p>
<p><font color="006060">Submitted by:</font> <em>Place your name here</em></p>
</body>
</html>
