CommonLounge Archive

Getting Started with HTML and CSS

June 22, 2017

In this lesson, you’ll learn:

  • What is Web Development?
  • The basics of writing HTML and CSS
  • Writing your first HTML and CSS program right here in browser

What is Web Development?

Web developers create documents that can be viewed on the web browsers. The web page you’re reading is such a document. These documents are known as web pages. These web pages are written in a combination of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). Don’t worry about the long acronyms — HTML and CSS are quite simple to learn and you’ll be good at them in no time!

HTML is used to write the actual document—mainly, the headings, text paragraphs, bullets, numbered lists, images and so on that the web page displays. CSS is used to style the document—adding color to text, changing its size, and creating more complicated web page designs you see today. HTML and CSS are not programming languages—they simply define content to be displayed on the internet. In this tutorial, we will introduce you to just the basics of HTML and CSS, so that you can start feeling comfortable with them.

Let’s get started!

Introducing HTML (and your very first HTML program!)

As we learned above, HTML is used to define the elements of a page. Elements include titles, paragraphs, images, links, forms and more. These are the basic building blocks of a page.

Elements are created by writing tags, which are keywords surrounded by < and >. For example, the HTML element for a paragraph is <p>.

Opening and Closing Tags

Let’s write your very first HTML program that displays just a single paragraph. It looks like this:

<p>Your text here.</p>

You can hit the “Try it Now” button to make the code execute and see the result right here within CommonLounge.

Let’s dive deeper and see what’s going on.

The first tag, <p> is called the opening tag, and the last tag, </p> (with the forward slash) is called the closing tag. Anything between the opening and closing tags is what the element contains. This could be text or other elements.

So, that’s our most common and most basic tag — the paragraph tag. It’s written as <p>...</p>

Defining attributes in an HTML tag

You can define attributes of the element inside the opening tag. For example, to create a link to another web page, we will use the anchor tag (<a></a>). We need to specify two things here:

  • The text of the link. For example, if we wanted to link to Google, and wanted to create a link like Google, the text of the link is “Google”
  • The destination of the link. The above link links to https://google.com — so we need to specify that in addition to the text.

Thus, when we need to specify extra data besides just the text of an HTML element, we need to do so with attributes. Now, for the anchor tag <a>, we will specify the destination of the link using an attribute called href:

<a href="https://www.google.com">Google</a>

Hit “Try it now” button and see what a default link looks like. It should look like this (the image below has been enlarged — you should see a much smaller text size)

Note that the tag for a link is <a> since it’s actually called Anchor Link.

Defining multiple attributes in an HTML tag

Let’s see how we can put images in our web page. We can do this using an <img> tag.

<img src="https://static.commonlounge.com/fp/original/pD4M1rb0GwxEJ3pBepAF63Jrx1550189962_kc" ></img>

Great! You learned one more cool thing in HTML.

Now, what if we wanted to restrict the height of our image to 30 pixels? (For now, don’t worry about pixels — think of it as a unit of measuring distance in HTML/CSS. We will cover this in much more detail later in the course.)

To add height to our image, we will specify it as another attribute. You can add multiple attributes to an opening tag as long as you add a space between them. Thus, the HTML below defines an image by specifying the image’s file path (src) and height.

<img height="30" src="https://static.commonlounge.com/fp/original/pD4M1rb0GwxEJ3pBepAF63Jrx1550189962_kc" ></img>

That’s all. Notice that we don’t have anything inside the img tag — everything we need is specified via attributes. Let’s look at a way to shorten our code in such cases next.

HTML Elements without a closing tag: Empty elements

<img height="30" src="https://static.commonlounge.com/fp/original/pD4M1rb0GwxEJ3pBepAF63Jrx1550189962_kc" />

Also notice that in the img tag above, we closed the tag by ending it in />. So you can either write <img ... ></img> or just <img .../> if there is no content between the tag start and end (as is the case with img tags).

Some tags don’t need a closing tag and don’t have any contents. HTML elements with no content (like img tag) are called empty elements.

Empty elements do not have an end tag. Another empty element is the <br/> element. It indicates a line break. It just puts a horizontal grey line to indicate a separation between two sections. It has no content inside the element — the element can stand by itself. So while there can be content inside a <p> element (such as the text content within the div), there’s no content inside the <br/> element, and hence the <br/> element doesn’t have a closing tag — the opening tag has a / indicating that there’s no closing tag following it.

Also, the following two are equivalent and valid:

<p></p>

is equivalent to:

<p/>

Structure of an HTML document

While we have been writing snippets of HTML code, an HTML document is supposed to follow a certain structure. Let’s look at the smallest possible HTML document that has most of the elements that are recommended to be present in a 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. Think of it as the basic structure that will form the basis of all the code you write here.

The <head> element includes all of the information about your document. None of the contents of <head> will be visible on the page, but they are important for the browser to display the page correctly.

The <body> element is where you will put all of the HTML elements that you want to display on the actual page. All contents of the page must be written between <body> and </body>. (This is very important!)

If you want to view your document in the browser, find the file on your computer and double-click it. If that doesn’t work, drag the file into an open browser window.

As we saw above, if you haven’t written anything in the body, you won’t see anything. If you update the HTML document, refresh the page in your browser to see the changes.

Introducing CSS

CSS is written to add style to an HTML document.

CSS uses selectors to select certain parts of an HTML document in order to apply new styles to them. You can select all elements of the same type, or you can select specific elements by their attributes, even creating custom attributes to fine-tune which elements you’d like to apply styles to.

Once the HTML elements are selected, you can list the properties you would like to change and define a new value for each.

The format is:

selector {
  property: value;
  property: value;
  ...
}

You can add as many property-value pairs as you’d like for each selector. By adding multiple “blocks” like the one above to your CSS document (using different selectors), you can create the styles of an entire page.

For instance, if you wanted to style all of the links (<a></a>) in your HTML document, you could write:

a {
  color: red;
  font-family: Helvetica;
  font-weight: bold;
}

Here, you start the first line with a because you want to style the link tag, which is wrapped in <a></a>. If you were styling a heading like <h1></h1>, your first line would’ve started with h1.

Next, let’s look at the two approaches we can use to add CSS styles to our HTML file.

Writing CSS inside the HTML file using <style> tag

In the first section of this course, we will just include the CSS styles inside a special <style> tag within the <head> element of our HTML file. An example of this looks like this:

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      a {
        color: red;
        font-family: Helvetica;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <a href="https://www.google.com">Google</a>
  </body>
</html>

As usual, you can run the code using Try it now button. This is what the previous link looks like after applying the above styles:

This selects all items that match the tag name of a, then sets the font color property to a value of “red,” the font-family property to a value of “Helvetica,” and the font-weight property to a value of “bold.” (If a font-family is not available on your computer, it won’t display the font, and the browser will fall back to one of the available fonts.)

We will use this approach for all the “Try it now” examples in this course. However, when you write code on your own computer later in the course, we recommend writing CSS styles in their own file. You will learn about this later, but keep in mind that that’s the recommended practice.

Now you know the very basic building blocks of Web Development! Next, let’s do a quick project to solidify our learnings.

© 2016-2022. All rights reserved.