HTML & CSS Tutorial

Internal CSS

Learn how to embed CSS directly within HTML documents for quick styling and prototyping

<style>
HTML Tag
0ms
Load Delay
100%
Browser Support
1
File Only

Internal CSS Characteristics

āš”

Fast Development

Quick prototyping and testing

šŸŽÆ

Component Scoped

Styles specific to single page

šŸš«

No HTTP Requests

Eliminates external file requests

āš ļø

Maintenance Challenge

Hard to maintain across multiple pages

How Browser Processes Internal CSS

1

HTML Parsing

Browser reads HTML and builds DOM tree

2

CSS Parsing

Internal CSS extracted and parsed

3

CSSOM Creation

CSS Object Model constructed

4

Render Tree

DOM + CSSOM combined

5

Layout

Calculate element positions

6

Paint

Pixels painted to screen

Browser Rendering Pipeline

Step 1 of 6
.html
HTML
ā†’
DOM
DOM Tree
ā†’
<style>
Internal CSS
ā†’
CSSOM
CSSOM Tree
ā†’
Render
Render Tree
ā†’
Layout
Layout
ā†’
Paint
Paint

HTML Parsing

Browser starts parsing HTML and encounters the <style> tag...

What is Internal CSS?

Internal CSS (also known as embedded CSS) involves placing CSS rules directly within an HTML document using the <style> tag. These styles are typically placed in the <head> section and apply only to the current document.

šŸ“ Syntax Structure

<head>
  <style>
    selector {
      property: value;
      property: value;
    }
  </style>
</head>

Basic Example

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    h1 {
      color: #333;
      border-bottom: 2px solid #007acc;
      padding-bottom: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Welcome to My Page</h1>
    <p>This page uses internal CSS for styling.</p>
  </div>
</body>
</html>

Live CSS Editor

Edit Internal CSS

Preview

Internal CSS Demo

See how internal CSS affects this element

VIDO - Learn Web Development