All
HTML

How do you add CSS and JavaScript to HTML challenges?

HTML challenges and quizzes are a great way to test and improve your web development skills. But sometimes, you may want to add some style and interactivity to your HTML code using CSS and JavaScript. How do you do that? In this article, we will show you how to link external CSS and JavaScript files, embed them in your HTML document, and use inline styles and scripts.

1 Link external files

One way to add CSS and JavaScript to your HTML challenges is to link external files that contain your style and script code. This way, you can keep your HTML code clean and organized, and reuse your CSS and JavaScript code in different HTML files. To link an external CSS file, you need to use the <link> tag in the <head> section of your HTML document, and specify the href attribute with the URL or path of your CSS file. For example:

<head>
  <link rel="stylesheet" href="style.css">
</head>

To link an external JavaScript file, you need to use the <script> tag in the <head> or <body> section of your HTML document, and specify the src attribute with the URL or path of your JavaScript file. For example:

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

Add your perspective

Ghayoor Ul Baqir

Software Engineer | Expert in Building Scalable Web Applications
Report contribution
For CSS, you can create a separate stylesheet file (typically with a .css extension) and link it to your HTML document using the <link> tag within the <head> section. Placing JavaScript at the end of the HTML body is a good practice as it ensures that the script doesn't block the rendering of the page. Additionally, always aim for a modular and organized code structure by encapsulating your JavaScript within functions or modules to maintain clarity and facilitate future updates. Remember to load your JavaScript files after the HTML content is parsed to avoid any issues with element selection or manipulation.

Like
Oleg Tyshchenko 📈

Founder & CEO of Quantum Marketing Lab LLC | Search Engine Optimization Expert
Report contribution
Using Link external files allows you to simplify and speed up the website development process. For different devices and page categories, you can use different CSS options. <link rel="stylesheet" href="main.css"> - For all site pages and display devices. <link rel="stylesheet" href="category1.css"> - Only for product pages from Category 1. <link media="print" rel="stylesheet" href="print.css"> - Printers only. <link media="screen" rel="stylesheet" href="screen.css"> - For screens only. <link media="all and (max-device-width: 480px)" rel="stylesheet" href="width480.css"> - For mobile devices with an output device rendering surface of 480 pixels or less.

Like
Carlos Eduardo Vieira

Frontend Developer at NFON
Report contribution
Remember that scripts are loaded synchronously and in order. Therefore, if script B depends on script A, you must ensure that you are importing file A first.

Like
Uday Singh

SEO || Digital Marketing || HTML || CSS || JS || PHP || React
Report contribution
<head> <script type="text/javascript"> function showMessage() { alert('Hello, world!'); } </script> </head> <body> <button onclick="showMessage()">Click me</button> </body> <body> <script src="script.js"></script> <button onclick="showMessage()">Click me</button> </body> Remember to order your script tags appropriately. For example, if your JavaScript relies on DOM elements that appear in the HTML, it's best to place the script tag at the end of the <body> section to ensure that the DOM elements are loaded before the script runs.

Like
francis asare yawson

Flutter Mobile App Developer | CTO - Rehotech Solutions | IT Consultant | Business Analyst | ASP.Net Core MVC Web Apps Developer | Umbraco Website Developer | Wordpress Designer
Report contribution
You can decide to add css using in-line approach. <p style="text-align:justify">Welcome</p> To link an external Javascript you can use the following code : <head> <script src="script.js"></script> </head>

Like

Load more contributions

2 Embed code

Another way to add CSS and JavaScript to your HTML challenges is to embed them in your HTML document using the <style> and <script> tags. This way, you can write your style and script code directly in your HTML file, without creating separate files. However, this method may make your HTML code longer and harder to read and maintain. To embed CSS code, you need to use the <style> tag in the <head> section of your HTML document, and write your CSS rules inside it. For example:

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>

To embed JavaScript code, you need to use the <script> tag in the <head> or <body> section of your HTML document, and write your JavaScript statements inside it. For example:

