Donate with
Categories
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
Created: April 7th 2021
Last updated: December 10th 2021
Categories: Common Web Development
Author: Tim Fürer
Last updated: December 10th 2021
Categories: Common Web Development
Author: Tim Fürer
HTML Basics: Different ways to include JavaScript and CSS
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
There are many different ways to include JavaScript and CSS into your HTML site. Let's check them out and explain how each one works.
Inside the <script> and <style> HTML tags
HTML allows you to write JavaScript inside <script> tags and CSS inside <style> tags. This can be fairly useful when you're trying to pack everything into a single, neat little HTML file (or perhaps these styles and or scripts are only required on that specific site). If you do use it, to increase compability, set the <script> tag's 'type' attribute to 'text/javascript' and the <style> tag's 'type' attribute to 'text/css'.
Examples:
<script type="text/javascript">
/* javascript */
</script>and
<style type="text/css">
/* css */
</style>Note: If you have experience with MIME-TYPES, you know that 'text/javascript' is technically wrong and that it should be 'application/javascript' instead. Browsers will generally accept both, all except Internet Explorer (It's always that damned Internet Explorer which messes stuff up, right?!). Internet Explorer will in most cases, because it's old and outdated, only accept 'text/javascript'. That's why we use it instead of the newer standard. If you don't care about compability with Internet Explorer, go ahead and use 'application/javascript'.
Load JavaScript and CSS from external files through URL
The <script> tag also allows you to use the 'src' attribute to link a URL to some JavaScript file. For CSS, use the <link> tag instead, together with the 'href' attribute to define it's URL and set the 'rel' attribute to 'stylesheet'. This generally is the most optimal way to load JavaScript and CSS files.
Examples:
<script type="text/javascript" src="scripts.js"></script>and
<link rel="stylesheet" href="styles.css">Add CSS properties through 'style' attribute
HTML can also apply CSS styles through the 'style' attribute. This is fairly straight forward, just add the CSS properties and their values to the 'style' attribute's value. If possible, try to stay away from using this and utilize classes and IDs to style as much as possible. This is only ever used when dynamically styling something, with JavaScript perhaps.
Example:
<element style="property1: value; property2: value;">Add JavaScript through event atributes
HTML elements can execute JavaScript through event attributes such as 'onclick' or 'onload'. The JavaScript just goes into the attribute's value and that's it. You can use this method, but it's usually cleaner to use event listeners instead.
Example:
<element onclick="alert('I've been clicked!');"></element>Related stuff
A short introduction to CSS can be found here.