Enhancing HTML Styling with Internal CSS: A Guide to Embedded Style Sheets


An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the head section of an HTML page, within a style element.

Internal style in CSS refers to a method of including CSS styling rules directly within an HTML document, rather than in an external CSS file. This is done by placing the CSS code within the <style> tags, which are typically located in the <head> section of an HTML document.

When using internal styles, you write CSS rules directly in the <style> tags, and they apply only to the specific HTML document where they are defined. Here's an example of how internal style is used:

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutor Joes</title>
    <style>
        h1{
          color:red; 
          background: black; 
        }
        p{
           color:blue;
        }
    </style>
</head>
<body>
    <h1>Internal Style</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, placeat eius! Error deserunt eaque sed non, 
	laboriosam quaerat veritatis veniam possimus?  Facilis corporis quae at alias esse optio sint dignissimos.</p>
    <h1>Internal Style</h1>
</body>
</html>

Output


CSS Internal Method Live Preview

In the above example, the CSS code is placed within the <style> tags in the <head> section of the HTML document. It defines styling rules for the h1, and p elements. The color of the h1 element is red,background color is black and the color of the p element is blue.

Using internal style is useful when you have specific CSS rules that are only applicable to a single HTML document and don't need to be shared across multiple pages. However, it can lead to code duplication if you have multiple HTML files that require the same styles. In such cases, using an external CSS file or inline styles might be more appropriate.

It's important to note that if you have both internal and external CSS styles defined in the same HTML document, the internal styles will take precedence over the external styles.

CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects