How to write HTML and CSS on your own computer

February 27, 2019

So far, we have learnt a lot without actually writing HTML and CSS on our own computers. You may be wondering that while executing code right here on CommonLounge was great for learning, real developers seem to write code on their own systems. This is where this tutorial comes in! You will step up your game and learn to run HTML and CSS code on your own computer.

What softwares do I need?

The best part about learning HTML and CSS is that you don’t need to install any complex software! All you need is a modern web browser like Chrome or Firefox, and a text editor like Atom, VS Code, Sublime Text 2 and so on. In fact, it’s likely that you already have one or both of these already installed!

Let’s look a quick look:

The Browser: If you don’t already have Chrome or Firefox, install one of them on your computer by following the instructions for Chrome or Firefox. While Chrome and Firefox are our recommended browsers due to their extensive developer tools, you can easily follow everything by working with Safari, Opera or any other browser.
The Code Editor: We recommend installing any one of Atom, VS Code or Sublime Text 3 (paid). If you want a detailed comparison, please check out our tutorial on Code Editors here: Code Editors.

Creating an HTML document

Begin by creating a new document in your shiny new text editor.

Create a folder for your new web project and save the document inside the folder as index.html. The file extension must be .html for the file to display properly. Make sure you don’t have something like index.html.txt

Now, copy and paste the following tags into your HTML document. These form the basis of every web page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

The code above doesn’t seem to do anything. It’s just a scaffolding for your HTML documents.

Creating a CSS Document and linking it to HTML

Inside the project folder you created, create another folder called css. Create a new document with your plain text editor and save it inside the css folder as style.css. Then, in your text editor, add this line to the very top of the new CSS document:

@charset "utf-8";

This is important for your browser to display the CSS correctly. Under the @charset line, you can add each of your styles on a new line to create your CSS document.

The final step is to link the CSS document to your HTML document so the styles will be applied in your browser. Add this line inside the <head> element of your HTML document to “link” the CSS document to it.

<link rel="stylesheet" type="text/css" href="css/style.css" />

If you’ve placed your CSS file inside the css folder correctly, the two documents should now be linked. Note that if you’re using a Windows-based computer, you may need to use backward slashes \ instead of forward slashes / in the href path, so "css\style.css". Try including the link styles above in your CSS document and adding an <a> tag to your HTML document to see if it turns red.

You can link multiple stylesheets to one HTML document by adding multiple link tags and changing the href attribute to match the file path of the CSS file you’d like to link.

As a rule, CSS should always be written in a separate file from the HTML document, and thus, this approach is highly preferable over the approach of writing CSS styles within the HTML file that we have been following so far.

(Bonus) Problems with Browsers

Note that sections marked as Bonus are optional — you can safely skip these and carry on if you wish, but we do recommend coming back to them later.

All browsers are slightly different, and may display web pages differently. This can be fixed by including a reset CSS, which applies default styles to your page in order to erase all the differences among browsers. This creates a “blank slate” for web developers to start designing from. This is what a sample Reset CSS looks like:

/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video 
{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section
{
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after
 {  content: '';
  content: none;}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

If a person hasn’t updated their browser in a long time, it may not display some of the latest features of HTML or CSS. This can be fixed by adding “fallbacks”—HTML and CSS that are designed to display only on older browsers that can’t use the latest features. Some people choose to ignore older browsers completely and ask users to upgrade to the latest version instead.