HTML Styles

The style attribute allows you to apply CSS directly to HTML elements. While inline styles are useful for quick tweaks and dynamic styling, external stylesheets are generally preferred for maintainability and performance.

Inline Styles with the style Attribute

The style attribute applies CSS directly to an individual HTML element. The value is a string of CSS property-value pairs separated by semicolons. Each property is followed by a colon and its value.

Inline styles have the highest specificity (except for !important), meaning they override styles from external stylesheets and style tags. This makes them useful for testing and dynamic styling with JavaScript, but problematic for maintainability.

Use inline styles sparingly. They mix presentation with content, making code harder to maintain. They can't be reused across multiple elements, and they make it difficult to implement consistent design changes across a site.

<!-- Basic inline styles -->
<p style="color: blue; font-size: 18px;">Blue text at 18px.</p>

<!-- Multiple style properties -->
<div style="
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
">
  Styled container
</div>

<!-- Inline styles on different elements -->
<h1 style="color: #1a1a1a; font-weight: 700;">Heading</h1>
<p style="line-height: 1.6; margin-bottom: 1rem;">Paragraph</p>
<a href="#" style="color: #0066cc; text-decoration: underline;">Link</a>

Internal Stylesheets with <style>

The <style> element defines CSS rules within an HTML document. It's placed in the <head> section and can style multiple elements using selectors. This is better than inline styles because styles can be reused and are separated from content.

Internal stylesheets are useful for page-specific styles that don't need to be shared across multiple pages. They keep all page-related code in one file, which can be convenient for single-page projects or email templates.

However, internal stylesheets still mix presentation with content at the document level, and they can't be cached separately by browsers. For multi-page websites, external stylesheets are more efficient.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal Stylesheet Example</title>
  
  <style>
    /* Styles for this page only */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    h1 {
      color: #2c3e50;
      border-bottom: 3px solid #3498db;
      padding-bottom: 10px;
    }
    
    .highlight {
      background-color: #ffeb3b;
      padding: 2px 4px;
    }
    
    .btn {
      display: inline-block;
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
    }
    
    .btn:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <h1>Page Title</h1>
  <p>This text has <span class="highlight">highlighting</span>.</p>
  <a href="#" class="btn">Button Link</a>
</body>
</html>

External Stylesheets with <link>

External stylesheets are separate .css files linked to HTML documents using the <link> element in the <head>. This is the best practice for most websites because styles can be shared across multiple pages and cached by browsers.

When you update an external stylesheet, the changes apply to all pages that link to it. This makes site-wide design changes easy and ensures consistency. Browsers can cache the CSS file, improving performance for repeat visitors.

You can link multiple stylesheets to a single page. This is useful for organizing styles (e.g., separate files for layout, typography, and components) or loading different styles for different media (print, screen, mobile).

<!-- HTML file linking to external stylesheet -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External Stylesheet Example</title>
  
  <!-- Link to external stylesheet -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Link to multiple stylesheets -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/layout.css">
  <link rel="stylesheet" href="css/theme.css">
  
  <!-- Conditional stylesheet for print -->
  <link rel="stylesheet" href="print.css" media="print">
</head>
<body>
  <h1>Content Here</h1>
</body>
</html>

<!-- styles.css file (separate file) -->
/*
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
  font-size: 2.5rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}
*/

CSS Specificity and the Cascade

When multiple CSS rules apply to the same element, specificity determines which rule wins. Inline styles have the highest specificity, followed by IDs, classes, and element selectors. More specific selectors override less specific ones.

The cascade means that when specificity is equal, the rule that appears last wins. This is why the order of your stylesheets matters—later stylesheets can override earlier ones.

Avoid using !important to override styles. It breaks the natural cascade and makes debugging difficult. Instead, use more specific selectors or reorganize your CSS structure.

<!-- HTML -->
<p id="unique" class="highlight" style="color: purple;">Text</p>

<!-- CSS specificity example -->
<style>
/* Element selector (specificity: 0,0,1) */
p {
  color: black;
}

/* Class selector (specificity: 0,1,0) - wins over element */
.highlight {
  color: yellow;
}

/* ID selector (specificity: 1,0,0) - wins over class */
#unique {
  color: blue;
}

/* Inline style (highest specificity) - wins over ID */
/* style="color: purple;" - this wins */

/* !important (avoid using) */
p {
  color: red !important; /* This would win over everything */
}
</style>

<!-- The text will be purple (inline style wins) -->