Style Tags: Customizable and Trendy 😎

Indeed, you heard correctly! Style tags are also considered HTML tags, to which we can apply various styles.

Let's explore this further.

Go to your Favourite editor and paste the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit CSS Live</title>
</head>
<body>
    <style style="display: block;">
        *{transition: all 0.2s;}
        html{
            background-color: #bada55; 
            font-size: 20px;
        }
    </style>
</body>
</html>

In the code provided above, I have included a style attribute within the style tag. Now, when you execute this code, the content inside the style tag will be displayed in the browser with the applied styling, as demonstrated below.

Cool right! but there is more.

What if I say you can edit the styles on the browser window 😳.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style contenteditable style="display: block;">
        *{transition: all 0.2s;}
        html{
            background-color: #bada55;
            font-size: 20px;
        }
    </style>
</body>
</html>

There is an attribute called "contenteditable" that can be added to the style tag, allowing us to edit the styles directly from our browser window, as demonstrated below.

Try changing the background color and font size, and you'll see what I mean.

https://codepen.io/stephin007/pen/OJajXJY

You can also add "white-space: pre;" alongside "contenteditable" to include the necessary whitespace wherever needed.

<style contenteditable style="display: block; white-space: pre;">

Hope this quick tutorial helped you in some or the other way. Thankyou

Style Tags can be styled 😎

Tap into Style Tags' Benefits: Alter and Refine Them Conveniently in Your Browser