Introduction: HTML and CSS for Beginners

Picture of HTML and CSS for Beginners

What's common between Instructables, Google, Facebook and most other websites on the internet? Well, all of them use HTML and CSS to define their layout and interface. These sites use Javascript too, but we won't be using that in this instructable. With HTML and CSS, you can start designing your very own website in minutes!

What is HTML?

HTML is Hyper Text Markup Language. The language consists of tags through which browsers are able to render the webpage. These tags are enclosed in angle brackets. For example, the p tag is used for writing text. Every tag has a closing tag too. Use /p once the text is completed.

<p>Hello World!</p>

Step 1: Start Designing!

Picture of Start Designing!

First of all, to start writing HTML code, you will need a text editor. If you have Notepad, well great! We will be doing all of today's HTML and CSS coding in Notepad.

Open notepad. Save your blank file as "HTML-project.html". Feel free to replace it with any name you want but remember to add the .html extension before saving. This tells the browser that this is an HTML file.

Our HTML file is ready! We can now start adding tags to this file. We will start by adding the html tag. This should be the first tag in any HTML file. Next, add the head tag.Here, we will be adding our page title, that is, the text that appears at the top of the browser with the title tag. Remember to close the title tag with /titleand the head tag with /head. Once you are done designing the webpage, close the body and html tags too.

<html>
<head>
	<title>My First Webpage!</title>
</head>

Note: I am using indentation here to make the code more readable though this is not really required.

Save the HTML file. Now, open it in your browser. You can see that the title of your Webpage is at the top of the browser tab. Hooray!

Step 2: Heading and Text Tags

Now that the title tag is complete, let's move on to adding some real content to your webpage. Go back to Notepad and type in the bodytag. This tag defines the content area on your webpage.

Let's try adding a heading.
Add the following code:

<h1>I love HTML</h1>

The output will be:

I love HTML

The h1 tag displays the heading with the greatest font size. h2 will produce a smaller heading, h3 an even smaller one. You can go on upto h6.

h1h2

h3

h4h5h6

Now that we have a heading, let's add some text. Use the p tag to do so (like I told you before). Here, you can type the text you want. Once you're done typing, close the text area with /p.

Now your HTML file should look something like this:

<html>
<head>
	<title>My First Webpage!</title>
</head>
<body>
	<h1>I love HTML</h1>
	<p>Hello World!</p>

Open the HTML file in your browser to see the result.

Step 3: Lists

Want to create a shopping list? No problem. HTML allows the creation of lists in two types Ordered and Unordered lists. What this simply means is that Ordered lists are numbered and Unordered lists are bulleted.

First, let's create an Ordered list. To begin, use the ol tag. Now you can add list items(as many as you want!) with the li tag. Once you are done, close the ol tag.

<ol>
	<li>Eggs</li>
	<li>Milk</li>
	<li>Greens</li>
	<li>Bread</li>
</ol>

The list will look like this:

  1. Eggs
  2. Milk
  3. Greens
  4. Bread

In order to make an Unordered list, use the ul tag instead of ol.

<ul>
	<li>Eggs</li>
	<li>Milk</li>
	<li>Greens</li>
	<li>Bread</li>
</ul>

This will render as:

  • Eggs
  • Milk
  • Greens
  • Bread

Step 4: Links

As some of you might already know, a website is a collection of linked webpages. All we have created now is a web page. So now, we will make another page. Just open Notepad again and save this new file with the extension ".html". We have two pages with us right now. But, the second page cannot be opened from the first and vice versa.

What do we do? Add a link, of course! Go to your first page and type this in:

<a href="Myfiles\page2.html">Go to the second page</a>

The a tag is an anchor tag. The href attribute tells the browser which page to open when the text is clicked upon. Replace Myfiles\page2.html with the directory and name of the second page. Make sure to put them within quotation marks.

Go to the second page and repeat the same, but this time, type the directory and name of the first page.

Open the first webpage in your browser. You will see blue text like this:

Go to the second page

When you click on it, you will be directed to the second page. When you click on the link on the second page, you will be redirected to the first page.


Step 5: Image Tag

Picture of Image Tag

Images make a website more attractive and colorful. In this step, I am going to add an image with the img tag.

<img src="Myfiles\Picture1.jpg">

The img tag is used to display images in a web page.The src attribute tells the browser the location and type of the image. Replace Myfiles\Picture1.jpg with the location and name of the image. In the end, also add the extension/file type of the image(.jpg .gif .png etc).

