1<style>
2  #test {
3  /*Styleing here*/
4  }
5</style>
6<h1 id="test"></h1>

1<style>
2#grepperHeader {
3  background-color: lightblue;
4  color: navy;
5  padding: 40px;
6  text-align: center;
7}
8</style>
9
10<h1 id="grepperHeader">grepperHeader</h1>

1<!--
2	The script tag's id and class property work just like in any html tag.
3	Possible use case is to add css styles to your script tag.
4
5	Using e.g. 'class="createFunctionality" type="text/javascript"' in a
6	script is a good practice if you use a editor,
7	that displays the name of the script when collapsed,
8	as part of documentation; e.g. Indicate what the script does.
9	
10	You can also view the source code of the script like this:
11-->
12
13<!-- Rememer to add jquery! -->
14<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
15
16<script class="foo" type="text/javascript">
17	function foobar() {
18	    var a = 1;
19	}   
20</script>
21
22<div id="showScript">Show me the script.</div>
23
24<script type="text/javascript">
25    $('#showScript').click(function(event) {
26        event.preventDefault();
27        $("<div>").html($(".foo").text()).appendTo($("body"));
28    });
29</script>