easy css assignment

profileBruce220
Assignment2.docx
Home>Computer Science homework help>easy css assignment

MAC 172

Assignment 2

10 points

Question#1: Create a stylesheet named home.css to improve the appearance of the home.html page (provided below). Link home.css file to home.html page. Your stylesheet should do the following without any modification to the HTML code:

1. Set the body properties to:

· background-color: lightgray;

· font-family: Verdana, Arial

2. Set the div that has class name header properties to:

· background-color: #80CBC4;

· background-image: url(person.png);

· background-position: right;

· background-repeat: no-repeat;

3. Set the h1 header properties to:

· line-height: 400%;

· text-indent: 1em;

· color: yellow;

4. Set the h1 that has class name mytitle properties to:

· background-color: yellowgreen;

· font-size: x-large;

· border-color: red;

· border-style: dotted;

· border-width: 2pt;

· text-indent: 1em;

5. Set the h2 properties to:

· text-indent: 1.5em;

· color: blue;

6. Set the ul that has class name myservices properties to:

· margin: 15px;

· padding: 15px;

· color: green;

7. Set a tag (<a>) properties to:

· margin: 5px;

· padding: 5px;

· color: yellow;

8. Set a tag (<a>) hover properties to:

· color: red;

9. Set the div that has class name myaddress properties to:

· text-align: center;

· color: red;

10. Set the div that has class name footer properties to:

· text-align: center;

· color: blue;

Home.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>My Website</title>

<link href="home.css" rel="stylesheet">

<meta charset="utf-8">

</head>

<body>

<div class="header">

<h1>Header: Your Full Name</h1>

</div>

<h1 class="mytitle">Learn Basic HTML Online</h1>

<br>

<img src="door.jpg" alt="Door to Path of Light Yoga Studio" width="100%" height="200px" >

<h2>Welcome to my new website</h2>

<p >In this website you will:</p>

<ul class="myservices" >

<li>Learn About me</li>

<li>Register to my wesbite</li>

<li>Login any time</li>

<li>Learn more about HTML and CSS</li>

</ul>

<div class="myaddress">

My address<br>

city state zipcode<br>

888-555-5555<br><br>

</div>

<div class="footer">

Copyright &copy; 2020 My Website<br>

<a href="mailto:[email protected]">[email protected]</a>

</div>

</body>

</html>

Note: Things you need to upload on the blackboard.:

1. Word document that include your code. Add screen shoots of the results you have when your run the code.

2. Source code as notepad or html and css files.

Note: I provided all images you need in the attached folder named images.

Please see next page for the expected outcome.

Another picture from that shows the bottom