🐾 Inline CSS Exercise: Style Apollo the Cat

In this activity, you'll practice applying inline CSS styles using the style attribute inside HTML tags, just like you would in a platform like Canvas or WordPress.

You'll be styling a mini web page all about Apollo, a gloriously fluffy British Shorthair cat who just happens to be a social media star... and the grandfather of my cat Vladimir.

---

Exercise Objectives

By the end of this exercise, you will be able to:

• Apply CSS styles using the style HTML attribute.
• Navigate between the Visual and HTML (code) views in Canvas’s text editor.
• Use basic CSS properties like color, background-color, padding, font-size, border, and width.
• Understand the difference between inline, internal, and external CSS.

---

What Is Inline CSS?

Inline CSS refers to styles added directly inside an HTML tag using the style attribute.

<p style="color: darkblue;">This paragraph is styled using inline CSS.</p>

This method is useful when you're:

• Working in a content editor like Canvas, WordPress, or email.
• Making quick, targeted changes without access to a full stylesheet.
• Prototyping or learning how styles affect elements in real-time.

---

What Is an Attribute?

In HTML, an attribute gives extra information about an element.
Attributes appear in the opening tag and follow this format:

<tag attribute="value">Content</tag>

The style attribute is just one of many—others include href, src, alt, and class.

---

Inline CSS: Strengths vs. Weaknesses

✅ Strengths

• Simple and direct. Good for short snippets or content management platforms like Canvas or WordPress.

• No need to write a separate CSS file.

• Great for learning, prototyping, or quick design changes.

• Can override external or internal styles.

⚠️ Weaknesses

• Not scalable. All styles must be repeated on every element and don't benefit from the cascade or inheritance.

• Makes your HTML cluttered and harder to maintain.

• Doesn't support advanced CSS features like grid/flex, pseudo-classes, or media queries.

---

What You'll Do

1. Start with a plain HTML file about Apollo (provided).

2. Choose an image of Apollo and add it to your post.

3. Follow along as I demonstrate how to add style attributes to tags like <h1>, <p>, <img>, <section>, <ol>, and more.

4. Use CSS properties such as:

   • color, font-family, text-align
   • padding, margin, line-height
   • width, border, background-color
   • max-width, float, list-style-type

5. Make your layout visually appealing and well-spaced.

6. At the bottom of the file, complete the final challenge.

---

Final Style Challenge

Near the bottom of the code, you’ll see this:

<blockquote>
   “Follow your dreams... and always look fluffy doing it.”
   <cite>— Apollo</cite>
</blockquote>

Your job:
Use the style attribute to style this quote however you want. Try playing with:

• Font styles
• Alignment
• Colors
• Spacing
• Anything else that feels expressive

---

Have fun, get creative, and remember—fluffy is always in style!