--- title: Adding JS and CSS weight: 2 --- Next we will add CSS and JavaScript to our template. !!! info In django-components, using JS and CSS is as simple as defining them on the Component class. You don't have to insert the ` ``` #### Rules of JS execution 1. **JS is executed in the order in which the components are found in the HTML** By default, the JS is inserted as a **synchronous** script (``) So if you define multiple components on the same page, their JS will be executed in the order in which the components are found in the HTML. So if we have a template like so: ```htmldjango ... {% component "calendar" / %} {% component "table" / %} ``` Then the JS file of the component `calendar` will be executed first, and the JS file of component `table` will be executed second. 2. **JS will be executed only once, even if there is multiple instances of the same component** In this case, the JS of `calendar` will STILL execute first (because it was found first), and will STILL execute only once, even though it's present twice: ```htmldjango ... {% component "calendar" / %} {% component "table" / %} {% component "calendar" / %} ``` ### 4. Link JS and CSS to a component Finally, we return to our Python component in `calendar.py` to tie this together. To link JS and CSS defined in other files, use the `Media` nested class ([Learn more about using Media](../fundamentals/defining_js_css_html_files.md)). ```python title="[project root]/components/calendar/calendar.py" from django_components import Component class Calendar(Component): template_name = "calendar.html" class Media: # <--- new js = "calendar.js" css = "calendar.css" def get_context_data(self): return { "date": "1970-01-01", } ``` !!! info The `Media` nested class is shaped based on [Django's Media class](https://docs.djangoproject.com/en/5.1/topics/forms/media/). As such, django-components allows multiple formats to define the nested Media class: ```py # Single files class Media: js = "calendar.js" css = "calendar.css" # Lists of files class Media: js = ["calendar.js", "calendar2.js"] css = ["calendar.css", "calendar2.css"] # Dictionary of media types for CSS class Media: js = ["calendar.js", "calendar2.js"] css = { "all": ["calendar.css", "calendar2.css"], } ``` If you define a list of JS files, they will be executed one-by-one, left-to-right. !!! note Same as with the template file, the file paths for the JS and CSS files can be either: 1. Relative to the Python component file (as seen above), 2. Relative to any of the component directories as defined by [`COMPONENTS.dirs`](../../reference/settings.md#django_components.app_settings.ComponentsSettings.dirs) and/or [`COMPONENTS.app_dirs`](../../reference/settings.md#django_components.app_settings.ComponentsSettings.app_dirs) (e.g. `[your apps]/components` dir and `[project root]/components`) And that's it! If you were to embed this component in an HTML, django-components will automatically embed the associated JS and CSS. Now that we have a fully-defined component, [next let's use it in a Django template ➡️](./components_in_templates.md).