Ep. 008 – Style, Link, and Script Tags – Learn HTML and HTML5

In the previous post, we have learned how to add a line break, strong and italicized text, div and span tags, and style attributes. In this post, we will learn how to use style tag, link tag, and script tag and why we use them?

Style Tag:

The style tag <style> is used to add page-level Cascading Stylesheet (CSS) styles to design different parts and sections of the website. The style tag is usually placed inside the <head> tag. The following example shows how we can define the color of the h2 tag using the <style> tag.

Code:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website!</title>

    <style>
        h4{
            color: red;
        }
    </style>
</head>
<body>
   <h4>A red colored heading</h4>
</body>

Output:

My First Website!

A red colored heading

Link Tag:

In the previous section, we have learned how to add page-level CSS styles using the <style> tag. But what if our styles are defined in an external CSS file and we want to link it with our HTML page? Well, in that case, we use the <link> tag. The following code example shows how to link an external CSS file (style.css) to our HTML page (index.html).

Folder Structure:

My Website Project Folder
- index.html
- style.css

<!DOCTYPE html>
<html>
<head>
    <title>My First Website!</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
   <h2>A red colored heading</h2>
</body>

The above example shows how to link an external CSS file (style.css) to an HTML page provided that both files are residing in the same root directory. The following example shows how to link an external CSS file placed in another directory called css:

Folder Structure:

My Website Project Folder
- css
  - style.css
- index.html

<!DOCTYPE html>
<html>
<head>
    <title>My First Website!</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
   <h2>A red colored heading</h2>
</body>

Script Tag:

The script tag <script> is used to 1) add page-level JavaScript code 2) to link external JavaScript files to an HTML page. The script tags are usually added before the closing body tag </body> to improve the page loading speed. The following code example shows how to add page-level JavaScript code and how to link an external JavaScript file to an HTML page:

Page-Level JavaScript Code:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website!</title>
</head>
<body>
   <h2 id="myheading">The color of this heading is changed using the JavaScript code</h2>

<script>
   document.getElementById("myheading").style.color = "blue";
</script>
</body>

Output:

My First Website!

The color of this heading is changed using the JavaScript code

Linking External JavaScript File (myscript.js):

My Website Project Folder
- index.html
- myscript.js

The folder structure is as above.

Output:

<!DOCTYPE html>
<html>
<head>
    <title>My First Website!</title>
</head>
<body>
   <h2 id="myheading">The color of this heading is changed using the JavaScript code</h2>

<script src="myscript.js"></script>

</body>

Video Tutorial (Urdu Language):

Style, Link, and Script Tags

Got Stuck? Any Questions?

In case of any questions, please feel free to ask in the comments section. Thanks