Block and Inline Elements

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 centering some of the elements of the page. Remember there are different ways to do this depending on if the element is inline or block level and you can change the display value if you need to.

Block and Inline Elements

Preparation #

Activity 1 #

Preparation

Activity 1