HTML / CSS Tutorial

Quick and painless introduction to HTML and CSS

0. Introduction

This is a simple tutorial that will get you started quickly with HTML and CSS.

Although simple, it's meant to be quite comprehensive. You will learn quite a lot here. Anyway, we encourage you to widen your knowledge by reading the resources we include at the end.

1. Preparation

1.1 Download an editor

In order to follow this tutorial you need a code text editor. I recommend Brackets but you could use others like Sublime Text, Notepad++, Atom, etc.

1.2 Download the startup files

After installing your preferred editor, create a folder in your computer. That's where you will add your project files. For now, add these two files inside that folder (right click and save): index.html and main.css.

1.3 Open the files in the editor and browser

Open the folder in your editor. You can drag and drop the folder from the file explorer to the editor. Then open the index.html file. For now we will just edit this file.

Now open the index.html in a browser. If you use Brackets you can use the Live Preview feature: after opening index.html select File > Live Preview (or click the "lightning bolt" icon)

So now you should see the HTML code in the editor and the page in the browser, that should look like this:

It should look pretty similar. If you don't see the title in green color maybe forgot to download the main.css file.

2. HTML elements and tags

In the code of index.html you should now focus on the bottom part, that looks like this:

      
        
        

My HTML page

I will use this page to learn HTML.

Those are HTML elements. Notice that they are placed between <body> and </body>. The browser displays what you put inside there.

As you see, HTML elements are surrounded by those pieces of text with angle brackets like <h1> or <p>. Those are called tags. Each tag has a meaning. There are many tags but, for now, let's focus on a few:

h1 big header
h2 slightly smaller header
h3 even smaller header
p paragraph
a link
img image

3. Tags and their attributes

Let's add some HTML elements to our page, using the tags h2, img and a. Modify your index.html so it looks like this (new and modified lines are highlighted):

      
        
        

My HTML page

Introduction

I will use this page to display cat pictures.

Some pictures

If you use Brackets Live Preview you will already see the changes in your browser. Otherwise, save the index.html file and reload the page in your browser, which should look like this:

Notice that the img element uses just one tag. Most elements use an opening (e.g. <h1>) and a closing tag (e.g. </h1>) to surround the content of the element, but a few elements like img use only the opening tag <img>.

Also, notice that the a and img elements have some values inside the opening tag. Those are the attributes of the element.

Each element accepts some attributes. For example, the a element needs the href attribute to indicate the destination address of the link. Likewise, the img element needs the src attribute for the image url address.

Some attributes are optional. The height attribute can be used on an img, but if you remove it the image will still be displayed, only with the original size.

4. Style using CSS properties

You may wonder why the title is shown in green. The styles for the HTML elements are indicated in CSS files. For this tutorial you downloaded main.css. If you open that file in your editor, you will see the way we style the h1 element in green:

      
        h1 {
            color: forestgreen;
        }
      
    

That's a CSS rule. It says: take all the h1 elements and paint them in green (actually forest green, which is much more cool than just plain green). There are many available colors and you can even create your exact desired shade.

In that CSS rule, color is a property and forestgreen is the value you choose for it. In each CSS rule you may set several properties. There are a lot of properties to choose from. Let's see some popular ones:

font-size changes the text size
color changes the text color
background-color changes the background color
width sets the width of the element
height sets the height the element
border adds a border around the content of the element
margin adds a margin around the element (outside the border)
padding adds margin between the element and the border

Text-related properties like font-size and color only apply to text elements like h1, h2 and p. Other properties like margin and padding can be used in most elements.

Later we'll talk in more detail about the padding, border and margin.

For example, let's change the font size, text color, background color and padding of h2 elements. To do that, add the highlighted lines to your main.css:

      
        h1 {
          color: forestgreen;
        }

        h2 {
          font-size: 18px;
          color: white;
          background-color: forestgreen;
          padding: 10px;
        }
      
    

For dimensions you can use pixels (e.g. 200px) or a percentage of the available space (e.g. 50%). There are other units too.

Now your page should look like this:

4.1. Default property values

Some HTML elements have default values for some properties. For example, the h1 element has a big font size. The h2 has a slightly smaller font, but bigger than p. And links appear in blue.

