WDD Learning Modules

CSS Selectors

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>

Using the styles.css file in the styles folder, try to place a psuedo-class of hover on one of you elements. You can also try the nth-of-type(n) to apply a style to just one of the paragraphs. Or you could apply a style to multiple elements by separating them with commas.