View video tutorial

CSS Internal

CSS

An internal CSS applies styles to the current document.

Internal CSS


➔ CSS styles can be applied to HTML documents in 3 ways:

Inline - Uses style attributes inside HTML elements.

➔ Internal - Uses a <style> element in the <head> section.

External - Uses a <link> element to link to an external CSS file.

Internal Style

➔ An internal CSS uses the <style> element to declare the CSS.

➔ This CSS is reusable which means the style can be applied to multiple elements in the document.

Syntax
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <title>CSS Internal Example</title>
    <style>
        body {
            background-color: #ccf4fe;
        }
        h1 {
            color: blue;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h3>CSS Internal Example</h3>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>

Example

<style>
  body {
    background-color: #ccf4fe;
  }
  h1 {
    color: blue;
  }
  p {
    color: red;
  }
</style>
Try it Now »

Click on the "Try it Now" button to see how it works.