The Beginner's Guide to HTML and CSS

Although you can find many different technologies powering our sites today, the two most important files on the whole Internet are HTML and CSS. Yes, if you need something complex, you will also need more technologies to go with them. But if all you want is to create a simple personal webpage, HTML and CSS are all you need.

Introduction to the basics

This is a beginner guide to HTML and CSS that will show you how to create a simple site as quickly as possible. The results won’t be necessarily “standards-compliant.” And you’ll have to do some reading on your own if you want to further tweak and expand it. But it will be a site and will work “as it should” in most browsers.

Since space is at a premium, we won’t dive too deep into every aspect of web development and design. Instead, we’ll take you through the steps to go from zero to fully working webpage, explaining what everything does in the process.

The two necessary files

A modern site consists of many files, but two are the most essential: an HTML and a CSS file. The HTML file defines the elements and structure of a page. The CSS file defines the appearance of those elements.

Both are essentially typical text files, containing specifically structured text. You don’t need any special type of program to create or tweak them: any “simple” text editor will do. By “simple,” we mean your typical notepad-style application, not something like LibreOffice’s editor or Microsoft Words that could “enrich” the text in any way.

The first step is to create a new folder on your desktop with two empty text files inside it. Name one of them “index.html” and the second “style.css.”

Set up your workspace

Run your favorite browser and load the HTML file in it, either by selecting “File -> Open” or by dragging and dropping the file in its window.

Open both the HTML and the CSS file in your favorite notepad-type text editor.

Being able to view all three windows at the same time is the most convenient way to work. If you don’t have two screens to spread them over, we recommend arranging the windows like in our picture below.

“Stick” your browser window on one side of the screen to occupy half of it (vertically)4 and place the two notepad windows on the other side, one under the other.

Building Blocks

Write something on the notepad with the HTML file and save the changes. Next, refresh your browser window by pressing F5. You will immediately see the text you have written appear in your browser window.

Congratulations on just setting up your first site! And we are not joking, since the first sites on the Internet did not differ much in their appearance compared to what you just created. The important thing, back then, was the content itself.

HTML lets you “mark up what each piece of content is,” using a specific set of “codes.” Some of the most important are:

html: Denotes an html document. Should be at the start of each html file.
body: All the content you see on a browser is enclosed in this body tag. It represents the visual aspect of an html document.
p: Text paragraph
img: Images
a href: Links to web addresses
div: Sets a “box” around any piece of content that you can then “style” with CSS.

To “define” a piece of content, it usually has to be enclosed by the same code with a slight differentiation at the beginning and end. For example, a paragraph of text is defined as:

<p>Standard Text Paragraph</p>

“<p>” indicates that “what follows is a paragraph” and “</p>” that “the paragraph ends here.” By replacing “p” with “div” in both cases, you define a box enclosing the content rather than “marking it as a paragraph.”

Note that there are exceptions: elements such as images (img) and dividing lines (hr) do not require a “closing code.”

Change and refresh

Replace everything in your HTML file with the following:

<html>
<body>
<div id="header">HEADER</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</body>
</html>

Refresh your browser (F5), and you will see the words HEADER, CONTENT, and FOOTER appear one below the other. We just created three invisible, autonomous “div” boxes. Each one of them contains one of the words.

To be able to define their appearance through CSS, we assigned a keyword to each one, an “identity” (the “id=name” in the code), corresponding to their content: header, content, and footer. All elements in a webpage can have such an alias, set up as either a “class” or an “id.” Classes define aliases for items that appear multiple times on the same webpage, like paragraphs, links, etc. IDs define aliases for elements that appear only once in each page, like a site’s name or logo.

Real content

Delete the word “HEADER” between the div codes – without changing their structure – and instead, enter the name you’d like for your site.

Do the same for your “CONTENT,” but instead of just entering text, also make sure to “mark” the beginning and end of each paragraph as we saw earlier. Replace the “CONTENT” with two or three paragraphs of text.

Now’s the time to also talk about links. To convert any phrase in your text into a link, structure it as:

<a href="ADDRESS">TEXT</a>

You can copy-paste this and replace “ADDRESS” with “what you want your link to point at” and the “TEXT” with the phrase that will show up in your site. We linked a phrase in our footer to our website with the following:

<a href="https://www.maketecheasier.com">Make Tech Easier</a>

Finally, replace the word “FOOTER” with your name, a small sentence indicating who designed or owns the site or anything else you’d like.

Save the changes and refresh your browser to see them there.

You’ve got Style (.CSS)

The first element of any web page is the head. In it, we usually find code that defines the identity of the site, its name, creator, and language, as well as any technologies – apart from HTML – used in it. That’s where most links to any external JavaScript and CSS files live. Add one to your site by inserting the following at the very top of your HTML file, just after the html tag:

<head>
 
</head>

