Client Side: HTML, DOM and CSS? - html

Question

I have not worked extensively on Client Side/Front End of the Application and I am trying to read about HTML, CSS and DOM but somehow am not able to figure out difference between them and so would really appreciate if someone can:
Explain me in simple English how does HTML, CSS and DOM work ?
How do they relate to each other from Client Side Technology point of view ?
Update
I have gone through wikipedia articles but not able to clearly understand working of DOM.
Thanks.

Answer 1

What is the DOM?
Let's say you open a web browser (e.g. Chrome) and load a web page in it (e.g. stackoverflow.com). Now, inside the browser, there is an window object. This object represents the browser window.
This window object has dozens of properties (members), the most important of them being the document object. The document object represents the web page that is currently loaded into the browser window.
This document object is the root of the DOM tree:
(source: w3schools.com)
Each box in the above picture is a node inside the DOM tree. A node is an object that is "connected" to other objects from the DOM tree.
The JavaScript programs that are bound to a web page have complete access to every node of the DOM tree. They can delete nodes, add new nodes, or just manipulate the properties of a node.
To sum up, inside the browser there exist hundreds of objects. All these objects are connected (somehow), and this huge structure of inter-connected objects is the DOM.

Answer 2

HTML is what is on your website (headings, lists, tables)
CSS is what those things look like (borders, colours, font sizes)
DOM is how you access those things through javascript (getting nodes, adding new elements, changing their style)
Here is an example of the 3 working together (doesn't seem to work in ie)
http://jsfiddle.net/gj9zT/

Answer 3

HTML describes the structure of a document. The browser parses HTML and constructs an internal representation of the elements of the document from it, like:
document
|
|-body
|
|-div
| |
| |-p
| |
| |-"some text"
|-div
|
|-...
This internal representation is the DOM, the Document Object Model. This is the basis for creating the actual visual representation of the website.
CSS is used to define how this visual representation looks exactly.
Parts of the DOM are also exposed through an API, so you can manipulate the DOM (i.e. the document) using a programming language like Javascript.

Answer 4

Have a look at
Confused by relation between DOM and HTML (APIs)
Difference between html and dom

Answer 5

Its a long explaination but i will try to explain in brief
CSS: These are used to apply property's to html elements. If you want to apply a common color to various html elements we can do it in css and apply that class to html element. We can avoid repeatation of code with css.
We can achieve many other things with css. Read in google
HTML: HTML is nothing but various kind of tags we use to display the elements like tables , divs , p , ul , li etc
DOM: DOM is nothing but the relation between the html elements , we use javascript normally to manipulate the DOM like changing height , moving from one place to another...
There will be lot of links in google , you can better explanations.

Answer 6

HTML (HyperText Markup Language) is the markup we use to describe the structure of our page. It defines the different constructs like <ol></ol> Ordered List or <table> Tables etc...
HTML is the code we start with, it's human readable (well it's supposed to be anyway :p) and easily compressable & transferable.
DOM (Document Object Model) is the framework your computer uses to organize the page it renders from HTML. When your computer breaks down your HTML Document it organizes it into an Object Model which it can more easily work with (and so can you, in javascript/css/etc...).
CSS (Cascading Style Sheets) describe how you want items in your documents to look. They're named cascading style sheets because they "cascade" down to the next one to fill in the holes or override styling. CSS describes the visual qualities of the objects in the DOM.

Answer 7

HTML is effectively the markup of your DOM (Document Object Model). The root of the document is <html>, which contains many levels of <div>s, <p>aragraphs, <h1>eaders and so on.
The DOM is the tree (graphical structure) of your html markup. It will have a 'root', which has many 'children', the children will have 'siblings' and 'parents', 'descendants' and 'ancestors'. The root doesn't have a parent, and is an ancestor of all the descendant nodes. for instance, your typical html document will be structured like this:
<!DOCTYPE html>
<html>
<head>
<title>Banner Example</title>
<style type="text/css">
#header {
background-image: url('branding_logo.jpg');
}
h1 a {
display: block;
height: 120px;
width: 500px;
text-indent: -9999; /* to hide the text that would show */
/* over the banner */
border: 1px solid black;
}
</style>
</head>
<body>
<div id='header'>
<h1>This is a header link.</h1>
<p>Here is some text.</p><p>Here is some more text.</p>
</div>
<div id="content">
<p>here is a bunch of content.</p>
</div>
</body>
</html>
In this case, html is the root node, which has two children: head and body. Head and body are siblings. You can use the DOM model with selectors in order to select which objects (contained in a node) will be affected by code such as CSS.
CSS will take selectors and style them as you specify in its attribute block. You could select all elements <p>, using
p { color: red; }
Or you could select only 'p' where it's a descendant of a div whose id is content:
div#content { color: black; }
CSS will typically style a tag using the most specific DOM description that can be applied to it. So, in my above html example, the first css style will apply to all p, and then the second, more specific styling will be applied to only that one p in the content div.
Essentially, what happens is your browser will parse your HTML code into sections that allow them to be selected individually. That parsed structure is your DOM. CSS uses the DOM to apply styles. jQuery does the same, allowing you to select a specific node from the DOM and apply styles or actions to that node dynamically on the client side.