HTML `<style>` Element: Defining Internal Stylesheets for Web Pages

Learn how to use the HTML `<style>` element to add CSS (Cascading Style Sheets) to your web pages. This tutorial explains its purpose, placement within the HTML document, and demonstrates how to define styles that apply to specific elements or the entire page, improving website design and organization.

Understanding the HTML <style> Element

What is the <style> Element?

The HTML <style> element contains CSS (Cascading Style Sheets) code that defines the style for a webpage. CSS is used to control the look and feel of your HTML elements, including things like colors, fonts, spacing, and layout. The <style> element is typically placed within the <head> section of an HTML document. This allows you to define styles that apply to the entire page or specific sections within the page.

Example:

HTML

<style>
  h1 { color: blue; }
  p { font-size: 16px; }
</style>

    

This CSS code would style all <h1> elements to have blue text and all <p> elements to have a font size of 16 pixels.

Using Internal Stylesheets

By placing your CSS code directly inside the <style> element, you create an internal stylesheet for your HTML document. This is useful when you have styles that are specific to a single page and don't want to create a separate external CSS file.

External Stylesheets

For larger projects, it's often better to keep your CSS code in separate files (typically with a `.css` extension) and link them to your HTML using the <link> tag inside the `<head>` section. This improves organization and allows you to reuse the same styles across multiple pages.

Browser Support

The <style> element is supported by all major web browsers.