Important points
✅ 1. Text & Font Properties
color
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
direction
unicode-bidi
quotes
---
✅ 2. Box Model Properties
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-width
border-style
border-color
border-top
border-right
border-bottom
border-left
outline
outline-width
outline-style
outline-color
outline-offset
width
height
min-width
max-width
min-height
max-height
box-sizing
---
✅ 3. Positioning and Layout
display
position
top
right
bottom
left
z-index
float
clear
overflow
overflow-x
overflow-y
visibility
clip
resize
---
✅ 4. Flexbox & Grid
/* Flexbox */
display: flex;
flex-direction
flex-wrap
justify-content
align-items
align-content
align-self
flex
flex-grow
flex-shrink
flex-basis
order
/* Grid */
display: grid;
grid-template-columns
grid-template-rows
grid-template-areas
grid-column
grid-row
grid-area
grid-gap / gap
justify-items
align-items
place-items
justify-self
align-self
---
✅ 5. Backgrounds
background
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background-clip
background-origin
---
✅ 6. Borders & Outlines
border
border-radius
border-collapse (for tables)
border-spacing (for tables)
box-shadow
outline
---
✅ 7. Typography & Effects
text-shadow
box-shadow
opacity
visibility
cursor
filter
---
✅ 8. Animation & Transitions
transition
transition-property
transition-duration
transition-timing-function
transition-delay
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
@keyframes
---
✅ 9. Transformations
transform
transform-origin
perspective
perspective-origin
backface-visibility
---
✅ 10. Table Properties
border-collapse
border-spacing
caption-side
empty-cells
table-layout
---
✅ 11. Lists
list-style
list-style-type
list-style-position
list-style-image
---
✅ 12. Content Generation (Pseudo Elements)
content
counter-increment
counter-reset
quotes
---
✅ 13. Media Queries & Responsive Design
@media
@supports
---
✅ 14. Units (Used With Properties)
px, em, rem, %, vw, vh, vmin, vmax, pt, cm, in, ex, ch
---
✅ 15. Pseudo-classes & Pseudo-elements
/* Pseudo-classes */
:hover
:focus
:active
:visited
:first-child
:last-child
:nth-child(n)
:checked
:disabled
:enabled
:not(selector)
/* Pseudo-elements */
::before
::after
::first-letter
::first-line
::selection
---
✅ 16. Miscellaneous
box-sizing
user-select
pointer-events
appearance
will-change
object-fit
object-position
caret-color
scroll-behavior
scroll-snap-type
scroll-margin
[7/17, 22:21] गुरु कृपा केवलम🪷: Here is a complete list of HTML tags (also known as HTML elements), categorized for easy understanding. These are used to structure content on web pages.
---
✅ 1. Basic Structure Tags
<!DOCTYPE> <!-- Document type declaration -->
<html> <!-- Root of HTML document -->
<head> <!-- Meta and link info -->
<body> <!-- Main content of the page -->
---
✅ 2. Metadata Tags (used inside <head>)
<title> <!-- Title of the page -->
<meta> <!-- Metadata like charset, author, viewport -->
<link> <!-- External CSS files -->
<style> <!-- Internal CSS -->
<script> <!-- JavaScript code -->
<base> <!-- Base URL for links -->
---
✅ 3. Sectioning Tags
<header> <!-- Top of section/page -->
<nav> <!-- Navigation links -->
<main> <!-- Main content -->
<section> <!-- Group of related content -->
<article> <!-- Independent content block -->
<aside> <!-- Sidebar or tangential info -->
<footer> <!-- Bottom content -->
---
✅ 4. Text Formatting Tags
<h1> to <h6> <!-- Headings -->
<p> <!-- Paragraph -->
<br> <!-- Line break -->
<hr> <!-- Horizontal line -->
<pre> <!-- Preformatted text -->
<strong> <!-- Important text (bold) -->
<em> <!-- Emphasized text (italic) -->
<b> <!-- Bold text -->
<i> <!-- Italic text -->
<u> <!-- Underlined text -->
<mark> <!-- Highlighted text -->
<small> <!-- Smaller text -->
<sub> <!-- Subscript -->
<sup> <!-- Superscript -->
<blockquote> <!-- Quoted section -->
<q> <!-- Inline quote -->
<abbr> <!-- Abbreviation -->
<cite> <!-- Citation -->
<code> <!-- Inline code -->
<kbd> <!-- Keyboard input -->
<samp> <!-- Sample output -->
<var> <!-- Variable -->
---
✅ 5. List Tags
<ul> <!-- Unordered list -->
<ol> <!-- Ordered list -->
<li> <!-- List item -->
<dl> <!-- Description list -->
<dt> <!-- Description term -->
<dd> <!-- Description definition -->
---
✅ 6. Link & Media Tags
<a> <!-- Anchor (link) -->
<img> <!-- Image -->
<map> <!-- Image map -->
<area> <!-- Clickable area -->
<video> <!-- Video -->
<audio> <!-- Audio -->
<source> <!-- Media source -->
<track> <!-- Text tracks for media -->
<iframe> <!-- Embedded content -->
---
✅ 7. Table Tags
<table> <!-- Table -->
<tr> <!-- Table row -->
<th> <!-- Header cell -->
<td> <!-- Data cell -->
<caption> <!-- Table caption -->
<thead> <!-- Table header -->
<tbody> <!-- Table body -->
<tfoot> <!-- Table footer -->
<col> <!-- Column -->
<colgroup> <!-- Group of columns -->
---
✅ 8. Form Tags
<form> <!-- Form -->
<input> <!-- Input field -->
<textarea> <!-- Multi-line input -->
<select> <!-- Dropdown -->
<option> <!-- Dropdown option -->
<optgroup> <!-- Option group -->
<button> <!-- Button -->
<label> <!-- Label for form element -->
<fieldset> <!-- Group form fields -->
<legend> <!-- Fieldset title -->
<datalist> <!-- Auto-complete list -->
<output> <!-- Output field -->
---
✅ 9. Interactive Tags
<details> <!-- Expandable box -->
<summary> <!-- Summary for <details> -->
<dialog> <!-- Dialog box -->
<menu> <!-- Menu list -->
<menuitem> <!-- Menu item -->
---
✅ 10. Scripting Tags
<script> <!-- JavaScript code -->
<noscript> <!-- Content for no-JS browsers -->
<canvas> <!-- Drawing graphics -->
<template> <!-- HTML template -->
<slot> <!-- Web component slot -->
---
✅ 11. Semantic Tags (HTML5)
<header>, <footer>, <main>, <nav>, <section>, <article>, <aside>, <figure>, <figcaption>, <mark>, <time>, <progress>, <meter>
---
✅ 12. Obsolete/Deprecated Tags (avoid using)
<center>, <font>, <big>, <blink>, <marquee>, <acronym>, <applet>, <basefont>, <frame>, <frameset>, <noframes>
---
✅ Common Empty Tags (self-closing)
<br>, <hr>, <img>, <input>, <link>
CSS ✅
Here is a comprehensive list of all CSS properties categorized for easy understanding. These include most commonly used and advanced properties in CSS3.
---
✅ 1. Text & Font Properties
color
font-family
font-size
font-style
font-variant
font-weight
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
white-space
word-spacing
direction
unicode-bidi
quotes
---
✅ 2. Box Model Properties
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-width
border-style
border-color
border-top
border-right
border-bottom
border-left
outline
outline-width
outline-style
outline-color
outline-offset
width
height
min-width
max-width
min-height
max-height
box-sizing
---
✅ 3. Positioning and Layout
display
position
top
right
bottom
left
z-index
float
clear
overflow
overflow-x
overflow-y
visibility
clip
resize
---
✅ 4. Flexbox & Grid
/* Flexbox */
display: flex;
flex-direction
flex-wrap
justify-content
align-items
align-content
align-self
flex
flex-grow
flex-shrink
flex-basis
order
/* Grid */
display: grid;
grid-template-columns
grid-template-rows
grid-template-areas
grid-column
grid-row
grid-area
grid-gap / gap
justify-items
align-items
place-items
justify-self
align-self
---
✅ 5. Backgrounds
background
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background-clip
background-origin
---
✅ 6. Borders & Outlines
border
border-radius
border-collapse (for tables)
border-spacing (for tables)
box-shadow
outline
---
✅ 7. Typography & Effects
text-shadow
box-shadow
opacity
visibility
cursor
filter
---
✅ 8. Animation & Transitions
transition
transition-property
transition-duration
transition-timing-function
transition-delay
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
@keyframes
---
✅ 9. Transformations
transform
transform-origin
perspective
perspective-origin
backface-visibility
---
✅ 10. Table Properties
border-collapse
border-spacing
caption-side
empty-cells
table-layout
---
✅ 11. Lists
list-style
list-style-type
list-style-position
list-style-image
---
✅ 12. Content Generation (Pseudo Elements)
content
counter-increment
counter-reset
quotes
---
✅ 13. Media Queries & Responsive Design
@media
@supports
---
✅ 14. Units (Used With Properties)
px, em, rem, %, vw, vh, vmin, vmax, pt, cm, in, ex, ch
---
✅ 15. Pseudo-classes & Pseudo-elements
/* Pseudo-classes */
:hover
:focus
:active
:visited
:first-child
:last-child
:nth-child(n)
:checked
:disabled
:enabled
:not(selector)
/* Pseudo-elements */
::before
::after
::first-letter
::first-line
::selection
---
✅ 16. Miscellaneous
box-sizing
user-select
pointer-events
appearance
will-change
object-fit
object-position
caret-color
scroll-behavior
scroll-snap-type
scroll-margin
Comments
Post a Comment