WDD Learning Modules

CSS Fonts - Ponder activities

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 Google Fonts or Font Squirrel, change the default font styles to fonts styles of your choice. Use one type of fonts for the heading tags and another for the paragraphs. Use the styles.css file inside the styles folder to add the CSS required to do this.