Lab1 ( hand in 9/6— e-mail me the files) . You can use class today and next Wednesday to work/ask questions if you need to.
- Change all presentational markup ( <em>, colors, etc.) to CSS rather than HTML. Use an embedded ("internal") style sheet. Move any inline styles to that style sheet.
- Make the following rules for the h3 and h4 tags: Verdana, italic, background color is #ff0. Font sizes are h3=1rem, h4=.8rem
- Turn off the bullets (Zeldman Chapter 9 notes or p. 178) and replace them with this image:
using CSS. (Hint: ul {list-style-image: url();} OR ul {list-style-type: none;} and li {background-image: url();} - 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 in each case, and add pseudo-classes for the link.
- Include the HTML5 DOCTYPE but make the code conform to XHTML standards.
- Follow other instructions written on the page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body bgcolor="green">
<h1 style="color:#008080; font-family:Arial;">CSS review</h1>
<h2 style="color:#600000; font-family:Arial;">Benefits of style sheets:</h2>
<ul>
<li style="font-family:courier;">More efficient.</li>
<li style="font-family:courier;">Page loading is quicker.</li>
<li style="font-family:courier;">Presentation is separated from structure. </li>
<li style="font-family:courier;">They are standards-based and can also be used to style XML, etc.</li>
</ul>
<h2 style="color:#600000; font-family:Arial;">Limitations of CSS:</h2>
<ul>
<li style="font-family:courier;">There really aren't any.</li>
<li style="font-family:courier;">Browsers can render them differently, so it can be frustrating.
<li style="font-family:courier;">You have to learn a different type of coding that's not a markup language or scripting, exactly. </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 a:link, a:visited, a:hover and a:active (make sure hover is noticeable)</li>
<p><a href=http://www.lasalle.edu>La Salle University</a></p>
<p style="color:#006060">Submitted by: <em>Place your name here</em></p>
</body>
</html>