The elements h1, h2 and p also have some default top and bottom margin (that's why the text blocks are separated by some space). The img element doesn't have that default margin.

Optional notes:

Each browser brand (Chrome, Safari, Firefox, IE) may have slightly different defaults. To normalize that we included normalize.css in the index.html you downloaded.

Alert readers may have noticed that, although we said that images don't have default margins, the images are actually separated by a little space. That's not a margin, just space between the elements. We won't go into detail about this now, but you can remove that space if you write the two img elements together, without any space or line breaks between them:

      
        
      
    

5. The display property

After setting a background color to the h2 elements, it has become visible that the h2 elements take all the width of the window, not just the width of the text. That's because h2 elements are displayed as a "block".

This is related to the display CSS property. Each HTML element has a default value for the display property. The most common values are:

block the element takes all the available width of its container
inline-block the element only takes the necessary width, i.e. the width of what it contains
inline similar to inline-block, but you can't change its size, and the vertical padding/margin don't push adjacent elements away (we'll talk about this in a moment)

The h1, h2 and p elements have display:block, so they take all the width of the container. With "container" we mean the browser window for now, but later we will see that elements may be nested (one element may contain another).

The img element has display:inline-block, so it only takes the width of the image. That's why the second image is displayed next to the first one and not below (unless you're reading this on a small screen).

The a element (link) has display:inline. Like img, the a element only takes the necessary size (the width of the text it contains).

5.1. About display:inline

The best way to understand how size (width and height), margin and padding affect inline elements is to play a little with those CSS properties.

Add the following lines to your main.css file and tweak the values to check how they affect the link and the adjacent elements (above, below and on each side).

Remember that you can use different units for the dimensions. The line-height accepts additional units besides the common ones.

      
        a {
          /* size and vertical margins don't affect inline elements: */
          width: 300px;
          height: 100px;
          margin-top: 20px;
          margin-bottom: 20px;
          
          /* but horizontal margins do affect: */
          margin-left: 20px;
          margin-right: 20px;

          /* instead of height, you can use this */
          line-height: normal;
         
          /* add background color to see padding */          
          background-color: cyan;
          
          /* horizontal paddings affect as expected */
          padding-left: 20px;
          padding-right: 20px;

          /* vertical paddings affect, but don't push elements above or below */
          padding-top: 50px;
          padding-bottom: 50px;
        }
      
    

Notice that you can set the margin/padding for each side individually.

Also see that you can add comments, like in HTML, but the characters to start and end a CSS comment are /* and */.

6. Container elements

There are HTML elements that are only used to contain text or other elements inside. They are used as containers, to group elements and to style them. The container itself may not be visible in the browser, unless you add some style to it.

The default container elements are:

div container with display:block
span container with display:inline

Let's see an example of a div containing a p and an img. Inside the paragraph we'll insert a span surrounding some text.

      
        

This is a paragraph inside a div as an example.

Note that the elements inside the div are indented a little bit, to make it more clear that they are inside. That's a convention so HTML code is easier to read.

6.1. And the inline-block container?

There's no default container with display:inline-block but you can easily create one. You could set display:inline-block to all div elements, but don't do that. Later we will see how to create an inline-block element without breaking the divs, when we talk about CSS classes.

6.2. Containtment rules

inline elements usually can only contain other inline elements, with one exception: the a (link) element, although being inline, may contain any other kind of elements like images (which are inline-block) or even a div (which in turn may contains other elements inside). This way we can turn an image or a big banner into a clickable area.

7. CSS class selectors

Let's remember the first CSS rule we saw:

      
        h1 {
            color: forestgreen;
        }
      
    

In that rule, the h1 is a selector. In this case, it selects all the h1 elements and applies all the properties indicated in the rule. As you've seen, properties are indicated between curly braces { } and each property is terminated with a semicolon ;.

The selector is the first thing in a CSS rule, just before the opening curly brace {.

You've seen that a selector may be the name of a tag (a tag selector), and in that case it selects all elements with that tag. But what if we want to select only some elements, let's say some h2 elements, but not all of them?

You can mark some elements with a word, and use that word as the selector, to alter those elements only. You do that with an attribute called class. (Do you remember attributes like src or height? class is another, and it's used a lot).

7.1. Example of using a class

Let's say we want to turn the first h2 element of our page to inline-block so it only takes the width of the text, not all the width of the window.

The first step is to mark only that element with a class. Choose a name for the class (for example small-title) and use that name as the value of the class attribute:

      
        

Introduction

I will use this page to display cat pictures.

Some pictures

Now in the CSS file (main.css), add these lines to set display:inline-block to the marked element using small-title class as the selector. But pay attention, when using a class selector you must prefix the class name with a dot:

      
        .small-title {
            display: inline-block;
        }
      
    

Don't forget the dot or it won't work (it's a common mistake!). Now your page should look like this:

Now the first h2 header only takes the width of the text, which is visible thanks to the background color.

Optional note: if you're a perfectionist, you may have noticed that the margin between the main h1 header and the first h2 header is a bit taller than before. That's because margins may collapse sometimes. It's out of the scope of this tutorial but you may read about that if you're curious.

8. Example of containers and class selectors

Starting from the last changes to our page, let's see how to use containers and class selectors.

If we want all the h2 to look the same, we can add the class="small-title" also to the second h2 element.

In this simple example you could have used the h2 tag selector directly, which would affect all h2 elements without the need of a class selector, but it's usually a good idea to mark your elements with classes, instead of altering all elements. That way you have more control on where to apply styles.

So go ahead, add class="small-title" to the other h2 element, and your page will look like this:

Oops, we broke it!

(If you're reading this on a small screen you might not see what happened)

Stop for a moment and try to discover what happened before reading more.

Space left for thinking (yes, this is styled using a class, you're clever!)

Go it? What happened is that now that the h2 elements are inline-block they only take the necessary width, so there's spare room for the images to be placed next to them.

At this point we should mention that in HTML elements are distributed from left to right and from top to bottom. HTML elements in your code are displayed side to side in the browser if there's horizontal room for them, and they move (wrap) to the line below when there's no more room.

But we had no problem with the first h2, right? That's because after the first h2 comes a paragraph, and p is a block element, so it wants to take all the available width of the window, and to do that it moves to the next line. In other words, the p doesn't want to stay next to the h2 because the p wants all the width for it (block elements are selfish).

To fix the page, you can surround the h2 elements with a div, since div is a block element and therefore won't allow other elements next to it:

      
        

Introduction

I will use this page to display cat pictures.

Some pictures

And now our page is pretty again:

9. The box model

Let's go deep into how HTML elements are displayed in a browser. Each element is displayed as a rectangle, a box. The box has 4 areas:

Margin
Border
Padding
Content

9.1 Example using CSS properties and classes

Let's see an example so you understand the box model. We'll add two div containers that surround each of the two sections of our page, and then a class selector to set some properties on each section such as padding, border and margin.

First surround each section with a div. To style them easily, those divs will have a class that we will call section:

      
        
        
        

My HTML page

Introduction

I will use this page to display cat pictures.

Some pictures

We have separated the lines a little bit to make it clearer. The browser ignores the empty lines but they're useful to make the code easier to read.

Now we need to add the following lines to style the sections. We'll use a class selector that selects the section class:

      
        .section {
          border: 1px solid lightgray;
          border-radius: 5px;
          padding: 20px;
          margin-bottom: 20px;
        }
      
    

Look at the properties we added and think about what they do. Remember you can find information about these properties and many more. You can Google for any of them or browse this reference page.

Your page should now look like this:

10. Layouts

As an example, let's build a responsive layout like this (open in another tab):

10.1 Main parts of the layout

When starting a layout, we should think about what main parts our layout will have, without worrying about the details inside of each part.

For example, in the layout above we want, from top to bottom:

For now, forget about the transparency of the navigation menu (suppose it's opaque), and also don't worry about the contents (we will analyze that later).

With those sections, we can start the first version of our layout. It's just 4 simple div elements. Note that sometimes we use other div-like elements such us header, nav, main and footer. Those elements behave exactly like div, they're just used to make our HTML clearer and more meaningful.

Open the example in a new tab.

10.2 Image banner

Now we will set the big image between the navigation menu bar and the contents section. We will do that using the background-image property and other related background properties. The background-image property is useful to set a background image to a div, especially when you want to add some other content over the image.

Open the example in a new tab.

10.3 Transparent nav bar

We will now turn the top nav bar transparent. In order to do that, we will remove the div that contains the image and set the image directly to the header. Remember (or browse the previous code again) that the header element contained the nav element (the navigation menu bar) and a div that contained the image.

Besides setting the background-image to the header, we also set a transparent background to the nav.

Open the example in a new tab.

10.4 Main content

We will start adding elements to our main section. For now we just added some simple text elements, without much CSS changes. For the paragraphs it's very common to use some random latin text when prototyping the designs.

Open the example in a new tab.

10.5 Horizontal layout

Now we will lay out the paragraphs horizontally. There are many ways to do that; take this approach as a simple example and experiment with the settings we used.

Here we use a flexbox container. We wrapped the paragraphs into a div, and set the display property of that element to flex. That turns the element into a flexbox container. The child elements (the paragraphs) are laid out horizontally by default (although we also set the flex-direction property to row, but you can remove that because it's the default value).

To make the paragraphs take the same amount of space we could have set a width of 50% but they would appear together, without any space between. So, we decided to set their width to 49% and use a very handy flexbox property called justify-content, that arranges the children horizontally (or vertically if the flex-direction was column). For that property we use the value space-between, that puts the remaining space between the child elements (since we set 49% for each child, there's a remaining 1+1=2% of space that will be placed between the paragraphs).

Open the example in a new tab.

10.6 Center with flexbox

With flexbox it is very easy to align content to the left, right, center or, as we saw in the previous example, place the remaining space between.

We will now use flexbox to center the h1 and h2 elements. Without flexbox you could use text-align:center, but centering with flexbox can be used with any elements, even complex divs with something inside.

To center the text headers, we start wrapping them inside a div, make that div a flexbox container. Since flexbox arranges elements horizontally by default, we need to set flex-direction:column, so they are displayed vertically. Then we set align-items:center.

Note we don't want to use justify-content now because it would arrange elements vertically (since flex-direction is column, i.e. vertical). align-items is similar to justify-content but align-items arranges elements along the cross axis, so if flex-direction is vertical align-items moves elements horizontally. And that's what we want, we want to center elements horizontally.

Open the example in a new tab.

10.7 Navigation menu options

Soon...

X. Soon...

A. Resources