Grow your CSS skills. Land your dream job.

Web Technologies Hanging Out Together

Published by Chris Coyier

As a beginner, understanding how the different languages you learn interact with each other can be confusing. I thought we could pair up a variety of languages to see where they intersect and communicate.

HTML and CSS

You need HTML to have CSS, because HTML calls the CSS. In an HTML document, you'll likely see some HTML like this:

<link rel="stylesheet" href="style.css">

That is an HTML element (<link>) calling some CSS that will then be applied to the HTML. Or you might see a "style block" like this:

<!-- this <style> tag is HTML -->
<style>
  /* The stuff in here is CSS */
  .message {
     padding: 20px;
     background: lightyellow;
     border: 1px solid yellow;
  }
</style>

The typical connection between HTML and CSS is with selectors. An HTML element might have an ID or class, which doesn't do much by itself, but is there for CSS to find it and style it. Like:

<div class="module message">
  <h2 class="positive">
    Good afternoon!
  <h2>
  <p>
    You look nice today.
  </p>
</div>
.module { /* will apply to <div class="module message"> */
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
}
.message { /* will apply to <div class="module message"> */
  border: 1px solid yellow;
}
.positive { /* will apply to <h2 class="positive"> */
  color: lightblue;
  font-weight: bold;
}

CSS can even be applied directly to elements in HTML. In that case there is no selector, just properties and values:

<div style="padding: 10px; background: red; color: white;">
  Emergency!
</div>

Using CSS this way is generally frowned upon because it doesn't take advantage of what HTML and CSS do so wonderfully together: separate content and style.

HTML and JavaScript

You need HTML to call JavaScript. In an HTML document, you might see:

<script src="script.js"></script>

That is an HTML element (<script>) that calls a JavaScript file that will then run in that document. Or you might see a script tag with no source, an inline script block:

<!-- the <script> tag is HTML -->
<script>
  // The stuff in here is JavaScript
  var header = document.getElementById("main-header");
</script>

You might also see JavaScript directly on HTML elements, like this:

<button onclick="doSomething();"></button>

Using JavaScript "inline" like that is generally frowned upon, because it isn't very efficient and doesn't separate the concerns of content and interaction.

Another relationship between HTML and JavaScript is that JavaScript can control the DOM. The DOM is essentially what HTML turns into when a browser reads it. You can read more about that here.

JavaScript can create new HTML and insert it onto the page:

// Create new element
var modal = document.createElement('div');

// Set attributes and content
modal.id = "modal";
modal.innerHTML = "\
  <h1>Important Message</h1>\
  <p>You're cool.</p>";

// Put in the <body>
document.documentElement.appendChild(modal);

JavaScript can remove elements from the page as well:

var reference = document.getElementById("goner");
reference.parentNode.removeChild(reference);

JavaScript can alter the content of existing elements as well:

var reference = document.querySelectorAll("#modal > h1");
reference[0].innerHTML = "This title has been changed by JS!";

JavaScript and CSS

JavaScript can find out about an element's style:

<div style="color: red;" id="test">test</div>
<script>
  var div = document.getElementById("test");
  console.log(div.style.color);
  // red

  // and/or *set* it like:
  div.style.padding = "10px";
</script>

But that only works for an elements inline style attribute (or styles set in that way). JavaScript can also get all the styles on an element, even those that came from CSS elsewhere:

<style>
  .test {
     margin: 30px;
  }
<style>

<div class="test"></div>

<script>
  var div = document.querySelectorAll(".test")[0];

  var styles = getComputedStyle(div);

  console.log(styles.margin);
  // 30px
</script>

More commonly, because JavaScript is our primary means of handling interactivity on websites, we use it to control other elements. Here's a simple example of a button that, when clicked, toggles the whether you can see another element or not:

<button class="button">Toggle Another Element</button>

<div id="message">Message</div>
var button = document.querySelectorAll(".button")[0];
var message = document.querySelectorAll("#message")[0];

