CSS and JavaScript

Knowing Your Toolkit


  1. The basic usage of each: HTML, CSS, and JavaScript
  2. Knowing when to use CSS or JavaScript

Hy·per·Text Mark·up Lan·guage

/ˈhīpərˌtekst ˈmärˌkəp ˈlaNGɡwij/

Car Analogy:

What components are needed to build a car?

What components are on a webpage?

In an web page (HTML document) every element (aka: tag) is an object that lives in the Document Object Model (DOM).

HTML: Content Structure

  • Hierarchy
  • Classification and Grouping
<p>We've got awesome content:</p>
  <li><a href="#">Click Bait Title</a></li>
  <li><a href="#">Clearly a virus</a></li>


We've got awesome content:

Common HTML Elements

Tag Description
<header> The header section of the webpage
<h1> Most important heading
<p> Paragraph
<ul> Unordered list
<li> List item
<img> Image, requires a source (src) attribute
<a> Link, requires a hypertext reference (href) attribute
<div> Generic block element
<span> Generic inline element
Additional Resources:
DOM Introduction | HTML element reference

Cas·cad·ing Style Sheet

/kaˈskādiNG stīl SHēt/

Car Analogy:

What attributes belong to the components of our car?

What attributes belong to our web components?

In CSS, these attributes are called properties.

CSS: User Interface

  • Layout and Positioning
  • Design and Styles
<p id="subtitle">Subtitle</p>
<p class="special">Paragraph</p>
<p class="special">Another paragraph</p>

h3{ color: #f00; }

p{ letter-spacing: 5px }

#subtitle{ font-style: italic; }

.special{ border-top: 1px solid #0f0; }




Another paragraph

Useful CSS Selectors

Selector Description
x HTML Tag, such as p, header, h3, etc.
x y Descendent
.x Class
#x ID
[x] Attribute
[x="y"] Attribute with value
::before Pseudo Element
:hover Pseudo Class
x + y Immediate sibling
Additional Resource: 30 CSS Selectors You Must Memorize

Useful CSS Properties

Property Description
text-align Alignment of text; cascades
font-size Size of text; cascades
display How an element renders, if at all (ex. block, inline, none)
color Text color; cascades
background-color Background color
padding Space around an element
margin Space against other elements
Additional Resources:
Box Model | CSS Reference



Car Analogy:

What actions can we perform on our car?

What actions can we take on our web page?

In JavaScript, these actions are called events. In our JavaScript, we can listen to these events to execute code in response.

JS: User Experience

  • User Interaction
  • Event Handling
  • External Communication
<h3>Coin Toss:</h3>
<p id="result">...</p>
<button id="coin-toss-button">Toss Coin</button>

// Javascript
var button = document.getElementById('coin-toss-button');
var result = document.getElementById('result');

button.addEventListener('click', function(){
  result.textContent = Date.now() % 2 ? 'heads' : 'tails';

Coin Toss:


Remedial jQuery (aka: $)

jQuery is a JavaScript library that allows you to use CSS selectors in your Javascript. (It also can do a lot more, but that's a whole other presentation).

jQuery is aliased as $, so you can use either one, but $ is shorter and easier to follow, so it's pretty rare to see just jQuery.

<h3>Coin Toss:</h3>
<p id="result">...</p>
<button id="coin-toss-button">Toss Coin</button>

// JavaScript with jQuery
$('#coin-toss-button').on('click', function(){
  $('#result').text(Date.now() % 2 ? 'heads' : 'tails');

Coin Toss:


Useful jQuery Methods

Function Description
$( selector ) Get chainable jQuery object
.on() Listen to events (ex. click, hover, mouseover)
.data() Get/set data attributes
.text() Get/set text content
.html() Get/set html content
.hide() Hide elements
.show() Show elements
.animate() Animate elements
Additional Resource: jQuery API

The Law of the instrument

"I suppose it is tempting, if the only tool you have is a hammer,
to treat everything as if it were a nail."

- Abraham Maslow


  1. Show an element's hidden content when hovered.
<div class="js-hover">Hello
  <span class="hidden">World!</span>

// JavaScript
$('.hidden').css('opacity', 0);
$('.js-hover').on('mouseover', function(){
  $('.hidden').stop(true).animate({opacity: 1}, 2000);
}).on('mouseout', function(){
  $('.hidden').stop(true).animate({opacity: 0}, 2000);


  • We need to manually handle the animation queue
  • Need to manually set and reset default state

Ultimately, this simple effect belongs in the CSS.

<div class="hoverable">Hello
  <span class="hidden">World!</span>

// CSS
  opacity: 0;
  transition-property: opacity;
  transition-duration: 2s;

.hoverable:hover .hidden{
  opacity: 1;

Why is this better?

  • Simpler Code
  • Easy to maintain in the CSS
  • No animation queue


  1. Create tabs to show and hide content.


1st Tab 2nd Tab

First Content

JavaScript Implementation

<a href="javascript:;" class="js-tab" data-tab="content-1">
  1st Tab
<a href="javascript:;" class="js-tab" data-tab="content-2">
  2nd Tab

<p class="js-tab-content" id="content-1">First Content</p>
<p class="js-tab-content" id="content-2">Second Content</p>
 // JavaScript

$('.js-tab').on('click', function(){

  var content_id = $(this).data('tab');
  $('#' + content_id).show();

Javascript Tabs

1st Tab 2nd Tab

First Content

Second Content

CSS Implementation

<label for="tab-1">1st Tab</label>
<label for="tab-2">2nd Tab</label>

<input type="radio" id="tab-1" name="tabs" checked>
<p class="tab-content">First Content</p>

<input type="radio" id="tab-2" name="tabs">
<p class="tab-content">Second Content</p>
// CSS
  display: none;
[name="tabs"]:checked + .tab-content{
  display: block;

CSS Tabs

First Content

Second Content


What are the Pros and Cons of each solution?

(Tip: JavaScript is better here.)

Updated Requirements:

  1. Create tabs to show and hide content.
  2. Animate content on change.

CSS and Javascript Together

Best Friends Forever.

(Also, we're almost done, I swear!)

<a href="javascript:;" class="js-tab" data-tab="content-1">
  1st Tab
<a href="javascript:;" class="js-tab" data-tab="content-2">
  2nd Tab

<p class="tab-content active" id="content-1">First Content</p>
<p class="tab-content" id="content-2">Second Content</p>
// CSS
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transform: translate(0, 100px);
  transition: all 200ms;

  height: auto;
  opacity: 1;
  transform: translate(0, 0);
 // JavaScript
$('.js-tab').on('click', function(e){

  var content_id = $(this).data('tab');

  $('#' + content_id).addClass('active');

CSS and Javascript Tabs

1st Tab 2nd Tab

First Content

Second Content

Car Analogy:

Specifically, when you update climate controls, what happens?

More Advanced Topics!

  • BEM: Structured CSS
  • MVV*: JavaScript Model/View Frameworks
  • SASS: CSS on Crack

Next Time.

(It's okay if you were about to get up and leave.)


I don't bite.


"If you can dream it, you can do it."

- Walt Disney