DOM, CSS

HTML

<div id="container" class="main">
     <h1>Hello, DOM!</h1>

    <p>This is some fine fruit:</p>
    <ul class="listy">
        <li>Apples</li>
        <li class="second">Pears</li>
        <li>Cherries</li>
    </ul>
</div>

CSS

body {
    font-family: Tahoma, Geneva, sans-serif;
}
a {
    color:#666;
}
h1 {
    font-size:2em;
    margin:0 0 5px 0;
}
h2 {
    font-size:1em;
}
label {
    float:left;
    clear:left;
}
#nav {
    list-style:none;
    margin:0 0 20px 0;
    padding:0;
    overflow:auto;
    float:right;
}
#nav li {
    margin:0 2px 0 0;
    padding:0;
    float:left;
}
#nav li a {
    display:block;
    padding:5px;
    background-color:#ececec;
}
#nav li a:hover {
    background-color:yellow;
}
#welcome {
    border:1px solid #000;
    padding:10px;
    background-color:#eee;
    clear:both;
}

.special{
    color:#f90;
    border:2px dashed #f90;
}
}

JavaScript

var containerEl = document.querySelector("#container");

console.log(containerEl.style);

// manipulate it
/*
containerEl.style.backgroundColor = "blue";
containerEl.style.color = "white";
containerEl.style.marginTop = "100px";
/**/

//console.log(window.getComputedStyle(containerEl));
//console.log(containerEl.style.cssText);

// classList API

//containerEl.classList.add("special");
//console.log(containerEl.classList);