Understanding Basics of HTML and Inline CSS

0
276
Learn HTML and Inline CSS
Learn HTML and Inline CSS

Today we will learn the basics of HTML and Inline CSS. In this article, i will teach you the Headings of HTML along with the use of Inline CSS. I have added an example program below to make things more clear to you. So lets quickly start learning.

HTML and Inline CSS

The basic format of any page is like this:

We start with our Doctype Declaration.. which goes like- <!DOCTYPE html> that tells the browser that it is an HTML type document. Then,

<html></html>

We enclose our page code inside HTML tags. Generally speaking, <tag_name> this is an opening tag and </tag_name> is a closing tag.

Inside HTML -> we have 2 sections: Head and Body. In head part, we write those things which are not directly visible on the webpage like the title of the page etc. In Body, our visible content is placed.

Headings in HTML

There are 6 types of headings in HTML, from <h1> to <h6> depending upon their sizes. We will use all headings in our example below. Syntax for headings is hell simple,

<h1>MUKESH PATHAK</h1>
<h6>PROGRAMMINGY.COM</h6>

Inline CSS with HTML

To use inline CSS with HTML, we use the STYLE attribute inside the HTML_TAG. something like this:

<h1 style=”color:red; background-color:Violet”> Learning HTML and CSS</h1>
after using style attribute, what i did is so easy-peasy thing i guess. I set the color to red and background color of the heading to violet. Now the text enclosed inside H1 will be styled according to our choice.

Example Program for HTML and INLINE CSS

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title> Practical 1 </title>
 </head>
 <body align="center" >
 
 <h1 style="color:red; background-color:Violet"> My Name Is Mukesh</h1>
 <h2 style="color:blue; background-color:yellow"> I'm Doing cool</h2>
 <h3 style="color:green; background-color:purple"> This is my space</h3>
 <h4 style="color:yellow; background-color:orange"> Watch me!</h4>
 <h5 style="color:black; background-color:red"> Whip Whip!</h5>
 <h6 style="color:purple; background-color:greem"> Watch Me.. Nae Nae</h6>
 
 </body>
</html>

I hope you liked this article. Please do share this one on any of your social media platforms, we will really appreciate it. You can also check out our other tutorials on PHP or general computer science topics.

LEAVE A REPLY

Please enter your comment!
Please enter your name here