What is Inline style and Inline JavaScript

Inline style and Inline JavaScript
Code having CSS and JavaScript inline: it is when you incorporate your HTML code directly, resulting in having presentation and interaction code spread all throughout the page
Terrible with have inline JavaScript
Disadvantage:
1) HTML file size
Your HTML code will weigh more, i.e. a web page riddled with similar code will have a KB size that is a lot larger than necessary.
2) Lack of caching
HTML code will never be cached. Contrary to that, external dependencies, such as CSS and JavaScript files, will be cached by the visitor’s web browser after the first visit - this means that instead of loading a lot of superfluous HTML code for every page in your web site the visitor visits, it will quickly retrieve all style and interaction locally from the web browser cache.
3) Poor accessibility
When it comes to inline JavaScript code, such as in the above example, it’s applied to an element which doesn’t have any built-in fallback interaction handler (i.e., like a link takes you to the URL specified in its href attribute etc). This means that it won’t work when JavaScript, for one reason or the other, isn’t available.
4) Difficult code maintenance
When it comes to making changes to the code, I’m sure every web developer would agree on that having code in just one centralized location is a lot more preferable than changing exactly the same kind of code snippets spread all over the files in the web site. Maintaining similar code to the above for an entire web site would be hell.
Develop with using:
Any Interface Developer who’s fairly skilled knows that he/she should strive for a structure there the content (HTML code) is completely separated from the presentation code (CSS) and interaction code (JavaScript). What this means is that, naturally, you can’t cut the ties completely, but there should be no inline CSS or JavaScript code in your HTML.
The only acceptable dependencies are through id and class attributes for CSS and JavaScript hook-ins.
When to use id and when to use class
Basically, it’s very simple. An id is unique for a web page, i.e. it should only appear once. The class attribute, on the other hand, can be in a document as many times as desired. My rule of thumb is that normally I use the id attribute for larger blocks in a web page, like site container, navigation, main content etc. Otherwise, I always use the class attribute.
When it comes to CSS code, connecting something to anything with that class in the HTML code is very simple. In regards to JavaScript and DOM access, however, native support for that doesn’t exist in all web browsers, Therefore I recommend the getElementsByClassName function, which also supports some other nifty features not available in any native web browser implementation.