button.addEventListener("click", function() {
  if (message.style.display == "block") {
    message.style.display = "none";
  } else {
    message.style.display = "block";
  }
});

Perhaps even more common (and generally considered to be responsible) is to only manipulate class names on elements, rather than styles directly. Then let CSS handle the styles (which includes whether it is visible or not). It ends up being easier anyway:

#message {
  display: none;
}
#message.show {
  display: block;
}
var button = document.querySelectorAll(".button")[0];
var message = document.querySelectorAll("#message")[0];

button.addEventListener("click", function() {
  message.classList.toggle("show");
}, false);

See the Pen qidGm by Chris Coyier (@chriscoyier) on CodePen.

HTML and PHP

The HTML you work with might actually be in a back end language like PHP and is processed and delivered as HTML. Imagine a template for a blog:

<h1>
  <?php echo $postTitle; ?>
</h1>
<div class="post-content">
  <?php echo $postContent; ?>
</div>

In this article we're just using PHP as an example of a backend language. But it could just as easily be Ruby or Python or the like.

You'll recognize HTML there, but PHP mingled in. That is just a generic example of outputting values that a backend language might be in charge of. The web browser never sees the code like that. By the time it makes it to the browser, it will look like regular HTML:

<h1>
  How To Survive A Flight Delay Without Tweeting About It
</h1>
<div class="post-content">
  Step one, grow up.
</div>

As a front end person, you might think of PHP as the link between information in a database and HTML.

Another possibility would be outputting different HTML based on information you know on the server.

<?php $userLikesCheese = doesUserLikeCheese($user); ?>

<?php if ($userLikesCheese) { ?>
  <div class="modal">
    Congrats on loving cheese, cheese lover!
  </div>
<?php } else { ?>
  <div class="modal">
    Some other way more boring widget.
  </div>
<?php } ?>

PHP and JavaScript

Speaking of a database, you might need information that comes from the server in JavaScript.

JavaScript also has the ability to make a request to a URL all on its own. Imagine clicking a "like" button on a page. You wouldn't expect that to refresh the entire page. Instead, that action might make a request to a PHP file on your server that's job it is to save that information.

var button = document.querySelectorAll(".button")[0];

button.addEventListener("click", function() {
  var xhr = new XMLHttpRequest();
  xhr.onload = likeSuccess;
  xhr.open("get", "/save_like.php", true);
  xhr.send();
});

function likeSuccess() {
  button.innerHTML = "You Like Stuff!";
}

See the Pen gomvI by Chris Coyier (@chriscoyier) on CodePen.

PHP and CSS

Just like PHP documents can be processed and served as HTML, the same can happen with CSS. This means you could do things like utilize the power of PHP variables in CSS. I've written about this before, but I'd argue today this isn't a particularly good idea. I'd recommend instead taking a look at CSS preprocessing.

Another connection is using PHP to alter class names or attributes, and then CSS acts accordingly.

<body class="<?php echo $bodyClass; ?>">

  <header>
     Probably a logo and stuff.
  </header>

</body>
header {
  height: 100px;
}

/* header is bigger on homepage */
body.home header {
  height: 200px;
}

Of course it gets way more complicated.

It should go without saying, right? Sometimes it just is. But these aren't just "the basics" - they are foundational concepts that more complicated things are built from.

Perhaps you learned how to make an Ajax request with jQuery and it doesn't look like the one I did above. Well, somewhere in that jQuery library, which is written in JavaScript, it's doing that same thing. It's just got some extra stuff in there to make sure it works in older browsers and adds convenience for you.

Perhaps you're using Angular and the way you change stuff on the page is with weird {{angle brackets}} in your HTML. That's nifty, but somewhere Angular is doing something with "raw" JavaScript. An .innerHTML is being used or a node is being replaced, who knows. The people who work on Angular figured out the best way to do it and that's what it does.

Maybe the CMS you use at work has some different looking templating system. That's cool. I'll bet you a billion bucks it gets turned into HTML before it hits the browser, because that's how this all goes down.