<head>
  <script>
    alert("Hello, world!");
  </script>
</head>

Add your perspective

Oleg Tyshchenko 📈

Founder & CEO of Quantum Marketing Lab LLC | Search Engine Optimization Expert
Report contribution
Embed code is useful for single pages and also in the process of testing a new template or page design option. If necessary, you can also use media queries in Embed code. When using both the Link external files and Embed code methods, keep in mind Cascaded Values and Calculating a selector's specificity.

Like
BURAK AKDOGAN

Knowledge grows when shared!
Report contribution
You can embed inline styles by using the style attribute within HTML tags, specifying CSS properties and values. For inline JavaScript, place code between <script> tags within the HTML body, enabling direct execution when triggered, as shown in the provided HTML example.

Like
Sumit Singh - WordCamp Europe Organiser

Empowering Your WordPress Journey: Unleashing Success with Our Comprehensive Solutions! Guiding Leadership, Igniting Initiatives, and Mastering WordPress Excellence. WordPress Lovers and Helpers!Ⓦ 💖
(edited)
Report contribution
To link JavaScript files to an HTML document efficiently, follow these concise steps: JavaScript (external file): Place the JavaScript file (e.g., script.js) in the same directory as your HTML file or in a designated folder. In the <head> section of your HTML document, include a <script> tag to link to the JavaScript file: <script src="script.js"></script> Inline JavaScript (within HTML file): Alternatively, you can include CSS and JavaScript directly in your HTML file using <script> tags within the <head> or <body> sections. <script> // Your JavaScript code here </script> Remember to replace "script.js" with the actual file names and paths if they are located in different directories.

Like
Touseef Ahmed

Software Engineer at habib rafiq pvt ltd
Report contribution
1) write CSS in a particular HTML element 2) write your CSS in <style></style> tag 3) create a separate file of CSS and import using <link></link>

Like
Yurii Melesh

Lead Software Engineer, Full Stack
Report contribution
<script> Tag Attributes: When embedding JavaScript, you can add various attributes to control script execution and behavior: type: JavaScript is the default, so it's not necessary to include this attribute for JavaScript files. async: You can use the async attribute to load and execute the script asynchronously. defer: Can be used to defer script execution until after the HTML document is parsed. nonce: For security purposes, you can include a nonce (number used once) attribute to ensure that only scripts with matching nonces are executed. This is commonly used with Content Security Policy (CSP) headers. Example: <script type="text/javascript" src="script.js" async></script>

Like

Load more contributions

3 Use inline styles and scripts

A third way to add CSS and JavaScript to your HTML challenges is to use inline styles and scripts. This way, you can apply style and script code to specific HTML elements, without affecting other elements. However, this method may make your HTML code messy and inconsistent, and override your external or embedded CSS and JavaScript code. To use inline styles, you need to use the style attribute in your HTML tags, and write your CSS properties and values inside it. For example: <h1 style="color: red;">This is a red heading</h1> To use inline scripts, you need to use the onclick attribute in your HTML tags, and write your JavaScript functions or expressions inside it. For example: <button onclick="console.log('You clicked me')">Click me</button> These are some of the ways you can add CSS and JavaScript to your HTML challenges. Depending on your preferences and needs, you can choose the method that suits you best. Remember to always check your code for errors and compatibility issues before submitting your HTML challenges.

Add your perspective

Oleg Tyshchenko 📈

Founder & CEO of Quantum Marketing Lab LLC | Search Engine Optimization Expert
Report contribution
As a general rule, it is not recommended to use inline styles for sites with a large number of pages, as well as for single-page sites with a lot of content in them. Of course, there are exceptions to the rules. For example, when it is not possible to edit an external style file and you need to apply CSS styles only for a small fragment on one HTML page.

Like
BURAK AKDOGAN

Knowledge grows when shared!
Report contribution
To use inline styles in HTML, apply the style attribute directly to HTML elements. For inline JavaScript, place the code within <script> tags within the HTML body. This approach is suitable for small-scale projects but may not be as organized or efficient as using external files.

