Learn html and css in 20 minutes

Hypertext Markup Language (HTML) is a markup language for document design that render in a web browser. That can use with CSS and JavaScript. HTML file have .html or .htm extension.

HTML Element

It’s an individual component of an HTML document. Those have some specific meaning. For example, img tag is used to use images. In HTML we have two type element one are those who need to close like <h1></h1> and another is those doesn’t need closing tag input tag.


<tagname>Content goes here...</tagname>


<div>
    <p>This is a paragraph</p>
</div>

HTML Attributes

Attribute are the part of element and those provide additional information about HTML element.


<div>
    <p id=“para” class=“para”>This is a paragraph</p>
</div>

Here id, class are attributes.

Type of elements

HTML elements can be divided into two categories : block level and inline elements.

Block level

Block-level element by default always start from the new line and takes full width. A block-level element can contain block-level element as well as inline elements.

List of block level element

  • p
  • h1, h2, h3, h4, h5, h6
  • ol, ul
  • pre
  • address
  • blockquote
  • dl
  • div
  • fieldset
  • form
  • hr
  • noscript
  • table

Inline level

Inline level element by default does not start from a new line and takes element width. An inline-level element can contain inline-level element as well as data.

List of inline-level element

  • b, big, i, small, tt
  • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
  • a, bdo, br, img, map, object, q, script, span, sub, sup
  • button, input, label, select, textarea

HTML Headings

In HTML we have 6 type of HTML tag for heading (h1, h2, h3, h4, h5, h6). Those Defines HTML headings.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs

The HTML 

 element defines a paragraph:


<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>

CSS

Html is just a structure of your web but if we talk about web pages look good and presentable then we talk about CSS.
In this article, we will give a quick introduction to CSS and how we can start CSS. We are assuming you know about HTML and HTML5. We have 3 way to use CSS.

Inline CSS

HTML provide us tag like h1, div, p and suppose we want to colour h1 then we can use style attribute in CSS. Means if we directly include CSS in HTML elements then it’s inline CSS.


<h1 style="color: blue"> Hello world! </h1>

Here we are adding blue color style in h1 tag. We can use multiple style in inline css.

Internal CSS

Another way to add css we can use style tag. Be careful we are talking about tag not attribute. When we add style tag inside head tag this is called internal css.


<head>  
    <style>  
        h1 { color: blue; }  
    </style>  
</head>

External CSS

We can use external file to write css with .css extension and need to include that link into our HTML file.


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

Here we have separate file style.css and code –


<head>  
h1 { color: blue; }
</head>

Because this is sprite file so we can usese this file.

CSS Selectors

Selectors is the way to find and style HTML element.

Element

First way we can use element to write style for any element or tag.


h1 { font-size: 20px; }  
p { color: green; }  
div { margin: 10px; }

<div>
    <h1> This is heading </h1>
    <p id='para1'> This is a paragraph </p>
</div>

Class

Another way we can use class name to write style for any element or tag.


.container { margin: 10px; }

<div class="container">  
    <h1> This is heading </h1>  
</div>

ID

Like class, we have id name to write style for any element or tag. But the difference between id and class is id only use for one element.


#para1 { color: green; font-size: 16px; }

<div>  
    <p id='para1'> This is a paragraph </p>  
</div>

You May Also Like

About the Author: Pankaj Bisht