CSS Tutorial: Internal CSS

Internal CSS is a styling method where all styles are written directly in the HTML document, inside a special <style> element located in the page header (<head>). This is the middle ground between "Inline" CSS (which is chaotic) and "External" CSS (which is the most organized).

In the example above, all rules for background color, fonts and headings are written in a single place within the document. All elements on this page will follow these rules.

How Does It Work?

Imagine you have a single room (a web page). Instead of painting each piece of furniture (element) separately (Inline CSS), or having a separate rulebook for all rooms in the house (External CSS), you write the styling rules for this one room on the wall inside the room. These rules apply to the entire page, but not to other pages on your website.

When to Use?

Internal CSS is ideal for:

• Single-page websites (Landing Pages): When you only have one page and do not need external files.
• Quick testing: When you want to quickly see how the entire page looks with new styles, without creating a new file.
• One-off projects: When you will not be reusing the style on other pages.

Advantages and Disadvantages

• + Advantage: Everything is in one place (HTML and CSS together), which makes it easier to transfer the file (e.g., email or simple download).
• + Advantage: More organized than Inline CSS, as it does not pollute the HTML code within elements.
• - Disadvantage: The code cannot be reused for other pages. If you have 10 pages, you must copy the code 10 times.
• - Disadvantage: The browser cannot cache the styles, which can slow down loading when visiting other pages.

Conclusion: Internal CSS is an excellent solution for single-page projects or quick fixes, but for larger websites with multiple pages, External CSS is always the better choice due to reusability and speed.