What is Markup Language?
A markup language is one that is designed for defining and presenting text. HTML (HyperText Markup Language), is an example of a markup language.
Within a text file such as an HTML file, elements are marked up using tags which explain the purpose of that part of the content.
<html> <head> <title>Pootfolio</title> <body> <h1>Payilagam</h1> </body> </html> Types of markup language
- HTML
- XHTML
- XML
- SVG
latest version of html and css
- Latest HTML: HTML Living Standard (WHATWG)
- Latest CSS: CSS Snapshot 2026
Types of Css
- Inline CSS CSS is written directly inside an HTML element using the style attribute.
<h1 style="color: red;">Hello World</h1> 2.Internal CSS
CSS is written inside the <style> tag in the HTML document's <head>section.
<!DOCTYPE html> <html> <head> <style> h1 { color: blue; } </style> </head> <body> <h1>Hello World</h1> </body> </html> 3.External CSS
CSS is written in a separate .css file and linked to the HTML file.
index.html
<head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World</h1> </body> style.css
h1 { color: green; } Box Sizing?
The CSS box-sizing property defines how the total width and height of an element are calculated, specifically whether padding and borders are added to or included inside the dimensions.
There are two commonly used values:
- content-box (Default)
- Width and height apply only to the content.
- Padding and border are added to the total size.
.box { width: 200px; height: 100px; padding: 20px; border: 5px solid black; box-sizing: content-box; } Total width: 200 + 40 + 10 = 250px.
- border-box
- Width and height include content, padding, and border.
- The total width remains 200px.
.box { width: 200px; height: 100px; padding: 20px; border: 5px solid black; box-sizing: border-box; } Total width: 200px
CSS Global Selector (*)
The Global Selector, also called the Universal Selector, is represented by an asterisk (*).
It selects all HTML elements on a webpage and applies the specified CSS styles.
Syntax
* { margin: 0; padding: 0; }