WDD Learning Modules

Classes and IDs

Preparation

Make sure you read through the Prepare section for this topic. You will also need your editor open.

Activity 1

Copy the HTML code below into your own HTML file. You may already have this HTML file associated with a CSS file if you did a previous learning module which used it. If not just use the HTML below to start a new file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All About Me</title>
<link rel='stylesheet' href='styles/styles.css>
</head>
<body>
<h1>About Me</h1>
<img src="https://cdn.pixabay.com/photo/2016/03/26/17/44/college-1280964_1280.jpg">
<h2>Sue Smith</h2>
<h2>Suzy</h2>
<p>Howdy ya'll. Let me introduce myself. I'm married to my eternal companion, Fred, and have 6 wonderful children. I am from Houston, TX. It is always hot (or cold) here, but it can be a wonderful and exciting place.</p>
<p>I have been a member of the church of Jesus Christ of Latter-day Saints for 20 years. The things I love about the church are, Jesus Christ, prophets, etc.</p>
<p>Currently, I am a teacher and love to work with young children. I am pursuing a masters of education and plan to become a principal. I love technology, especially building websites. Watching weird code turn into beautiful and amazing web pages can be very exciting.</p>
<p>I enjoy doing a lot of things. I welcome getting to know all of my classmates. Thank you for looking at my web page.</p>
</body>
</html>

Add classes or and ID to certain elements of the page and use them as selectors in CSS to make changes to those elements. Some ideas: You could target just the middle paragraph and not the other two or you could emphasize the name h2 in some way, but not the nickname h2.