<style></style> tag HTML

Example

HTML A simple code example of <style> tag

<style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
    }

    .container {
      text-align: center;
      margin-top: 50px;
    }

    .text {
      color: #e74c3c; 
      font-size: 24px;
      font-weight: bold;
      text-decoration: underline;
    }

    .button {
      background-color: #2ecc71; 
      color: #ffffff;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
</style>

Laboratory

description & Usage

Using the <style> tag, you can create different styles and features for your codes in html documents.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<style>

Attributes

Attributes	Values	Description
media	media-query	en
type	text , css	en

Global Attributes

The style tag supports the HTML Global Attributes.

Event Attributes

The style tag supports the HTML Event Attributes.

More Examples

Example

HTML <style> tag - Example #1

<style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f8f8f8;
      color: #333;
      margin: 20px;
      text-align: center;
    }

    h1 {
      color: #0066cc;
      text-decoration: underline;
    }

    p {
      color: #333;
      font-size: 18px;
    }
    button {
      background-color: #4caf50;
      color: white;
      padding: 10px 20px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
    }
    button:hover {
      background-color: #45a049;
    }
</style>

Laboratory

Default CSS

Most browsers will display the style tag with the following default style:

style {
	display: none;
}