HTML Styles & Colors Explained — Inline CSS Guide

HTML styles use the style attribute to add visual flair to elements — changing colors, fonts, backgrounds, and borders directly in your markup.

What You’ll Learn

By the end of this tutorial, you’ll know how to use inline CSS to change text color, font, size, and alignment; add background colors and gradients; apply borders with rounded corners; and understand the different color formats available.

Why Styling Matters

Remember the HTML pages you built in the previous tutorials? They worked — headings, paragraphs, links, images — but they looked plain. Black text on a white background. No colors, no spacing, no personality.

Security note: Understanding Html Styles helps build more secure applications — a core principle at DodaTech, where tools like Durga Antivirus Pro and Doda Browser rely on solid implementation practices.

CSS (Cascading Style Sheets) is what makes HTML pages look good. Think of HTML as the skeleton and CSS as the skin and clothes. Same structure, but CSS makes it beautiful.

Real-world use: Every design choice on every website — Amazon’s orange buttons, Google’s clean white interface, Doda Browser’s dark mode — all CSS. Without it, every site would look like a 1990s text document.

Where This Fits in Your Learning Path

    flowchart LR
    A["Links & Images"] --> B["**Styles & Colors**"]
    B --> C["Lists"]
    C --> D["Tables"]
    D --> E["Forms & Inputs"]
    E --> F["Full CSS Course"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style F fill:#22c55e,stroke:#16a34a,color:#fff
  

What is Inline CSS?

Inline CSS means writing style rules directly inside an HTML tag using the style attribute. The format is:

<tagname style="property: value;">Content</tagname>

• Property — what you want to change (e.g., color, font-size, background)
• Value — how you want to change it (e.g., blue, 18px, yellow)

You can add multiple properties by separating them with a semicolon:

<p style="color: blue; font-size: 18px; background: yellow;">
  This paragraph is blue text, 18px font, on a yellow background.
</p>

Think of it like dressing up your HTML elements. The tag says “I’m a paragraph,” and the style attribute says “Make me blue with size 18 font on a yellow background.”

Colors — Making Things Pop

HTML supports several ways to specify colors. Here are the most common:

<p style="color: #ff6600;">Orange text using HEX code</p>
<p style="color: rgb(0, 128, 0);">Green text using RGB</p>
<p style="background: rgba(255, 0, 0, 0.2);">Faint red background using RGBA</p>

Which Color Format Should You Use?

• HEX (#ff6600) is the most popular — it’s compact and precise. Most designers use HEX.
• RGBA is great when you need transparency (the A stands for alpha, or opacity). A value of 1 is fully opaque, 0.5 is 50% transparent, 0 is invisible.
• Named colors are limited to 140 names but are great for learning since they’re easy to remember.

Backgrounds

Change the background of any element using background-color or the shorthand background:

<div style="background-color: lightblue; padding: 10px;">
  Simple light blue background
</div>

<div style="background: linear-gradient(to right, #ff6600, #ff00cc); color: white; padding: 10px;">
  Gradient from orange to pink
</div>

Gradients let you blend multiple colors. linear-gradient(direction, color1, color2) is the basic syntax. Replace to right with to bottom, 135deg, etc. to change the direction.

Fonts — Making Text Readable and Beautiful

Control how text looks with font-related CSS properties:

<p style="font-family: Arial, sans-serif;">Arial font (clean and modern)</p>
<p style="font-size: 24px; font-weight: bold;">Big and bold text</p>
<p style="font-style: italic; text-align: center;">Centered italic text</p>
<p style="text-decoration: underline;">Underlined text</p>

Font Properties Explained

Note about font-family: Always provide a fallback font. If the user doesn’t have Arial installed, the browser tries sans-serif next:

<p style="font-family: 'Segoe UI', Arial, sans-serif;">Multiple font fallbacks</p>

Browsers on different operating systems have different fonts installed. The fallback ensures your text still looks good.

Borders

Borders go around elements. They have three parts: width, style, and color:

<!-- Solid black border -->
<p style="border: 2px solid black;">Solid border</p>

<!-- Dashed red border -->
<p style="border: 3px dashed red;">Dashed red border</p>

<!-- Rounded corners with border-radius -->
<p style="border: 2px solid #4caf50; border-radius: 8px; padding: 8px;">Rounded corners</p>

Border Properties

border-radius is especially useful — with a value of 50%, it turns a square element into a circle:

<div style="width: 100px; height: 100px; background: #3498db; border-radius: 50%;"></div>

Inline vs External CSS

Inline CSS is great for learning and for one-off styles, but for real projects, you’ll use external CSS (a separate .css file). Here’s why:

Example of external CSS:

<!-- In your HTML file's <head> -->
<link rel="stylesheet" href="styles.css">

/* In styles.css */
p {
  color: blue;
  font-size: 18px;
}

We’ll cover external CSS in depth in our CSS tutorial section. For now, inline styles let you experiment without setting up extra files.

Common Mistakes

1. Forgetting the Semicolon Between Properties

<!-- ❌ Wrong: no semicolon between properties -->
<p style="color: red font-size: 18px;">Text</p>

<!-- ✅ Correct: semicolon separates each property -->
<p style="color: red; font-size: 18px;">Text</p>

2. Misspelling Property Names

<!-- ❌ Wrong: typo in property -->
<p style="colour: red;">Text</p> <!-- CSS uses "color" (US spelling) -->

<!-- ✅ Correct -->
<p style="color: red;">Text</p>

CSS uses American English spelling: color, not colour.

3. Not Providing Font Fallbacks

<!-- ❌ Wrong: if the font is missing, it falls back to the default -->
<p style="font-family: 'MyCustomFont';">Text</p>

<!-- ✅ Correct: provide fallbacks -->
<p style="font-family: 'MyCustomFont', Arial, sans-serif;">Text</p>

4. Using Too Many Different Colors

<!-- ❌ Wrong: rainbow effect looks unprofessional -->
<p style="color: red;">Section 1</p>
<p style="color: green;">Section 2</p>
<p style="color: blue;">Section 3</p>
<p style="color: orange;">Section 4</p>

Stick to 2-3 colors on a page for a cohesive design. Use a consistent color palette.

5. Forgetting Padding Inside Elements with Borders

<!-- ❌ Wrong: text touches the border -->
<p style="border: 2px solid black;">My text touches the edge</p>

<!-- ✅ Correct: padding creates space between text and border -->
<p style="border: 2px solid black; padding: 8px;">Now there's breathing room</p>

Try It Yourself

Edit the styles in this sandbox — change colors, fonts, try a gradient, or add rounded borders:

Try changing: the gradient direction from 135deg to to left, or change the HEX colors to named colors like tomato or skyblue.

Practice Questions

Q1: How do you add multiple CSS properties in an inline style?

Q2: What’s the difference between HEX (#ff0000) and RGBA (rgba(255,0,0,0.5))?

Q3: What property makes corners round on a box?

Q4: Why should you provide multiple fonts in font-family?

Q5: What’s the downside of inline CSS?

Challenge

Create a “Business Card” page that includes:

• A <div> with a gradient background and rounded corners
• A name heading with a specific font and color
• A job title with italic styling
• Contact info listed with a colored left border
• At least one element with a box shadow (research box-shadow property)

Real-World Task

Visit a website you like and use your browser’s inspector (right-click → Inspect):

• Find an element with a nice color and note its HEX code
• Look at the font-family used — what’s the primary and fallback font?
• Check if they use gradients, rounded corners, or shadows

Frequently Asked Questions

What’s Next?

You’ve styled your first elements. Now let’s organize content with lists and tables:

What’s Next

Congratulations on completing this Html Styles tutorial! Here’s where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!