HTML <style> Element

Publish in HTML Tutorial el 25/05/2025 16:40

The <style> HTML element contains style information for a document, or part of a document. It contains CSS rules that specify how elements should appear on the page. The <style> element is typically placed inside the <head> section of an HTML document, though it can appear anywhere in the document.

Key characteristics of the <style> element:

Contains CSS rules that apply to the current document
Can be used in the <head> or <body> (though <head> is recommended)
Supports media queries with the media attribute
Can be scoped to specific parts of the document (though scoped attribute is deprecated)
Alternative stylesheets can be defined using the title attribute

Basic Syntax

Here’s how a basic <style> element looks in HTML:

Examples of <style> Element Usage

Example 1: Basic Document Styling

This example shows how to use the <style> element to define basic styles for HTML elements.

Play Code

<!DOCTYPE html>
<html>
<head>
  <style>
    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: 2px solid #3498db;
    }
    p {
      margin-bottom: 1em;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This paragraph is styled using CSS from the<b>style</b> element in the head section.</p>
</body>
</html>

Example 2: Media Queries

The <style> element can contain media queries to apply different styles based on device characteristics.

Play Code

<!DOCTYPE html>
<html>
<head>
  <style>
    .responsive-box {
      width: 200px;
      height: 200px;
      background-color: lightgreen;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px auto;
      transition: all 0.3s ease;
    }
    
    @media (max-width: 600px) {
      .responsive-box {
        background-color: lightcoral;
        width: 100px;
        height: 100px;
      }
    }
    
    @media (min-width: 1200px) {
      .responsive-box {
        background-color: lightblue;
        width: 300px;
        height: 300px;
      }
    }
  </style>
</head>
<body>
  <div class="responsive-box">Resize your browser to see changes</div>
</body>
</html>

Example 3: Keyframe Animations

The <style> element can define CSS animations using @keyframes rules.

Play Code

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated-box {
      width: 100px;
      height: 100px;
      background-color: #3498db;
      position: relative;
      animation: moveAndChange 4s infinite;
    }
    
    @keyframes moveAndChange {
      0% {
        left: 0;
        background-color: #3498db;
        transform: rotate(0deg);
      }
      50% {
        left: 200px;
        background-color: #e74c3c;
        transform: rotate(180deg);
      }
      100% {
        left: 0;
        background-color: #3498db;
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="animated-box"></div>
</body>
</html>

Example 4: Dynamic Style Changes with JavaScript

This example shows how JavaScript can interact with the <style> element to modify styles dynamically.

Play Code

<!DOCTYPE html>
<html>
<head>
  <style id="dynamic-styles">
    .theme-box {
      width: 150px;
      height: 150px;
      margin: 20px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
  </style>
</head>
<body>
  <div class="theme-box" onclick="changeTheme()">Click me to change theme</div>
  
  <script>
    const themes = [
      { bg: '#3498db', color: 'white', borderRadius: '0' },
      { bg: '#e74c3c', color: 'white', borderRadius: '50%' },
      { bg: '#f1c40f', color: 'black', borderRadius: '10px' },
      { bg: '#2ecc71', color: 'white', borderRadius: '30px 0' }
    ];
    
    let currentTheme = 0;
    
    function changeTheme() {
      currentTheme = (currentTheme + 1) % themes.length;
      const styleElement = document.getElementById('dynamic-styles');
      const theme = themes[currentTheme];
      
      styleElement.innerHTML = `
        .theme-box {
          width: 150px;
          height: 150px;
          margin: 20px auto;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
          background-color: ${theme.bg};
          color: ${theme.color};
          border-radius: ${theme.borderRadius};
        }
      `;
    }
  </script>
</body>
</html>

Example 5: Creating and Inserting Style Elements with JavaScript

This example demonstrates how to create and insert new <style> elements dynamically using JavaScript.

Play Code

<!DOCTYPE html>
<html>
<head>
  <style>
    .controls {
      margin: 20px;
      text-align: center;
    }
    button {
      padding: 8px 16px;
      margin: 0 5px;
      cursor: pointer;
    }
    .custom-box {
      width: 200px;
      height: 200px;
      margin: 20px auto;
      border: 2px dashed #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="controls">
    <button onclick="addStyle('red')">Red Style</button>
    <button onclick="addStyle('blue')">Blue Style</button>
    <button onclick="addStyle('green')">Green Style</button>
    <button onclick="removeStyles()">Remove Styles</button>
  </div>
  
  <div class="custom-box">Style me!</div>
  
  <script>
    function addStyle(color) {
      // Check if style already exists
      const existingStyle = document.getElementById(`style-${color}`);
      if (existingStyle) return;
      
      // Create new style element
      const styleElement = document.createElement('style');
      styleElement.id = `style-${color}`;
      
      // Add CSS rules
      let cssRules = '';
      switch(color) {
        case 'red':
          cssRules = `
            .custom-box {
              background-color: #ffdddd;
              border-color: #e74c3c;
              color: #c0392b;
              box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
            }
          `;
          break;
        case 'blue':
          cssRules = `
            .custom-box {
              background-color: #ddddff;
              border-color: #3498db;
              color: #2980b9;
              box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
            }
          `;
          break;
        case 'green':
          cssRules = `
            .custom-box {
              background-color: #ddffdd;
              border-color: #2ecc71;
              color: #27ae60;
              box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
            }
          `;
          break;
      }
      
      styleElement.innerHTML = cssRules;
      document.head.appendChild(styleElement);
    }
    
    function removeStyles() {
      ['red', 'blue', 'green'].forEach(color => {
        const styleElement = document.getElementById(`style-${color}`);
        if (styleElement) {
          document.head.removeChild(styleElement);
        }
      });
    }
  </script>
</body>
</html>

Tips and Tricks

Performance: Place <style> elements in the <head> for better performance as the browser can start rendering styles sooner.
Specificity: Styles in <style> elements have higher specificity than external stylesheets but lower than inline styles.
Scoping: While the scoped attribute is deprecated, you can achieve scoping by using specific selectors or CSS methodologies like BEM.
Dynamic Styles: For complex dynamic styling, consider using CSS variables that can be modified via JavaScript instead of manipulating <style> elements directly.
Organization: For large projects, consider using multiple <style> elements to organize your CSS (e.g., one for layout, one for typography, etc.).

Browser Support

The <style> element is supported by all browsers. However, some attributes like scoped have limited or no support in modern browsers as they’ve been deprecated.