HTML, CSS & JavaScript: The Basics Part II

Becoming a proficient web developer is hard — but understanding the basics isn’t. By the end of this tutorial, you should have an idea of what people mean when they talk about HTML, CSS and JavaScript.

Von Kira Schacht
6/18/2016

This is part two of our tutorial on HTML, CSS and a little bit of JavaScript. In the last part, we learned about the basic functions of those three languages and have gotten to know a few useful HTML commands. If you’ve already read part one or you know all of that stuff anyway, this is the perfect spot for you to continue – by learning about CSS and how to implement JavaScript libraries into your webpage. Let’s get right to it!

CSS

CSS is short for Cascading Style Sheets. It’s a neat way to tell your browser how it should make your webpage look. You can style your HTML code in different ways.

For small adjustments, it might be enough to use inline style. With this method, you specify the style adjustments for specific elements right in the elements tag. For example, we talked about the <span> element in part one. This is how you would use <span> and some inline style to colour part of your sentence: 

<p>My favourite color is <span style="color:red">red</span> like my hair.</p>
Here, you can use the command style like an attribute. You can specify multiple things in one inline style attribute, like specifying style="color:red;text-align:right" to change text alignment and color in one go, but make sure to put quotes around the entire thing or it won’t work.

Of course, there are a lot more possible settings than just the text color:

  • You’ve just learned what color does. You can choose from the default color names or specify by hexadecimal code or rgb color code.
  • background-color sets the background color of the current element. That could be some text or an entire paragraph, a section defined by a div or even the whole body of the document.
  • font-family specifies the font for an element.
  • font-size specifies the size of the current text element.
  • text-align lets you choose to align the text left, right, centered or justified. initial chooses the default value and inherit aligns the text according to the alignment of its parent element.

There’s more, but let’s just work with that for now. Try using inline style to change the above properties in you HTML document that you’ve created in part one of this tutorial.

If you want to define a lot of properties or edit a lot of elements, inline style might be a little inconvenient. Thankfully, there is a different way: You could use the style tag. Anything you type between <style></style> in your document will be interpreted as CSS commands. You’ll usually do that in the head, since it counts as meta information. But if you write some CSS code in the head of your document, how is your browser supposed to know which element you’re referring to?

That’s why there are things called ids and classes. For every HTML element in your document, you can define one (or even multiple) classes and a unique ID. It will look like this.

<div class="red pushright" id="a1">
   some text
</div>
<div class="red">
  more text
</div>
<div>
  this one doesn't have any class
<div>

We just gave the first div the classes red and pushright as well as the ID a1. The second one only has the class red, and the third one doesn’t have any class or ID at all. Classes are usually used for a larger amount of element that should have the same CSS properties. IDs are usually unique and are a useful way to single out one specific element you want to manipulate.

Let’s use CSS in our <style> tags to turn the text color of anything with the red class to red and to align right any element with the class pushright. The element with the ID a1 should be in bold print. Also, all divs without any classes should have the text color purple and be aligned left. It would look something like this:

<style>
div {
   color: purple;
   text-align: left
}
.red {
   color: red
}
.pushright {
   text-align:right
}
#a1{
   font-weight: bold
}
</style>

If you copy and paste the above text into the <head> of your document, you should see the changes we wanted to apply the next time you refresh the file in the browser.

There’s one mystery though. The first style rule is supposed to apply to all <div> elements and change their text color to purple. But two of our divs are red anyway. Of course, that’s because they have the red class, and apparently, the style rules for classes are stronger than those for general elements if there’s a contradiction.

In reality, it’s a little more complicated than that. There’s whole tutorials centered around the so-called specificity rules of CSS that determine which style rules get applied and what place in the CSS hierarchy they occupy. If some rules don’t get applied even though you think they should, it’s probably a specificity error. As a basic rule, though, we can remember this hierarchy, in order from highest to lowest priority:

  1. Inline style
  2. IDs
  3. classes
  4. general elements

Try to play around with these CSS settings a little. In the meanwhile, we’ll take a quick look at how to incorporate JavaScript libraries into your webpage and how to manage the files that make up your site.

JavaScript libraries

JavaScript is quite a powerful language that lets you manipulate pretty much everything about your webpage. It might get complicated pretty quickly though if you want to create more complex elements. Thankfully, you don’t have to do all the work yourself. There are lots of JavaScript libraries available online, bundles of functions that serve a specific purpose. If you want to code interactive maps for a webpage, you might be interested in leaflet, for example. Highcharts or the very powerful D3 library are a wonderful tool for creating all kinds of data visualizations. To use the functions provided in those libraries, you’ll have to import them into your current document.

Most libraries even provide tutorials on how to do that. The only thing you actually need about that are the files where the functions of the library are defined. you’ll find the links to those on the webpages of the libraries. Once you know where the files are, you have to options for importing them. You can either use a hosted version that the creators of the library have uploaded to their servers. In that case, just import them by typing

<link rel="stylesheet" href="http://www.example.com/path/to/stylesheet.css"/>

for CSS stylesheets or

<script src="http://www.example.com/path/to/script.js"></script>

for Javascript files into the head of your HTML document. That’s all there is to it!

If you want to be on the safe side, you can also download the files from the links provided and save them on your own computer. If you do that, just replace the URL in the above commands with the path to the files on your computer. Not that scary, right.

File management: External files and file paths

While we’re at the topic of importing external scripts, let’s take a quick look at file management before we call it a day. Until now, we’ve coded our entire webpage in a single document. we’ve embedded CSS code with the <style> tags and JavaScript with the <script> tags. Once you build more complex pages, that might mean your document will get pretty lengthy and confusing. There’s an easy way out, though: Just save your CSS code as a .css file and your JavaScript bits as a .js file. It’s helpful to create a new folder to keep all the files in one place. The HTML document then serves as the hub that combines all the files into one page, which is why it’s customary to name your main HTML document index.html.

Then, you can refer to the files in the same way we explained above for libraries – after all, they’re nothing but scripts and style documents themselves.

<link rel="stylesheet" href="path/to/stylesheet.css"/>
<script src="path/to/script.js"></script>

If you put the links to the files in the same place we put the scripts and style rules before, there should be no difference between separate and joint files.

When specifying the file paths, you don’t have to use the complete paths. It’s possible to do so, but it’s not advisable. Because if you move your folder or decide to deploy your page to a server instead of keeping it on your computer where only you can see it, the paths change and your index.html won’t be able to locate the files it needs. Instead, you can use the relative file path, meaning the path relativ to the current location of your index.html. So if you keep all your files in one folder, it should just be enough to only specify the file name. That will make it look in the current directory. If your files are in a subfolder, just specify the path from index.html to the file with "subfolder1/subfolder2/filename.css", for example. If the file is located in an above directory, ".." is what you need to type to get to the parent directory of the current one. So if (for some reason) your files are organized like this:

Then what you need to type to get from you index.html file to your script.js file is:

"../../scripts/script.js"

That’s all, folks!

That’s it for today. We hope you got a vague idea of what to google if you want to learn about web development. This is a wonderful step on your journey towards becoming a proficient web developer – or, at least, towards understanding what the heck those proficient web developers are talking about. We’re going to dive a little deeper into the world of HTML, CSS and JavaScript in our next tutorials. You’re going to get to know some interesting libraries and tutorials on how to build webpages and interactive graphics yourself. So we hope you stick around for a while! In the meantime, feel free to comment or join our slack team if you have any questions or if you just want to say hi. See you soon!

Credits for the awesome featured image go to Phil Ninh