I would like to understand how HTML, JS and CSS work together and reference one another.

I have found that HTML can reference CSS via an id reference.
Example: <div id="left-show"></div>

However, it would be much appreciated if someone could clarify the following:

1. How would you tell your HTML code to reference a specific JS function.
2. Within a JS function, is it a good practice to reference a CSS id?
3. If a JS function and CSS id share the same name, would that create a conflict?

I would like to understand how HTML, JS and CSS work together and reference one another.

I have found that HTML can reference CSS via an id reference.
Example: <div id="left-show"></div>

However, it would be much appreciated if someone could clarify the following:

1. How would you tell your HTML code to reference a specific JS function.
2. Within a JS function, is it a good practice to reference a CSS id?
3. If a JS function and CSS id share the same name, would that create a conflict?

• javascript
• html
• css

Share Improve this question Follow edited May 17, 2013 at 19:41 JJJ 33.2k2020 gold badges9494 silver badges103103 bronze badges asked May 17, 2013 at 19:37 George JesterGeorge Jester 18133 silver badges88 bronze badges 4

• 2 Could you explain questions 1 and 2 better? Regarding 3, the answer is no, there is no conflict. – bfavaretto Commented May 17, 2013 at 19:39
• 3 I think this is kind of question where you just have to try and see for your self. Get a project in mind and do it. That's the best way to learn IMO. "...If you can imagine an entire book that answers your question, you’re asking too much." – elclanrs Commented May 17, 2013 at 19:41
• 1 "I have found that HTML can reference CSS via an id..." -- It's the other way around. CSS acts as an accessory -- the id is part of the HTML element, and CSS happens to be one way it can be used. – apsillers Commented May 17, 2013 at 19:46
• Reference link originally added as an answer by Jason: w3/munity/webed/wiki/… – bfavaretto Commented May 17, 2013 at 19:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

How would you tell your HTML code to reference a specific JS function.

Generally, you don't.

You include a script (with a <script> element) that accesses whatever parts of the DOM you want it to interact with (via the document object that the browser will make available to the script).

You can use the addEventListener method to bind a function so that it will run in response to an event (such as a button being clicked).

Within a JS function, is it a good practice to reference a CSS id?

There is no such thing as a CSS id. HTML has IDs which have a multitude of purposes including being matched by CSS ID selectors, being linked to with a fragment identifier on the end of a URL and allowing a <label> to reference its associated form control with the for attribute.

If you want to access a specific element, then an HTML ID is a good way to identify it (via the getElementById method).

If a JS function and CSS id share the same name, would that create a conflict?

There can be some issues if JavaScript variables of any kind (including functions) match the ID of an HTML element. This is best avoided by staying away from the global scope as much as possible (as per this answer).

Your questions are a bit far-reaching for a full explanation on a concise Q&A site like SA. You would really need to read a lot of material for a full understanding.

However, some brief simplified answers to get you started

1) HTML links to JavaScript via events that trigger JavaScript functions. This is an example of a very simple event on an HTML element that will look for a function in your JavaScript declared as function aJavaScriptFunction(){ } when you click on the button. There are different ways to do this and different types of event, but this is a good place to start.

<input id="thebutton" type="button" value="A Button" onclick="aJavaScriptFunction();" />

2) It very much depends what you are trying to do, but in general selecting HTML DOM elements via their ID is an efficient method of selecting them to do something with them. So this might be the JavaScript function that we're using in the previous example.

function aJavaScriptFunction()
{
    var aButtonElement = document.getElementById("thebutton"); // <-- It's not a "CSS id" as such, CSS can use the HTML id
    // .... some more javascript that uses aButtonElement like
    aButtonElement.style.borderColor = "red";
}

3) No. JavaScript and CSS don't really directly overlap as such in the way you might be thinking, when you're beginning, think of them both as altering the HTML. It is possible to do some of the same things with JavaScript as CSS, but in general they happen at different times. This CSS doesn't conflict with the previous JavaScript, though they both do similar things.

#thebutton { border-color: blue; }

Here are all my examples put together into a jsFiddle where you can play with them.

You'd be best off visiting somewhere like W3 Schools or Code Academy.