Step 6: Other Tags

Bold: The b tag makes text Bold

<b><p>Hello</p></b>

Italics: The i tag makes text Italic

<i><p>Hello</p></i>

Underline: The u tag underlines text

<u><p>Hello</p></u>

Break: The br tag leaves a gap of one line between elements.

<p>HTML is awesome</p>
<br>
<p>HTML is cool</p>

Step 7: Getting to CSS

Now that we have learnt quite a few tags in HTML, let us get to styling them with CSS.

CSS, also known as Cascading Style Sheet is a stylesheet language. CSS describes how elements are displayed. To begin with, I have created a simple web page using the concepts we've learnt so far. Its code is given below:

<html>
<head>
	<title>HTML and CSS</title>
</head>
<body>
	<h1>HTML and CSS</h1>
	<b><u><p>What can you do with HTML?</p></u></b>
	<ul>
		<li>Design Webpages.</li>
		<li>Create Interactive Content.</li>
		<li>Link pages to make a whole Website.</li>
	</ul>
	<br>
	<b><u><p>What is CSS for, then?</p></u></b>
	<ul>
		<li>To make content look better.</li>
		<li>To change the color, size, etc. of elements.</li>
	</ul>
</body>
</html>

The output is given below:

HTML and CSS

What can you do with HTML?

  • Design Webpages.
  • Create Interactive Content.
  • Link pages to make a whole Website.


What is CSS for, then?

  • To make content look better.
  • To change the color, size, etc. of elements.

Now this looks very boring and uninteresting. Let's make it better using CSS.

Step 8: Syntax

In this Instructable, I am going to tell you one way of adding CSS values in an HTML file.

<html>
<head>
<style>
CSS DATA<br></style>
</head>
</html>

You can add CSS in the head area under the style tag.

For each element, we will have to assign CSS values. Each line has to be separated by a semicolon(;). For example

<style>
p {
	color: white;
}
</style>

Here, the CSS values are given within the style tag. p represents all the text areas. color is a property of p and white is the value. Notice the semicolon at the end of the line. CSS values for every element are inside flower brackets {......}

Step 9: Beautify the Page!

Picture of Beautify the Page!

Now, we will make changes to the website I made earlier.

<html>
<head>
	<title>HTML and CSS</title>
<style>
h1 {
	color: gray;
	margin-left: 400px;
	font-family: Roboto;
}
p {
	color: blue;
	font-family: Roboto;
	margin-left: 400px
}
ul {
	list-style-type: circle;
	padding: 20px;
}
li {
	color: green;
	margin-left: 400px;

} 
</style>
</head> 
<body>
<h1>HTML and CSS</h1> <b><u><p>What can you do with HTML?</p></u></b>
	<ul>
		<li>Design Webpages.</li>
		<li>Create Interactive Content.</li>
		<li>Link pages to make a whole Website.</li>
	</ul>
	<br>
	<b><u><p>What is CSS for, then?</p></u></b>
	<ul>
		<li>To make content look better.</li>
		<li>To change the color, size, etc. of elements.</li>
	</ul>
</body>
</html>

As you can see, the body code is the same, only the style tag has been added. I have added a few properties and values to make the page look better. I will explain each one by one.

color: gray;

The color property changes the font color of the h1 element to gray.

margin-left: 400px;

The margin-left property defines the left margin of an element. Here it is 400 pixels.

font-family: Roboto;

The font-family property sets the font of the element. In this case, it is Roboto.

list-style-type: circle;

This property changes the bullet type in an unordered list.

padding: 20px;

The padding property defines the space around the element. Here it is 20 pixels.

Step 10: That's It!

This is just the basics. With the addition of Javascript, you can make interactive and responsive web pages. The possibilities are endless. Thanks for viewing. I will be glad to clarify your doubts. If you are making a webpage, please comment with the code. I would like to see your creations too!

Comments

azazqadir (author)2017-03-28

This is a really easy to understand introduction to HTML and CSS.

Shivesh Abhishek (author)2016-02-29

can be Easily understood by any level of student :beginner ,intermediate or advanced.

Good Job!

manankadel (author)2016-02-21

thnkx so much...vishwas....
can i contact you please?!

wold630 (author)2016-02-19

Great beginner tips!

Vishwas Adiga (author)wold6302016-02-20

thanks!