To be able to style the elements of a webpage with CSS, you will need to load the CSS file from inside the HTML. And this means including it in your “head.” The following indicates that the HTML page will “link” to a “stylesheet” file, of type “text/css.” named “style.css”:

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

Copy and paste our code, just as you see it, “inside” the head – that is, under “” and above “”. Save the changes and turn your attention to the CSS file. There, enter the following:

body {}
#header, #content, #footer {}
#header, #footer {}
#header {}
#content {}
#footer {}
img {}

Real site

CSS, or Cascading Style Sheets, are simply sets of display rules that correspond to specific elements of a web page. With CSS we can style both “where” and “how” everything will appear on a webpage.

In the previous step we introduced a set of blank rules for all of the elements on our page. Now, let’s see how we can add parameters to them that will define their appearance.

Start with the body, which includes everything on your website. Modify it as follows:

body {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}

The above rules state that we want our site to occupy the entire width of the browser window (width: 100%), that we don’t want it to have any distance from the browser window’s edges (margin: 0), and do not want any blank space around it (padding: 0).

All the rules for an element should be enclosed between brackets, and each rule should end with an “;” like the following:

#Element_ID {
RULE 1;
RULE 2;
RULE 3;
}

Continue by updating your “#header, #content, #footer” CSS to the following:

#header, #content, #footer {
float: left;
position: relative;
}

With this, you are saying that all three elements’s position should follow some common rules: each should be “relative” to the previous one and “follow” it (float: left). No matter their size, shape, appearance, or any other factor, each of them will “push” the next element, and they’ll never overlap.

Update #header, #footer with the following to make your webpage look more like an actual site:

#header, #footer {
width: 100%;
height: 100px;
background: rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
text-align: center;
font-size: 12px;
}

The above defines that we want both the header and footer of our website to be 100% wide, 100 pixels high, and that the text displayed in them is 3em in size and centered.

The background and color rules specify, respectively, what color the whole header and footer “div box” will have and the color of any text contained in them. “RGBA” sets the color based on the Red – Green – Blue color mixing standard. Each color can have a value from 0 to 255, with combinations of different Red, Green, and Blue values allowing the display of any color. The last number corresponds to transparency. So RGBA(255,0,0,0.5) would give us a translucent red, while RGBA(50,50,255,1) would give a bright and “solid” blue.

Finish by focusing on the basic content of the site. Define its appearance as:

#content {
width: 80%;
background: rgba(255,255,255,0.9);
color: rgba(0,0,0,0.9);
margin: 0 10%;
}

Save all changes again, and refresh your browser window to see them.

Image styling

To add images to your site, you need to go back to the HTML file. There, “inside” the content but before the first paragraph, enter the following:

<img src="/PATH/FILE.JPG" alt="TEXT">

Where “PATH” and “FILE.JPG” are the “location” and filename of any image, available either online or locally, and “TEXT” a description of what it represents for accessibility purposes.

If you try to save and check for changes after this addition, you will find that your site is deformed. The problem will be fixed once you create CSS rules on how images should be displayed on your website.

Return to the CSS file and declare how you want all images (img) to be left-aligned, following the flow of other elements (float: left and position: relative).

In order not to exceed the page boundaries, specify how you want their width to be the maximum of the page itself (width: 100%). To avoid having the images touching your text, add some vertical margin at the top and bottom. The result should look like this:

img {
float: left;
position: relative;
width: 100%;
margin: 5px 0;
padding: 0;
}

Complete by adding another image, this time aligned to the left or right. As before, you should first go back to the HTML code and paste a link to your image there, as we saw earlier. The difference is that you will need to add a “class”, an identifier to the element. Then you will specify via CSS display rules on it and any other elements where the same class is “attached.”

We named our class “alignright” since we want any object, where it’s attached, to be displayed on the right side of the page.

Try creating the code yourself. Add an .alignright {} class in your “style.css,” and then create rules that should style it. The CSS code should specify that we want the elements to float to the page’s right side and be 46% wide (width: 46%). We don’t want the images to touch the text, so we should also add a 2% gap around them, split as 1% margin (the distance from any other element) and 1% padding (some “extra blank space around the element”).

Thus, our rules should define that any image with an .alignright class attached will take up 46% of the page’s width, plus a 1% margin on each side, plus 1% padding on each side. It all adds up to 50% – exactly half the page’s width. The result should look somewhat like this:

img.alignright {
float: right;
width: 46%;
margin: 1%;
padding: 1%;
}

Your first webpage is ready and fully operational. By learning more about both HTML and CSS, you can further enrich its content, add new elements, and improve its appearance. As a next step, try copying and renaming the HTML file, modifying its contents and linking each new page to the others.

It doesn’t sound too hard, does it? Welcome to web development: by copying, modifying, and linking different pages through links, you will have created your first complete, “proper,” multi-page site!

Image credit: Pluks kittens, Pluks kittens, IMG_20171124_142629

Is this article useful?

Subscribe to our newsletter!

Our latest tutorials delivered straight to your inbox