HTML Tutorial

HTML Tag: <style>

Usage of <style>

The <style> tag is used to define CSS (Cascading Style Sheets) rules within an HTML document. It allows you to style the appearance and layout of your web page.

Attributes of <style>

The <style> tag has the following attributes:

  • type: Specifies the type of stylesheet language (e.g., "text/css").
  • media: Specifies the type of device or media the stylesheet applies to (e.g., "print", "screen").

Examples with <style>

To use the <style> tag, you can either place it within the <head> section of your HTML document or inline within the HTML elements.

Example 1 (Within <head>):

<head>
  <style type="text/css">
    body {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }
  </style>
</head>

Example 2 (Inline):

<p style="color: red; font-size: 20px;">This is some red text.</p>

Exploring the <style> tag

To demonstrate the <style> tag, consider the following HTML example:

<!DOCTYPE html>
<html>
<head>
  <title>Using the `<style>` Tag</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #000080;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is some text.</p>
</body>
</html>

In this example:

  • The <style> tag is placed within the <head> section and contains CSS rules.
  • The CSS rules style the background color of the page (#f0f0f0), the font family (Arial), and the appearance of the <h1> element (blue color and 24px font size).
  • The result is a web page with a light gray background, black text, and a blue heading.