Skip to content

Styling HTML Elements — Complete Guide with CSS

DodaTech Updated 2026-06-06 13 min read

In this tutorial, you'll learn about Styling HTML Elements. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

Every HTML element — links, lists, tables, forms, buttons, images, and icons — can be styled with CSS to look polished and professional. This tutorial teaches you the specific properties and pseudo-classes for each one.

What You'll Learn

By the end, you'll style links (including :link, :visited, :hover, :active in LVHA order), format tables with border-collapse and zebra-striped rows, style form inputs including :focus and :invalid states, build button variants (primary, secondary, danger, sizes), create responsive images with hover overlays, and use Font Awesome, Bootstrap Icons, or inline SVGs for icons.

ℹī¸ Info

Prerequisite: You should understand CSS selectors and the box model. CSS Selectors and CSS Box Model cover what you need.

Where This Fits

flowchart LR
    A["CSS Box Model"] --> B["CSS Flexbox & Grid"]
    B --> C["**Styling Elements**"]
    C --> D["CSS Components"]
    D --> E["Frontend-Ready Developer"]
    style C fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff

Links have four states, styled with pseudo-classes. The order matters — known as LVHA (Link, Visited, Hover, Active):

a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.2s;
}

a:visited { color: #8e44ad; }
a:hover   { color: #2980b9; text-decoration: underline; }
a:active  { color: #e74c3c; }
Pseudo-class When It Applies
:link Unvisited link (default a selector)
:visited User has clicked this link before
:hover Mouse is over the link
:active Link is being clicked

Why LVHA order? If you put :hover after :active, hover would override active when clicking. The mnemonic "LoVe HAte" helps remember: Link, Visited, Hover, Active.

.button-link {
  display: inline-block;
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}
.button-link:hover { background: #2980b9; text-decoration: none; }

Use case: Call-to-action buttons that look like buttons but navigate like links (no form submit).

Styling Lists

Remove default bullets and add custom styling:

/* Full removal */
.no-bullets {
  list-style: none;
  padding-left: 0;
}

/* Custom style with icons */
.fancy-list {
  list-style: none;
  padding: 0;
}
.fancy-list li {
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}
.fancy-list li:last-child { border-bottom: none; }
.fancy-list li::before {
  content: "→ ";
  color: #3498db;
}

List Properties

Property Values
list-style-type disc, circle, square, decimal, lower-alpha, upper-roman, none
list-style-position outside (default), inside
list-style-image url('icon.svg') — image as bullet

Styling Tables

Tables need a few adjustments to look modern:

table {
  width: 100%;
  border-collapse: collapse;   /* Remove double borders */
}

th, td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

th {
  background: #f8f9fa;
  font-weight: 600;
}

/* Zebra stripes */
tr:nth-child(even) { background: #f8f9fa; }

/* Hover highlight */
tr:hover { background: #e8f4fd; }

border-collapse: collapse explained: Without it, each cell has its own border and adjacent cells create double-thick borders. collapse merges them into single borders, giving a cleaner look.

Responsive Tables

.table-wrapper {
  overflow-x: auto;  /* Horizontal scroll on small screens */
}

Wrap your <table> in <div class="table-wrapper"> and it scrolls horizontally on narrow phones.

Styling Forms

Input Fields

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

Focus State — Never Remove outline Without a Replacement

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52,152,219,0.15);
}

Important: Never just do outline: none. That removes the focus indicator for keyboard users. Always replace it with another visible focus style (like the blue border + shadow above).

Validation States

input:invalid { border-color: #e74c3c; }      /* Red border on invalid */
input:disabled { background: #f1f5f9; cursor: not-allowed; }

Checkboxes and Radio Buttons

input[type="checkbox"],
input[type="radio"] {
  accent-color: #3498db;  /* Modern: change the check color */
}

Form Group Pattern

.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
  color: #374151;
}

Why display: block on labels? Without it, the label sits inline beside the input. Block makes it sit above, which is standard for vertical forms.

Styling Buttons

Button Base

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

Variants

.btn-primary   { background: #3498db; color: white; }
.btn-primary:hover   { background: #2980b9; }

.btn-secondary { background: #e2e8f0; color: #1a202c; }
.btn-secondary:hover { background: #cbd5e0; }

.btn-danger    { background: #e74c3c; color: white; }
.btn-danger:hover    { background: #c0392b; }

/* Sizes */
.btn-sm { padding: 6px 14px; font-size: 0.875rem; }
.btn-lg { padding: 14px 32px; font-size: 1.125rem; }

Button Group

.btn-group { display: flex; gap: 0; }
.btn-group .btn { border-radius: 0; border-right: 1px solid rgba(0,0,0,0.1); }
.btn-group .btn:first-child { border-radius: 8px 0 0 8px; }
.btn-group .btn:last-child  { border-radius: 0 8px 8px 0; border-right: none; }

Styling Images

Base — Always Include This

img {
  max-width: 100%;
  height: auto;
}

This prevents images from overflowing their container on small screens.

Image Shapes

.rounded { border-radius: 12px; }
.circle  { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }
.bordered { border: 2px solid #e2e8f0; padding: 4px; }

Hover Overlay Effect

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 12px;
}

.image-container img {
  display: block;
  transition: transform 0.3s;
}
.image-container:hover img {
  transform: scale(1.05);
}

.image-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
}
.image-container:hover::after {
  background: rgba(0,0,0,0.2);
}

Use case: Gallery images that zoom slightly and darken on hover — common in portfolios and product pages.

Adding Icons

Font Awesome

<!-- Add to <head> -->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<!-- Usage -->
<i class="fas fa-star"></i>
<i class="fas fa-heart" style="color: #e74c3c;"></i>

.fa-star { color: #f39c12; font-size: 1.5rem; }

Bootstrap Icons

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<i class="bi bi-check-circle"></i>

Inline SVG (No External Dependency)

<svg viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4M12 16h.01"/>
</svg>

Tip: Inline SVGs are preferred for performance and Accessibility — they don't require an HTTP request and can be styled with CSS.

Common Styling Mistakes

/* ❌ Wrong: hover won't work for visited links */
a:visited { color: purple; }
a { color: blue; }

2. Removing outline Without a Replacement

/* ❌ Breaks keyboard accessibility */
input:focus { outline: none; }

/* ✅ Visible alternative */
input:focus { outline: none; box-shadow: 0 0 0 3px blue; }

3. Not Using border-collapse on Tables

/* ❌ Double borders between cells */
table {  }

/* ✅ Clean single borders */
table { border-collapse: collapse; }

4. Styling Buttons Without cursor: pointer

/* ❌ No cursor change — looks like text */
.btn { }

/* ✅ Pointer cursor signals clickability */
.btn { cursor: pointer; }

5. Using <br> for Form Spacing Instead of CSS

/* ❌ Wrong: markup for spacing */
<input><br><input><br>

/* ✅ Correct: <a href="/frontend/css/">CSS</a> for spacing */
.form-group { margin-bottom: 1rem; }

Security Angle — Form Styling for Phishing Resistance

Well-styled forms with clear visual states (green valid, red invalid, blue focus) help users distinguish legitimate forms from phishing attempts. Security tools like Doda Browser use these visual cues to warn users when a form field looks suspicious or when a connection is untrusted.

Try It Yourself

Experiment with all the element styles:

▶ Try It YourselfEdit the code and click Run

List

Images

Rounded Circle Bordered

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It's tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What's the LVHA order and why does it matter? {{< details "Show answer" >}} LVHA = Link, Visited, Hover, Active. The order prevents hover from overriding active when a link is being clicked. Use the mnemonic "LoVe HAte". {{< /details >}}

Q2: Why should you never remove outline without a replacement? {{< details "Show answer" >}} The outline is the focus indicator for keyboard users. Removing it without adding an alternative (like a box-shadow) makes your site inaccessible to people who navigate without a mouse. {{< /details >}}

Q3: What does border-collapse: collapse do on a table? {{< details "Show answer" >}} It merges adjacent cell borders into single borders instead of double borders, giving tables a cleaner appearance. {{< /details >}}

Q4: How do you make all images responsive by default? {{< details "Show answer" >}} Set max-width: 100% and height: auto on all img elements. Images never overflow their container and maintain aspect ratio. {{< /details >}}

Q5: What's the advantage of inline SVG over icon fonts? {{< details "Show answer" >}} Inline SVGs don't require HTTP requests (faster), can be styled with CSS properties, and are more accessible. They're also sharper at any resolution. {{< /details >}}

Challenge

Build a profile card component:

FAQ

Use :visited pseudo-class. Note that for privacy reasons, browsers limit which properties you can change on visited links (only color, background-color, etc.).

How do I create a responsive table?

Wrap the <table> in a <div style="overflow-x: auto;">. On small screens, the table scrolls horizontally instead of squishing.

Can I use CSS to validate forms?

Yes. input:valid and input:invalid pseudo-classes let you style valid/invalid states. But actual validation still needs HTML attributes (required, type="email") or JavaScript.

Should I use <button> or <a> for call-to-action?

Use <button> if it performs an action (submit, toggle). Use <a> if it navigates. Style them to look the same with CSS.

Why isn't my :hover working on touch devices?

Touch devices don't have hover — the first tap acts as hover, the second as click. Use @media (hover: hover) to apply hover styles only on devices that support it.

FAQ

What is Css Styling?

: Css Styling refers to the core concepts and practices used to build and manage modern web applications. Understanding it is essential for web developers.

Do I need prior experience to learn Css Styling?

: Basic familiarity with web development concepts helps, but Css Styling can be learned step by step even as a beginner.

How long does it take to learn Css Styling?

: With consistent practice, you can grasp the fundamentals in a few days to a week. Mastery takes ongoing practice and real-world projects.

Where can I use Css Styling in real projects?

: Css Styling is used in a wide range of applications — from simple websites to complex enterprise systems, depending on the specific tools and technologies involved.

What are common tools used with Css Styling?

: The specific tools depend on the technology stack, but version control (Git), package managers, and testing frameworks are commonly used alongside most development topics.

FAQ

What is Styling in CSS?

: Styling refers to the CSS properties and techniques used to control how elements are displayed on a webpage. Mastering it helps you build better, more responsive layouts.

Do I need to memorize all CSS properties?

: No. Focus on understanding the core concepts and use reference docs when needed. Practice is more important than memorization.

How do I debug Styling issues?

: Use browser DevTools (F12) to inspect elements, check computed styles, and experiment with values in real time.

Is Styling the same across all browsers?

: Most modern browsers support CSS standards consistently, but always test across browsers for edge cases.

What's the best way to practice Styling?

: Build small projects and experiment with different values. Use online playgrounds like CodePen or JSFiddle for quick testing.

What's Next?

Now that you can style individual elements, learn to build reusable components:

CSS Components
Reusable UI patterns
Responsive CSS
Media queries and breakpoints
Advanced CSS
Filters, animations, advanced selectors

What's Next

Congratulations on completing this Css Styling tutorial! Here's where to go from here:

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

← Previous CSS Visual Effects — Gradients, Shadows, Filters & More Next → CSS Components — Navbars, Dropdowns, Tooltips, Loaders & More

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Css