Make an html and css file from the code snippets below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Cats</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<article>
<!-- Write your styles in style.css -->
<h1>Cats</h1>
<p>The cat (Felis catus) is a domestic species of small carnivorous mammal.<sup>[1]</sup><sup>[2]</sup> It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family.<up>[4]</up> A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact.<sup>[5]</sup> Domestic cats are valued by humans for companionship and their ability to hunt rodents. About 60 cat breeds are recognized by various cat registries.<sup>[6]</sup> <del>It's been scientifically proven that are smarter than dogs.</del></p>
<h2>Features</h2>
<ul>
<li>Carnivorous</li>
<li>Mammal</li>
<li>domesticated</li>
</ul>
<h2>Common Breeds</h2>
<ul>
<li>Abyssinian</li>
<li>Balinese</li>
<li>Bengal</li>
<li>Birman</li>
<li>Bombay</li>
</ul>
</article>
</body>
</html>Add a style sheet with the code below. Then follow the instructions in the comments:
/*
This new cat website is going live any minute now.
Someone needs to style it quick!
The site has two headings h1, and h2. There is are two lists each with a few list items. ::after
Your goal is add some styles. Write your code below.
*/
/* Add the follow styles to the body */
/* font-family Helvetica */
/* color #333 */
/* background-color #eee */
/* font-size 20px */
/* line-height 1.75 */
/* font-weight 100 */
/* style the article */
/* max-width 800px */
/* margin auto */
/* Style the h1 heading */
/* text-align center */
/* text-transform uppercase */
/* Style the h2 headings */
/* text-decoration underline */
/* Style ul the list */
/* list-style circle */
/* The sup tag represents superscript give it a color */
/* color #090 */
/* We had to delete to erroneous information style del tag */
/* text-decoration line-through */
/* text-decoration-style wavy */
/* text-decoration-color #ff6565 */
/* color #aeaeae */
/* Style all list items: li */
/* padding left and right 1rem */
/* Style the even list items */
/* use this selector: li:nth-child(even) */
/* background-color #ddd */
/* Style the ul */
/* padding 0 */