Extending HTML with CSS and JavaScript
HTML

Extending HTML with CSS and JavaScript

HTML in itself is very static and simple, it cannot be used to create dynamic webpages. User interaction is not possible via HTML itself. For this, we need JavaScript which integrates very well with HTML. Similarly, writing attributes for each element make the entire code a spaghetti. To avoid this we use CSS(Cascading Style Sheet), that helps in separating the style part from the HTML part.

HTML in itself is very static and simple, it cannot be used to create dynamic webpages. User interaction is not possible via HTML itself. For this, we need JavaScript which integrates very well with HTML. Similarly, writing attributes for each element make the entire code a spaghetti. To avoid this we use CSS(Cascading Style Sheet), that helps in separating the style part from the HTML part.

html css js logo

CSS with HTML

Let us consider the following code example where we apply various styles to an element.

<p style="font-size:25px;color:red;">

A journey of a thousand miles begins with a single step

</p>

In this example we have used inline css, the problem is that whenever I need to create a similar element, I would have to rewrite all the styling parts with that element. The solution to this is to use internal CSS. Since we are now dealing with CSS, we will need to work with classes. Have a look at this example

<head>

<style>

.theitstuff{

font-size:25px;

color:red;

}

</style>

</head>

<body>

<p class="theitstuff">

This is an example of how css can be used

</p>

</body>

In the Example above, we have created a <style> tag and inside that style tag, we have created a class called .theitstuff. It is important to note, that all CSS class names are accessed by the . specifier.

After that, in the body section, we just gave our element a class attribute with the class name that we created. Now all the style code written for that class will be given to the element.

This is very useful when you have to make changes in multiple elements that are similar.

JavaScript with HTML

JavaScript is a whole new world, it makes the User Experience more dynamic. To just give you a glimpse of how JavaScript can be integrated into your webpage here is an example.

make alert in html

The webpage above displays an alert. This can be achieved with the following code.

<head>

</head>

<body>

<script>

alert("Hey, This is a javascript example");

</script>

</body>

You can see that we have placed a <script> tag right below the body and all the JavaScript codes go inside it. We shall study JavaScript as well, later in a JavaScript tutorial.

External CSS & Javascript

We have seen how CSS and Javascript are integrated into HTML, but eventually, for keeping your code base clean and bringing modularity, you might want to have separate files for your CSS and js code. You can name those files as filename.css and filename.js for CSS and JavaScript respectively. These files don’t need to have the tags and you can just start writing the respective code for each.

These files can then be used in the main page by inserting the following tags in the head section.

CSS

<link rel="stylesheet" type="text/css" href="filename.css">

JavaScript

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

Conclusion

CSS and JavaScript can be used to make webpages more dynamic and easy to maintain. They are both individual languages that need to be understood in depth. I have only tried to explain how CSS and JavaScript integrate into HTML webpages. If you have any problems understanding this part, let me know in the comments section and I’ll be there for you.

Extending HTML with CSS and JavaScript
Comments
To Top