HTML stand for Hyper Text Markup Language. HTML is the code that is used to structure a web page and its content. using HTML, you can define headers, paragraphs, links, images, and much more things, so your browser knows how to structure the web page you're looking at.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a good format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different contents.

HTML Formatting

HTML Formatting is a process of formatting text for better look and feel. we can format text in HTML without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, small or underlined.

types of HTML formatting tags

there are many formatting tags in HTML. these tags are designed to display special types of text. it makes the text look bold, small, important etc.

• Bold text - < b >
• Important text - < strong >
• Italic text - < i >
• Emphasized text - < em >
• Marked text - < mark >
• Smaller text- < small >
• Deleted text - < del >
• Inserted text - < ins >
• Subscript text - < sub >
• Superscript text - < sup >

1. Bold Text

The HTML < b > element defines bold text, without any extra importance.

example:

<p> this is normal and<b> this text is in bold. </b></p>

output : this is normal and this text is in bold.

2. important text

The HTML < strong > tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance

example:

<p> this is normal and<strong> this text is important. </strong></p>

output : this is normal and this text is important.

3. Italic text

The HTML element display the enclosed content in italic font.

example:

<p> this is normal and<i> this text is italic. </i></p>

output : this is normal and this text is italic.

4. Emphasized text

The HTML < em > tag is a logical element, which will display the enclosed content in italic font, with a semantics importance.

example:

<p>this text is <em> emphasized. </em></p>

output : this text is emphasized.

5. Marked text

We use this tag to mark or highlight something. < mark >....</ mark >.

example:

<p> this text is <mark> marked. </mark></p>

output : this text is marked.

6. Smaller text

The HTML < small > element defines smaller text:

example:

<p> this text is <small> small. </small></p>

output : this text is small.

7. Deleted text

Anything that puts within < del >..........</ del > is displayed as deleted text.

example:

<p>My favorite color is <del>blue</del> red.</p>

output : My favorite color is blue red.

8. Inserted text

Anything that puts within < ins > ..........</ ins > is displayed as inserted text.

example:

<p> my fav color is <del> blue </del> <ins> black.</ins> </p>

output : my fav color is blue black.

9. Subscript text

If you put the content within < sub >..............</ sub > element, is shown in subscript ; means it is displayed half a character's height below the other characters.

example:

<p>this text is <sub>subscripted. </sub></p>

output : this text is _subscripted.

10. Superscript text

if you put the content within < sup >..............</ sup > element, is shown in superscript; means it is displayed half a character's height above the other characters.

example:

<p>this text is <sup> superscripted. </sup></p>

output : this text is ^{superscripted.}

CSS stands for Cascading Style Sheets. CSS is a design language that makes a website look more beautiful and presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the font size of the text, color, font style, backgroundColour, layout design and much more things.

what is CSS selectors ?

CSS selector is the first part of a CSS rule. CSS selectors are used to select element in which you want to apply CSS properties.

type of CSS selectors

there are different types of CSS selectors like -

• Element Selector
• Id Selector
• Class Selector
• Universal Selector
• Group Selector
• Combinator Selector
• Attribute Selector
• Pseudo-classes and pseudo-elements

that used most commonly

1. Element Selector

The element selector selects the HTML element based on element name or tag. For example - p, h1, div, span, etc.

h1{
      font-size : 2rem;
}

2. Id Selector

the Id selector uses the attribute of an HTML element to select a specific element. the Id of an element is unique. An Id is only use to identify one single element in our html. The Selector must start with a pound sign(#).

#check-button{
    width: 35%;
    font-size: 1rem;
    cursor: pointer;
}

3. Class Selector

The class selector selects HTML elements with a specific class attribute. A class can be used to identify more than one HTML elements. The selector must start with .className.

.container{
    text-align: center;
    display: flex;
    flex-direction: column; 
}

4. Universal Selector

Universal selector can be used to select any and all types of element in an HTML page. This selector is useful when we want to select all the elements on the page. This is denoted by the asterisk (*).

*{
padding: 2rem;
margine:2rem;
}

5. Grouping Selector

The CSS grouping selector is used to select multiple elements and style them together. To group selectors, separate each selector with a comma. For example - div, span

div, span{
           color: blue;
           background-color: gray;
}

6. Attribute Selector

This type of attribute selector is used to select all the elements that have the specified attribute and applies the CSS property to that attribute.

p[style] {
    background-color: #00b93e;
}

7. Combinator Selector

A combinator is something that explains the relationship between the selectors.

• Descendant Selector

  . A descendant selector is made up of two or more selectors separated by white space. Syntax: A B Example: div span will match all elements that are inside a
  element.

div span{
          color: blue;
}

• Child combinator

  A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". Syntax: A > B Example: ul > li will match all elements that are nested directly inside a element.

ol>li{
      font-weight: bold;
}

• General sibling combinator

  The general sibling selector is used to select all elements that follow the first element such that both are children of the same parent. Syntax: A ~ B Example: p ~ span will match all elements that follow a

  , immediately or not.

  img ~ p {
   background-color: burlywood;
  }
  

• Adjacent sibling combinator

  The adjacent sibling selector is used to select an element that is directly after another specific element. Sibling elements must have the same parent element Syntax: A + B Example: h2 + p will match the first

  element that immediately follow an element.

div + p {
  background-color: yellow;
}

8. Pseudo-classes and pseudo-elements

• Pseudo classes

  A : pseudo-class is used to define a special state of an element. For example , it can be used to style an element when a user mouses over it.

button:hover{
background-color: gray;
}

• Pseudo elements

  The :: pseudo represent entities that are not included in HTML.

  ::placeholder{
     font-size: 10px;
  }