<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<title>CSS Exercises</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script src="script.js"></script>

<!-- You do not need to do anything with script.js right now! Later, we will learn how to add JavaScript to websites! --->

<!-- External CSS example -->

<div id="external">

<h2>Example - External CSS</h2>

<p>The id for this div is an external file, linked in the heat above.</p>

</div>

<!-- inline CSS example -->

<div style="color: rgb(82, 25, 25); background-color: #4dbdc5; text-align: center; border-radius: 20px; padding: 5px 10px;" >

<h2>Example - Inline CSS</h2>

<p>The CSS for this div is defined inline and has on any other part of the page</p>

</div>

<!-- Internal CSS -->

<div class="internal">

<h2>Example - Internal CSS</h2>

<p>This div is being styled through a CSS class placed at the bottom of the body.</p>

</div>

<style>

.internal{

color:ghostwhite;

text-align: center;

background-color: #444;

margin-top: 20px;

border-radius: 10px;

padding: 40px;

width: 50vw;

margin: 20px auto;

}

</style>