Learn html and css

HTML and CSS Tutorial for Beginners

What is HTML?

HTML stands for Hyper Text Markup Language and is used to create webpages. HTML is part of front-end technologies.

Widely used browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Opera and Safari are compatible with HTML tags for display on the browser screen.

A HTML document contains codes like headings <h1> to <h6>, paragraphs <p>, Order List <ol>, Unorder list <ul>, Division <div>, Tables, etc.

What are HTML Tags?

HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.

  • HTML tags are written inside open angular bracket (<) and closing angular bracket (>)
  • 95% of the tags in HTML have both open tag <p> and closing tag </p>
  • The tags are pre-defined

>> What is Search Engine Optimization?

Given below is a basic HTML document containing all the essential tags. You may copy the code below & paste it into your editor and save it as example.html to create your own web page.

Structure of HTML Page

<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Welcome to HTML</p>
</body>
</html>

What is CSS?

CSS Stands for Cascading Style Sheet and is used to make a webpage look more attractive by using CSS Properties. You can also control layout of the page by using CSS properties.

Some of the properties of CSS:

Font-size:12pts;
Color:red;
Background-color:green;
Text-align:center;

  Set up live chat on your website

>

Combination of HTML and CSS

If you want to design attractive looking pages for a website or an application you have to work with both HTML and CSS.

There are three types of CSS

Types of CSS

1. Inline CSS: Inline CSS method is used to define CSS properties inside a HTML tag. Let us now try to add a background and color style to one paragraph tag.

Example:

<p style=”color: red; background:red;>Welcome to India</a>

2. Internal CSS: Internal CSS method is used to define CSS properties in between <style > </style> tag. Here is an example of internal styles.

Example:

<Style>
P
{
color:red;
text-align:center;
}
</style>

3. External CSS: External CSS files are kept separately and are called or linked from the required page. Following is the syntax followed for linking an external style sheet.

Example:

<link href=”style.css” rel=”stylesheet”>

How to Create and Execute an HTML Page?

Step 1: You may use any text editor for writing HTML and CSS code (Ex: Notepad, Notepad++, DreamWeaver, etc.)

Step 2: You may save the file with .html or .htm format (Recommended.html)

Step 3: A HTML file can execute or run using any browser (Ex: Google Chrome, Mozilla Firefox, etc.)

Step 4: You can get the output in the Browser Window.

Click Here to Learn HTML and CSS by watching my video playlist.

Front-end website development is often represented as a 3-legged stool.  They are as follows

  • HTML for the structure of a site
  • CSS for the visual styles
  • Javascript for behaviors
  Basic CSS Selector
  Set up live chat on your website

About the author

Akash Tonasalli is a Digital Marketer, Web Developer, SEO Analyst, Consultant and Trainer from Bengalore, Karnataka.

Leave a Reply

Your email address will not be published. Required fields are marked *