HTML Styles Guide

Learn how to style HTML elements with CSS

Inline Styles

Styles applied directly to HTML elements using the style attribute

Pros: Highest specificity, quick to implement

Cons: Hard to maintain, not reusable

<p style="color: blue; font-size: 16px;">Text</p>

Internal Styles

Styles defined in the <style> element within the document head

Pros: Applies to whole page, better organization

Cons: Only affects single page

<head>
  <style>
    p { color: red; }
  </style>
</head>

External Styles

Styles defined in separate .css files linked via <link> element

Pros: Reusable across pages, best for maintenance

Cons: Additional HTTP request

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Element

Selects all <p> elements

p { color: blue; }

Class

Selects elements with class='intro'

.intro { font-size: 1.2em; }

ID

Selects element with id='header'

#header { background: #333; }

Attribute

Selects elements with specific attributes

input[type='text'] { border: 1px solid #ccc; }

Pseudo-class

Selects elements in special state

a:hover { color: red; }

Separation of Concerns

Keep content (HTML) separate from presentation (CSS)

Good Example

<!-- Good -->
<link rel="stylesheet" href="styles.css">

<!-- Bad -->
<div style="font-size: 14px; color: #333;"><!-- Good -->
<link rel="stylesheet" href="styles.css">

<!-- Bad -->
<div style="font-size: 14px; color: #333;">

Bad Example

<div style="font-size: 14px; color: #333;">Inline styles make maintenance difficult</div><div style="font-size: 14px; color: #333;">Inline styles make maintenance difficult</div>

Specificity

Use classes instead of IDs for styling when possible

Good Example

.button { padding: 8px 16px; }.button { padding: 8px 16px; }

Bad Example

#submit-button { padding: 8px 16px; }#submit-button { padding: 8px 16px; }

Responsive Design

Use relative units and media queries for responsive layouts

Good Example

.container { max-width: 100%; padding: 2rem; }.container { max-width: 100%; padding: 2rem; }

Bad Example

.container { width: 800px; padding: 20px; }.container { width: 800px; padding: 20px; }

Complete Stylesheet Example

/* styles.css */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  background: #2c3e50;
  color: white;
  padding: 20px;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  
  .header {
    padding: 15px;
  }
}/* styles.css */
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  background: #2c3e50;
  color: white;
  padding: 20px;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  body {
    padding: 10px;
  }
  
  .header {
    padding: 15px;
  }
}

Component Styling

/* Card component styles */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
  background: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.card-body {
  padding: 15px;
}

.card-footer {
  background: #f8f9fa;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  text-align: right;
}/* Card component styles */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
  background: #f8f9fa;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.card-body {
  padding: 15px;
}

.card-footer {
  background: #f8f9fa;
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  text-align: right;
}

Utility Classes

/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }

/* Color utilities */
.bg-primary { background: #3498db; }
.text-primary { color: #3498db; }
.bg-secondary { background: #95a5a6; }
.text-secondary { color: #95a5a6; }

/* Responsive utilities */
@media (max-width: 768px) {
  .sm-text-center { text-align: center; }
}/* Utility classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }

/* Color utilities */
.bg-primary { background: #3498db; }
.text-primary { color: #3498db; }
.bg-secondary { background: #95a5a6; }
.text-secondary { color: #95a5a6; }

/* Responsive utilities */
@media (max-width: 768px) {
  .sm-text-center { text-align: center; }
}

CSS Playground

Experiment with CSS styling in our live editor

CSS Examples Preview

Ready-to-use examples covering different styling approaches

Live Preview

Styling Methods

Inline Styles

Styles applied directly to HTML elements using the style attribute

Internal Styles

Styles defined in the <style> element within the document head

External Styles

Styles defined in separate .css files linked via <link> element

CSS Features

ElementClassIDAttributePseudo-class

All examples will be loaded into an interactive editor where you can modify and test them

HTML Styles Guide

CSS Styling Methods

Inline Styles

Internal Styles

External Styles

CSS Selectors

Element

Class

ID

Attribute

Pseudo-class

CSS Best Practices

Separation of Concerns

Specificity

Responsive Design

Practical CSS Examples

Complete Stylesheet Example

Component Styling

Utility Classes

CSS Playground

CSS Examples Preview

Styling Methods

Inline Styles

Internal Styles

External Styles

CSS Features

Continue Learning

HTML Paragraphs

HTML Text Formatting