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>