The point: it's all related.

You can be better at some of these languages than others. All of us are. Totally fine. But it is important to understand how they fit together. That's all of our jobs.

My inspiration for this came from my own utter confusion when I'd hear someone from some startup rattle off their "tech stack" and I just didn't comprehend how all those things could possibly fit together to build one thing. I'm still confused, but it doesn't matter. I understand how the parts fit together well enough that any part I've never heard of is surely just some newfangled way to handle the same pieces of the web tech pie that we all deal with.

Comments

  1. Might be worth mention that when JS is server side it’s relationship with HTML changes. Maybe thats outside of the scope of this article thought. Thought it was worth mentioning.

    Anyways, nicely written article. Would have been nice to have all this in one place when I was starting out. Especially PHP/JS interaction explanation. That took me way too long to figure out.

  2. Taariqq
    Permalink to comment#

    For a newcomer, a very good overview of how things interact. Gives a clearer picture that would have taken a few books to figure out.

    Just the other day I went to your ‘bookshelf’ page. Am starting off with Jen Robbins book. Thanks for the suggestion. That really is a very good book for the beginners. Covers things from modern perspective (and I have Brackets to tell me where things are not up to date, such as ). Also, what do you think of the new book out on JavaScript, ‘Speaking JavaScript’?

    Thanks for the guidance. Keep it up.

  3. Just wanted to say…Great post…I am sure this article will be helpful to new people starting out in this field.

    Thank you for writing an article aimed at perhaps the beginner, but that can still be enjoyed by an experienced web developer.

  4. I was enjoy the article, until the php stuff. At this point in development (specially for new comers), any other language is much better that php for back-end. The mentioned Python & Ruby are much better options (not to mention the new front-end frameworks like AngularJS or Meteor, or the super sensational NodeJs). Php is such a mess!

    tl:dr php is the new java. Don’t do it.

    • I think PHP is still the best back-end language for newcomers. It has a very low entry barrier. In it’s most basic usage it pretty much just extends the HTML which is probably all a beginner needs. Not to mention all of the most prominent CMS’s run on PHP.

      I say start with PHP and when your needs become a little more complex move on to something more suited to that.

    • Taariqq
      Permalink to comment#

      Agree with Halley. Look at Elance and what’s in demand. PHP is everywhere.

    • The code that processed these comments and allowed this discussion to happen is PHP :)

    • Gabe
      Permalink to comment#

      Hashtag hotdrama

      That’s a big ol’ dose of your opinion, right there, Cesar. Some people make a living on PHP development, not to mention the fact that the most popular CMS platforms on the planet run on it, one of them being WordPress, which literally powers ~20% of all websites including this one, if I’m not mistaken.

      So yeah, PHP isn’t going anywhere anytime soon.

    • You have some good points to consider. Still:

      Halley: with PHP is very easy to get lost in a labyrinthine code, and a single mistake could ruin lots of things. For a new comer, that the surest way to hate life. when it comes to the HTML expansion, Front-end frameworks is the way to go.

      Chris: I think that using WordPress is quite different to completely code with PHP, since you barely have to touch anything behind stage when using a CMS. That’s a good example of what PHP is ( or should be): a machine code, totally unfriendly to the user.

      Gabe: PHP is a child (more like an abortion) of its era. It might been good back then, but is time to move on more comprehensible, coherent languages. I mean: ( . ” ‘, ‘ ” . $password . ” ‘ ) ” ); … what kind of misanthrope comes with that!

      Taariqq: Elance is a “bottom feeder”, always lowering the bar, and underpaying the job of developers… it sucks almost like PHP.

      TL:DR: if you want a better world destroy_php();

    • Taariqq
      Permalink to comment#

      re: Elance. You may be correct, but it at least gives one an idea as to what is in demand. And what does a newcomer want more than being employable asap. So, right after html, css, and perhaps javascript, what would I concentrate on? PHP for sure. Ruby and Python might be much better, so I will learn them after I’ve started making money with PHP and other technologies, in shaa Allaah (God willing).

      re: WordPress. If I am not mistaken, there are a lot of jobs out there employing php developers to tweak wp.

      Whether PHP is the best thing or not, I know I will get work if I know PHP. And to me at least, that is the bottom line now. Now, if I ever get to be so good that I could suggest to clients as to what technology to use, I might be able to pick what I want to program in. Until then, it is the market that drives everything. Plus, I’ve gone thru some php 4 & 5 before. And coming from a working knowledge of C, I am actually very happy and fond of PHP … for now at least :)

    • Taariqq,

      Your raise an important topic, employability. A few years from now (specially the last 3), I’ve seen that Ruby (on Rails) has become the new standard. I think right now is the most employable choice, and the most profitable for development neophytes.

      The way I see it, the “PHP knights©” are people already very experienced on it. Hey, that’s fine, if you can make amazing things with it, stick to your poison. Status Quo always have rationalizations for its permanence. Somewhere right now, there’s a COBOL engineer lobbying his/her cause. Think about it.

      TL:DR: If your new in web development, file a restriction order against PHP :)

    • Taariqq
      Permalink to comment#

      Cesar,

      Thanks for the pointer about Ruby on Rails. I will keep that in mind and once I am comfortable with HTML and CSS, and perhaps JavaScript, I will look into it.

      On the other hand, looking at TIOBE index, I still feel comfortable dealing with PHP first.
      PHP – http://www.tiobe.com/index.php/content/paperinfo/tpci/PHP.html
      Ruby – http://www.tiobe.com/index.php/content/paperinfo/tpci/Ruby.html

      Maybe Ruby on Rails is different. It seems like I need to know all these languages :)

    • Gabe
      Permalink to comment#

      My oh my, what have we here? I hereby apologize for feeding the troll.

    • Apology accepted Gabe. But please don’t do it again.

    • Marco Scannadinari
      Permalink to comment#

      @Halley – it doesn’t matter what the majority uses. The important thing is how well the language is designed.

  5. Permalink to comment#

    PHP foreva!

  6. Sravani
    Permalink to comment#

    One good blog to start with,for all those out there (including me ) tryng to connect the zillion web-technology dots.
    Thanks.

  7. Martin Muzatko
    Permalink to comment#

    the ugly and beautiful thing about creating websites, is that you can do it in so many different ways.
    There are about a hundred or more approaches to the same solutions. Even then – the details may also vary.

    See http://css-tricks.com/blue-box/

  8. Travis
    Permalink to comment#

    Perhaps not in the scope of this article, but it seems to me that if you intend to actually use these disparate pieces of the web-dev-pie together you need to understand the separation of roles. While the article explains how they each interact, it somewhat glances over which language is used for business logic, content, layout, style, behavior/interaction. It’s somewhat implied, but probably not plain enough for a beginner.

    • Taariqq
      Permalink to comment#

      A more detailed explanation certainly won’t hurt. When information comes in small chunks like this, it is easier to digest rather than while reading a 500 page book, to me at least.

  9. Phan An
    Permalink to comment#

    Cesar, I’m not sure if you really know PHP. From my point of view, you talk like someone who wants to show off your knowledge of programming languages – no offence.

    with PHP is very easy to get lost in a labyrinthine code, and a single mistake could ruin lots of things.

    This applies for every language. Actually with our favorites JavaScript, a single missing semicolon can render the whole script useless. And it’s good (strict mode everyone?)

    For a new comer, that the surest way to hate life. when it comes to the HTML expansion, Front-end frameworks is the way to go.

    What frameworks are you talking about? Libraries like Handlebars? jQuery? Underscore? Or the powerful AngularJS? Sure, PHP is not the best choice for HTML “expansion,” but neither is any server-side language – be it Python, be it Ruby etc.

    I think that using WordPress is quite different to completely code with PHP, since you barely have to touch anything behind stage when using a CMS.

    Wow… I don’t think you’ve worked with WP much. I’m pretty sure Chris has touched quite a bunch of PHP in order to come up with this complete site.

    That’s a good example of what PHP is ( or should be): a machine code, totally unfriendly to the user.

    If PHP is unfriendly, I don’t know what is. I can agree PHP is not the most beautiful language – Python must be it, but unfriendly? Not even close.

    PHP is a child (more like an abortion) of its era. It might been good back then, but is time to move on more comprehensible, coherent languages.

    Python was born in 1991. PHP, Ruby and JavaScripts were born in 1995. So I guess it’s safe to say they’re born in the same era. The reason PHP grew so fast to be the first choice for web is simply it was built for web. None of the others are built with web in mind (JavaScripts may slightly be an exception). So natually one would pick PHP for their web needs. If you are talking about frameworks and envs like Django, RoR, NodeJS… which make developing for web an elegant job, mind you, PHP has quite a few ones which do the same: Zend, Symfony, Cake, CodeIgnier, Falcon, Kohana, Laravel etc. Have you tried any of them?

    I mean: ( . ” ‘, ‘ ” . $password . ” ‘ ) ” ); … what kind of misanthrope comes with that!

    How do you do string concatenantion in other language then? Last time I checked, we don’t even have variable parsing in JavaScript, and that’s one of the reasons I so much love CoffeeScript!

    Elance is a “bottom feeder”, always lowering the bar, and underpaying the job of developers… it sucks almost like PHP

    This is very subjective… That’s all I can say.

    TL;DR: If you want a better world, don’t blindly hate. The best programmers I know, they simply don’t hate any languages. They may prefer one over another of course. Languages are just tools. Most of the time you hate a tool just because you don’t master it.

    • Hi Phan,

      You’re right about the “mistake making” in every language. But PHP problematic syntax makes it really hard to identify those mistakes, not to mention the lack of consistency, that at times seems capricious.

      You can get very deep with PHP in WordPress, which in my opinion defeats the purpose of using a CMS.

      For a new comer in web development, PHP is the path to desperation. At this stage there’s lots of better options like AngularJS, Meteor, Node… combine them with the modern noSQL’s and you can do much more, with less code and a better syntax.

      TL:DR: if you like PHP, you like Internet Explorer. :)

    • Phan An
      Permalink to comment#

      Cesar, why don’t you clarify your conclusion about PHP having a problematic syntax? Yes, I agree it lacks of consistency, but then it’s where the frameworks come into play.

      You can get very deep with PHP in WordPress, which in my opinion defeats the purpose of using a CMS.

      This is not true. You are mistaking between a user and a developer.

      For a new comer in web development, PHP is the path to desperation. At this stage there’s lots of better options like AngularJS, Meteor, Node… combine them with the modern noSQL’s and you can do much more, with less code and a better syntax.

      Quite the contrary. AngularJS, Meteor, Node, and noSQL are not for “new comers” at all. None of them can be used for day-to-day websites, or was created to. Not to mention, each language, framework, or combination serves a different purpose. Such bias opinions like yours are turning those great techniques into buzzwords.

      Also I would say, for new comers, “do much more with less code” is more dangerous than helpful, because it prevents a developer from posessing the foundation knowledge. Be a good JavaScript developer before touching AngularJS. Know CSS before using SASS. Learn Python before dive into Django.

      About your last setence… Do you know what TL;DR (it’s a semicolon btw) means? Because your TL;DR doesn’t have anything to do with your post.

    • Phan,

      For new comers, I’m talking about someone that has already experienced the frontal part (the html-css-js trinity), and decided to go further. I’m talking in sequential terms, like the described in the article. I’m not implying that someone that has never mangled a simple DIV starts immediately with javascript frameworks, LOL!

      To do more with less code, doesn’t mean you cheat by skipping the fundamentals. It means some languages do the exactly the same with less. If you need to travel 1000 miles, will you do it by car, or by unicycle? because both of them can take you to your destination. Programming languages are MEANS not ENDs.
      (By the way, those PHP frameworks that you mention, could be considered under your own therms “skipping the fundamentals”).

      TL:DR: TL:DR sometimes is used for humor, a challenge for some people.

    • Phan An
      Permalink to comment#

      Cesar, your definition of new comers is exactly what I have in mind, and still it doesn’t fit for the names you raised earlier.

      Your example of travelling 1000 miles doesn’t fit either, as none of us here mentioned about the project scales. Sure, you don’t travel 1000 miles on a bike, but you don’t drive though an Amazon forest in a Chevrolet at the same time. Or, may I quote myself:

      AngularJS, Meteor, Node, and noSQL are not for “new comers” at all. None of them can be used for day-to-day websites, or was created to. Not to mention, each language, framework, or combination serves a different purpose.

      I’d suggest you to counter my first comment to get directly to the points (that you raised yourself).

      And it’s funny to see where we’re heading to, but you really need to check TL;DR’s definition man.

    • Wait a second Phan, my definition of new comer is what you have in mind? those front-end literate people can’t use JS frameworks? c’mon man, don’t undermine your fellow! Those languages are far better than PHP for a front-end bandit. AngularJS is virtually the next natural step in html expansion. I see no scalability problem in any of the mentioned technologies. They are like the dirtbike with custom elements, according to the amazon terrain. PHP is more like, someone giving you a school bus for crossing the rain forest, and telling you “hey, it has a motor, you figure out”.

      TL:DR I can’t check the meaning of TL:DR because I lost my dictionary. Until someone invents a better way to access information I can’t enlighten you.

    • Phan An
      Permalink to comment#

      OK since you seem to choose to ignore your original points that started our debate, let me sum up (and yeah, it’s TL;DR for other people here, cut the non-sense sarcasm about enlightening please, that’s childish):

      To you PHP sucks (though you didn’t or couldn’t prove why), and you hate PHP, and you want to destroy it, and liking PHP means liking Internet Explorer.
      To me languages are just tool, pick the one that fits the job, and simply don’t hate.

      Since I don’t want to be this guy, let’s stop here.

    • I just have and epiphany: you worlds just convinced me to embrace PHP.
      Wait, let me re-check. No, it didn’t.
      Since my comments have being childish, allow me to departure with a display of class and maturity:

      If you like PHP, you like Nickelback.

      Enjoy you PHP hot mess.

  10. The php and javascript part was what i was looking for. Why are people complaining so much about PHP and so what is the best alternative to PHP ? ( that can be easily setup on a shared hosting site)

    • As to why some don’t like PHP … who knows.

      If you are developing for the web it is a reasonable choice of language, as are Python, Ruby, server side JS etc

      If you are, or are training to become, a professional web developer you will almost certainly encounter PHP on your travels so it is worth spending some time learning the basics. Maybe write a WordPress template or plugin – that way you’ll have a friendly way of learning some very sale-able skills.

      I don’t think there is a “best” alternative – all the good developers I know are at least comfortable with at least three or more languages, typically js, PHP and Python though they may have a favourite.

      More important for a beginner is to learn the hows and wheres of constructs you will find in every programming language – variables, functions, loops, switches etc

      Once you have your head around the fundamentals of programming the rest is really just syntax.

      For a shared hosting just check with the provider what languages the server is running or choose a host which offers the language you want.

  11. An Phan
    Permalink to comment#

    Cesar, a bit off-topic, this link might be useful for you. Notice Appeal to Ridicule section, the example there should sound familiar.

  12. standard-div
    Permalink to comment#

    Wonderful summary, thank you.

    For what it’s worth, I think css-tricks is the best source of general-info web technology education on the internet. It’s a perfect mix of “what works now” and “what’s coming”.

    I’ve actually stopped reading some of the more wonky ones (like html5rocks, which is pretty unfocused).

    thanks.

  13. Travis

    Wonderful article! Feel like I learned a lot.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".