Introduction

HTML and CSS are so intimately connected that it's hard to teach one without the other; they've worked hand in hand to build much of the web content we see today. In this short article, we'll aim to teach the gist of each language as quickly as possible to build our first website!

Background and terms

HTML, or HyperText Markup Language, is a language that adds text to web pages. It then breaks this text into sections called elements, also known as tags. These are found in our .html file.

On the other hand, CSS, short for Cascading Style Sheets, is instead concerned with styling the content inside the HTML elements (e.g. the text, space, etc). It does so using declarations, meaning property-value pairs, and we target which HTML element we want to style using similarly named CSS selectors in our .css file.

Syntax

For example...

HTML adds the texts and names each section using elements, like so:

<div>
  <h1>Headline</h1>   
  <p>Hello, world</p>
</div>

In our .html file, <div>, <h1>, and <p> are built-in HTML elements, and we end them with their respective closing elements using a forward slash. You can think of <div> as sectioning off html code, <h1> short for "headline 1", and <p> short for "paragraph". HTML convention is to indent code 2 or 4 spaces for readability.

However, CSS focuses on styling those elements above. We'll target those HTML elements using h1 and p selectors below, where, for example, text-decoration is the property, underline the value, together making a declaration. This is what our .css file would look like:

h1 {
  text-decoration: underline; 
}

p {
  color: red;
}

This will give the following simple output on your browser when we open our .html file:

Simple enough, right?

We create the text we want to see in our HTML, then target that text in CSS to style it.

In this way of separating the main tasks of a web page, that of the text, and then styles, allows the programmer to more easily manage the task of building the whole of a website.

Here's a list of the most frequently used HTML elements for you to start getting familiar with:

1. <div>

2. <h1>, <h2>, <h3>, etc..

3. <p>

4. <li>, <ol>, <ul>

5. <a>

6. <button>

7. <img>

8. <input>

9. <span>

10. <textarea>

We target these and all built-in HTML elements using that same syntax above - by using the HTML element's name in the CSS file (/* and */ is how we comment out code in CSS):

span {
    /* declarations here... */
}

textarea {
    /* declarations here... */
}

/* ...etc */

Targeting specific HTML elements

Most of the time, our website will have many of the same elements. How would we target a specific p element, for example, if we have several p HTML elements?

We would do so by adding a class or id attribute to our HTML elements, and then using a class or id selector in our CSS file, depending on which attribute we used. Attributes simply further customize HTML elements.

To add either a class or id attribute, we do so using the following syntax:

<p class="text1">first line of text</p>
<p id="text2">second line of text</p>

Use the following CSS syntax to target either one:

.text1 {
    color: blue;
}

#text2 {
    color: yellow;
}

By similarly naming our class and id selectors in our CSS file, we target the specific HTML element we want to stylize. The first p element hence will be colored blue, but our second p element will be colored yellow.

The pattern of identical names is the same pattern we saw when targeting the built-in HTML elements in the previous section. However, this time, the syntax is to prepend either a . or a # to that CSS selector - a dot for an HTML element with a class attribute, and a hashtag for an id selector.

In general, you would use the class attribute to target multiple HTML elements of the same name to style them all in the exact same way. You'd instead use an id attribute on an HTML element that you intend to style only once. For example, if you have multiple headlines using the h1 element, you would want to use a class attribute on them to style the h1 elements in the same way. However, if for some reason you wanted to style a specific h1 element in a different way than the rest, use an id attribute on it instead.

Putting it together

Now, let's connect everything we've learned to build our first website. To do so, we'll make 2 files in the same folder called index.html and styles.css and open files in any IDE. This is the common naming convention when building websites. We'll use an IDE called Visual Studio Code, aka VS Code, here. You can download it at https://code.visualstudio.com. Others include Visual Studio, IntelliJ, and Sublime Text.

1. Create a new folder anywhere on your computer, and name the folder website. Open VS Code and go to the Explorer tab in the sidebar at the top (a 2 paper icon) -> open folder, and open that newly created folder.

2. Go to file -> New text file in VS Code. Name it index.html (you can save the file in order to name the file).

3. Add the following boilerplate HTML code to the top of that file - the elements simply tell the browser basic things like language ("en" = English), file type (.html), etc:

   1.  <!DOCTYPE html>
       <html lang="en">
         <head>
           <meta charset="UTF-8" />
           <meta http-equiv="X-UA-Compatible" content="IE=edge" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <title>First website</title>
         </head>
       </html>
      

4. Your VS Code should now look like the following:

   

5. Now we'll add the body to our HTML file right below the head element - anything in our body element will be seen by the viewer of the website:

   1.  <!DOCTYPE html>
       <html lang="en">
           <head>
               <meta charset="UTF-8" />
               <meta http-equiv="X-UA-Compatible" content="IE=edge" />
               <meta name="viewport" content="width=device-width, initial-scale=1.0" />
               <title>First website</title>
           </head>
           <body>
               <div>
                   <h1>Headline</h1>
                   <p>Hello, world</p>
               </div>
           </body>
       </html>
      

6. Create a new .css file in the same way described in step 2. Name it styles.css. Add the following CSS code:

   1.  h1 {
         text-decoration: underline; 
       }
      
       p {
         color: red;
       }
      

7. Now that we have our HTML and CSS files, we can link them. This allows the website to apply the styles in our CSS to the HTML when we open the website. Nest the following link element in the head element of the HTML file (<!-- and --> is how we comment out code in HTML):

   1.  <!-- ... -->
         <head>
           <meta charset="UTF-8" />
           <meta http-equiv="X-UA-Compatible" content="IE=edge" />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      
           <link href="css/styles.css" type="text/css" rel="stylesheet" />   
      
           <title>First website</title>
         </head>
       <!-- ... -->
      

8. Now in VS Code, navigate to the Extensions tab in the sidebar, and install the "Live Server" extension. This will allow us to view our website locally:

   

9. Navigate back to the Explorer tab in the sidebar -> right click the HTML file index.html -> Open with Live Server.

You should now have a live view of your website! Feel free to make changes and you'll see it instantly update in the browser.

Summary

You have successfully created your first website! Here are the takeaways:

1. The syntax structure of HTML and CSS:

   • HTML:

   •   <element attribute="value"> Text </element>
     

   • CSS

   •   elementName {
         propertyName: value;
         propertyName2: value;
       }
     
       .className {
         propertyName: 'string';
       }
     
       #idName {
         properyName: 10;
       }
     

2. HTML elements add text and provide sections to your website, while CSS selectors style that text using nested declarations.

3. HTML attributes further customize our elements. For example, we target a specific HTML element by adding either a class or id attribute to that element.

4. We connect our HTML and CSS files using the link element in the HTML file.

5. We can use extensions like Live Server in IDEs to be able to locally view our web files in a browser by opening the .html file, without having to host these files on a server somewhere.

If you like what you read, please follow my twitter on full stack development where ill post short programming tips and tricks.