Question

Write CSS rules that make each level of headings from heading 1 to heading 6 a different color and size.
usable in replit
Answered by GPT-4o mini
Certainly! Below are CSS rules that style each heading level (from `<h1>` to `<h6>`) with a different color and font size. You can place this CSS in the `<style>` tag of your HTML document or in a separate CSS file when working in Replit.

```css
h1 {
color: #4A90E2; /* A blue color */
font-size: 36px; /* Size for H1 */
}

h2 {
color: #D0021B; /* A red color */
font-size: 30px; /* Size for H2 */
}

h3 {
color: #F5A623; /* An orange color */
font-size: 24px; /* Size for H3 */
}

h4 {
color: #7ED321; /* A green color */
font-size: 20px; /* Size for H4 */
}

h5 {
color: #9013FE; /* A purple color */
font-size: 16px; /* Size for H5 */
}

h6 {
color: #50E3C2; /* A teal color */
font-size: 14px; /* Size for H6 */
}
```

### Usage

1. If you're using Replit, create a new HTML file (e.g., `index.html`) and add the following HTML structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Styles</title>
<style>
/* Your CSS goes here */
h1 {
color: #4A90E2;
font-size: 36px;
}

h2 {
color: #D0021B;
font-size: 30px;
}

h3 {
color: #F5A623;
font-size: 24px;
}

h4 {
color: #7ED321;
font-size: 20px;
}

h5 {
color: #9013FE;
font-size: 16px;
}

h6 {
color: #50E3C2;
font-size: 14px;
}
</style>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
```

2. Run the code, and you should see each heading styled with its corresponding color and size.

Feel free to adjust the colors and sizes as needed to match your desired design!
There are no human answers yet. A form for humans to post answers is coming very soon!