Adding CSS and JavaScript in HTML page | CSS Tutorial

Adding CSS and JavaScript in html pages

Here are the ways of adding CSS and JavaScript in html pages.In the head section you can easily apply styles for you document in the <style></style> tags. It is very useful in some cases to include CSS in the head section within the <style> tags. The code below shows how it should be included in the HTML document.

Code:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″ />

<title>

Document Title Goes Here

</title>

<style>

p.my_para{

color: red;

}

</style>

</head>

<body>

<h1>

HTML Meta Information

</h1>

<p>

Text goes here for paragraph one.

</p>

<p>

Text goes here for paragraph two.

</p>

</body>

</html>

Output:

HTML Meta Information

Text goes here for paragraph one.

Text goes here for paragraph two.

In the above code we are applying style to the first element. We have used the class attribute of the paragraph and in the head section we used “p. my_para”. Where “my_para” is the class name of the paragraph on which we are going to apply the style. There are many ways to style your HTML tags with CSS we have discussed these in detail in the Learn CSS chapter.

How to include JavaScript in your HTML page’s head section?

Including JavaScript requires the <script></script> tags. In these tags you can include JavaScript commands and functions etc. To explain more we have a code bellow.

Code:

<!DOCTYPE html>

<html>

<head>

<title>

Javascript Example

</title>

<link rel=”stylesheet” type=”text/css” href=”main.css” />

<script type=”text/javascript”>

function init() {

var n = 0;

e = document.getElementById(“output”);

e.innerHTML = “My first JavaScript Function”;

}

window.onload = init;

</script>

<!– <script type=”text/javascript” src=”my_functions.js”></script> –>

</head>

<body>

<h2>

Javascript Example

</h2>

<h3>

This is: <span id=”output”>0</span>

</h3>

</body>

</html>

Output:

Javascript Example

This is: My first JavaScript Function

As you see we are applying a JavaScript function which is changing what is inside the <span> tag. We are not going to go into more details. We have discussed it in very detail in our Learn JavaScript chapter. It is a very brief example of how can we use JavaScript in our HTML page’s head section. We have used <script> tags and the type of the script we are including is set to “text/javascript”. It means that it is a JavaScript code that we are going to use. It is the standard way to declare JavaScript in your HTML document. The commented code is the way that you can include an external JavaScript file into you document. So these are the two ways that you can include JavaScript in the head section of your pages.

Note you can’t include the JavaScript as:

Code:

<script type=”text/javascript” src=”my_functions.js” />

It will not work in most of the browsers so it is not used. When you are using <script></script> tags to include an external JavaScript file nothing should be in between them.

Comments