Like
Pranshu Jain

Helping Founders Build Digital Products, Streamline Workflows & Drive Growth with Tech & AI Solutions (Websites | Web & Mobile Apps | CRM - Go High Level, Salesforce | Automations)
Report contribution
While the article highlights the ease of inline styles and scripts, it's essential to mention a more maintainable approach, especially in larger projects. (more then 4-5 pages) For instance, at Gaincafe and for most of our client websites, we transitioned from using inline styles to external CSS and JavaScript files. This shift not only made our code more organized but also eased the debugging process. External files allow for a cleaner separation of concerns, which is crucial for team collaboration and long-term code maintenance. Moreover, browser caching of external files improved our page load times, enhancing the overall user experience.

Like
Mohamed 🟣 Zhioua

Full Stack JavaScript Developer and Blogger | TypeScript | Next.js | React.js | Node.js | Express.js | MongoDB | Redux
Report contribution
Inline styles and scripts are CSS and JavaScript code that is applied to individual HTML elements. nline styles are defined using the style attribute on HTML elements. The value of this attribute is a CSS declaration, which is a list of CSS properties and values. For example, the following code sets the font size of the <p> element to 20px: <p style="font-size: 20px;">This is a paragraph with inline styling</p> Inline scripts are defined using the script tag with the type attribute set to javascript. The content of the script tag is JavaScript code that will be executed when the page is loaded. For example, the following code will alert the user when the page is loaded: <script type="javascript"> alert("This is an inline script"); </script>

Like
Borut Semerl

IT Consultant | Brand Designer | Web Designer | Digital Guru
Report contribution
Inline styles are great for quick solutions within your HTML. Sometimes, on small scale projects or pages, it is real life and time saver. For larger project, I rarely use this method, because I like to keep things organized and unified.

Like

Load more contributions

4 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?

Add your perspective

Yurii Melesh

Lead Software Engineer, Full Stack
Report contribution
Remember: The principle of separating HTML (structure), CSS (presentation), and JavaScript (behavior) into distinct layers remains a fundamental practice in web development. This separation improves code organization, maintainability, and collaboration among developers.

Like
Elizabeth Orji

Google Women Tech Maker Ambassador | Female Advocate | Founded Techiepistle | Dental professional & Computer Scientist.
Report contribution
If the code is short and you might be in a hurry to deliver to a client or you just need to input it temporarily, you can write the Html, CSS and JavaScript in the same page and add a note to it for reference purposes.

Like
Abutahir A

Front End Architect in Sapientflux Technologies
Report contribution
Adding CSS and JavaScript to HTML is an essential part of web development. To accomplish this, you can use best practices to ensure that your code is maintainable, efficient, and well-structured. Here's how to use best practices when adding CSS and JavaScript to HTML: 1. Maintain distinct files for HTML, CSS, and JavaScript. This separation simplifies the maintenance and understanding of your code. 2. Instead of writing CSS and JavaScript files directly into your HTML, link to them. This provides for better caching and concern separation. <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body>  <script src="script.js"></script> </body>

Like
Alan Ng Cheong Vee

Full-stack developer
Report contribution
Something which would be great to look into is SCSS/SASS , as those will help you to be more productive as less code is required and it is much more easy to read and maintain. For example, using scss, you can define variables and use these variables throughout your file. Having to change the color of elements sharing the same variable will require changing the value of the variable only, instead of having to change the same value several times. Javascript: If you use multiple scripts wbich are dependant of each other, make sure to call them in the correct order and not to defer a required script

Like
Ilham Widayat

frontend developer at KapanLagi Network
Report contribution
if you want to work a lot faster you can consider learning scss with minimum typing and nesting that's really help you to cut the time

Like

How do you add CSS and JavaScript to HTML challenges?

1

2

3

4

1 Link external files

2 Embed code

3 Use inline styles and scripts

4 Here’s what else to consider

HTML

Rate this article

Thanks for your feedback

More articles on HTML

More relevant reading