DEV Community: Bhabani Sankar

Bootstrap: A Complete Guide

Bhabani Sankar — Mon, 24 Mar 2025 20:41:49 +0000

What is Bootstrap?

Bootstrap is a toolkit that allows developers to build responsive websites faster.
It provides components & plugins for easy design, extend, debug, test and deploy.
It provides tools required form building interactive UI from web and native apps.

How to Use Bootstrap?

Adding Bootstrap to Your Project
There are two main ways to add Bootstrap to your project:
A. Using CDN (Quickest Method)
Add the following lines inside your <head> tag:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS (Optional, for interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

B. Installing via NPM

npm install bootstrap

Then, import Bootstrap in your project:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Architecture of Bootstrap
Bootstrap is built using the following technologies:

HTML5 – Defines the structure of the webpage.
CSS3 – Provides styles and responsive layout mechanisms.
JavaScript (Vanilla JS in Bootstrap 5) – Used for interactive components like modals, tooltips, and carousels.
Sass (SCSS) – A CSS preprocessor used for customization.

Bootstrap Classes

Bootstrap provides a set of pre-defined classes that allow to configure various styles for elements.

Container Classes

These classes are configured with pre-defined media queries.
You can use for various devices.

.container small devices [mobile]
.container-sm tab
.container-md PC
.container-lg Laptop
.container-xl Laptop Large Screen
.container-xxl Wide screen devices
.container-fluid It can adjust according to device.

Box Model Classes
a) Margins

.margin-{break-point} all directions, break-point can be 1 to 4
.me-{ } end [right]
.ms-{ } start [left]
.mx-{ } left & right
.mt-{ } top
.mb-{ } bottom
.my-{ } top & bottom

Syntax:
              <div  class="ms-4">
                <span class="mx-3">

b) Padding
.p-{ } all directions 1 to 4
.pe-{ }
.ps-{ }
.px-{ }
.pb-{ }
.pt-{ }
.py-{ }

c) Border
.border base class
.border-{contextual} primary, secondary, danger, warning, success
info, dark, light etc.
.border-{size} 1 to 4

d) width
.w-{ } 25, 50, 100

e) height

.h-{ } 50, 100

f) border radius

.rounded base class
.rounded-{ }
.rounded-circle
.rounded-pill

Position Classes

.position-static
.position-relative
.position-absolute
.position-fixed
.position-sticky
.top-{ }
.start-{ } => 0, 50, 100
.end-{ }
.bottom-{ }

Background & Text Color

.bg-{contextual} .text-{contextual}

Syntax:
    <div class="bg-danger text-light">

Display Classes

.d-none
.d-block
.d-inline
.d-inline-block
.d-flex
.flex-wrap
.flex-row
.flex-column
.justify-content-between
.justify-content-evenly
.justify-content-center
.align-items-center
.align-items-baseline
.align-items-end

Grid System

.row row
.col responsive column
.col-{ } column with 12 break points

Syntax:
        <div class="row">
            <div class="col-2"> </div>
            <div class="col-10"> </div>
        </div>

Text & Font Classes

fs-{ } font size 1 to 7
h{ } heading size 1 to 6
fw-bold font weight
fs-italic font style
text-start left align
text-center center align
text-end right
text-justify justified
text-decoration-underline
text-decoration-overline
text-decoration-linethrough

Ex-

<body class="container-fluid">
     <div class="fs-1 fw-bold text-decoration-underline text-center">Bootstrap</div>
     <span class="h1">Welcome</span> to Bootstrap
</body>

Button Classes

.btn .btn-{contextual} .btn-outline-{contextual} .btn-group .btn-toolbar .btn-close .btn-link .btn-group-vertical .btn-sm .btn-lg

Syntax:
        <button  class="btn btn-primary btn-lg"> Text  </button>

Form Classes

.form-control text, email, url, password, textarea, date & time, number
.form-range range
.form-select dropdown, listbox
.form-check-input radio, checkbox
.form-check-label labels for radio & checkbox
.form-label labels
.form-control-color color
.form-control-file file
.form-switch radio & checkbox container

Input Group Classes

.input-group .input-group-text .input-group-sm | lg

Table Classes

.table .table-hover .table-bordered .table-striped .table-{contextual} .table-responsive .caption-top

Syntax:
    <table  class="table table-hover table-bordered table-dark">

    </table>

Note: Bootstrap 5 requires a container to keep responsive table.

<div class="table-responsive">

        <table>

        </table>

    </div>

List Style & List Group Classes

.list-unstyled removes numbering or bullets
.list-group It removes list style and groups items.
.list-group-item Individual list item
.list-group-item-{contextual} colors
.list-group-horizontal

Syntax:
        <ol class="list-unstyled">
        <ul class="list-group">
          <li class="list-group-item list-group-item-danger">  </li>
        </ul>

Bootstrap Components

A component comprises of 3 basic elements

a) Design
b) Styles
c) Functionality

Design is created with HTML.
Styles are defined with CSS.
Functionality is configured using JavaScript/jQuery.
Bootstrap provides several free components like

alerts
carousel
navbar
progress
spinners
nav tabs etc..

alert

It is a message box embedded into page.
It is used for displaying messages dynamically.
It allows to open or close message dynamically.

Classes:

.alert .alert-{contextual} .alert-dismissible .alert-title .alert-link

Attributes:

data-bs-toggle It refers to component name to use when button clicked.
data-bs-dismiss It attaches close functionality for component.

data-bs-target It refers to the ID of component.

Syntax:
    <div class="alert alert-dismissible">
        <button  data-bs-dismiss="alert"> </button>
    </div>

Modal

It defines a popup dialog box.
Dialog opens with content in backdrop.

Classes:

.modal .modal-dialog .modal-content .modal-header .modal-body .modal-footer .modal-dialog-centered .modal-dialog-scrollable .modal-fullscreen .fade [animation]

Syntax:
    <div class="modal">
       <div class="modal-dialog">
        <div class="modal-content">
             // header
            // body
            // footer
        </div>
       </div>
    </div>

Attributes:

data-bs-toggle data-bs-target data-bs-dismiss

Note: A page may contain several modals, hence every modal must have a reference ID. [Identification]

Offcanvas

It is similar to a modal but have various directions.
You can popup with content in backdrop but the direction can be left, right, top or bottom. [start=left, end=right]

Classes:

.offcanvas .offcanvas-start | end | top | bottom .offcanvas-title .offcanvas-header .offcanvas-body

Syntax:
    <div class="offcanvas offcanvas-start">
        <div class="offcanvas-header">
        </div>
        <div class="offcanvas-body">
        </div>
    </div>

Carousel

It allows to create sliding and fading content in page.
You can control manually and auto.

Basic Carousel Classes:

.carousel .carousel-inner .carousel-item .active .carousel-fade .slide

Syntax:
    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item"> </div>
            ... several items ...
        </div>
    </div>

-- Make sure that any one carousel-item is active.
<div class="carousel-item active"> </div>

--Carousel need to start explicitly by using the attribute "data-bs-ride".
<div class="carousel" data-bs-ride="carousel">

--Carousel requires "slide" class to configure slide animation.
<div class="carousel slide">

--You can also define fade animation using "carousel-fade" class.
<div class="carousel carousel-fade">

Carousel Controls:

Controls allow to navigate between items.
You can move to next or previous item.

Classes :-

.carousel-control-prev .carousel-control-prev-icon .carousel-control-next .carousel-control-next-icon

Attributes :-

data-bs-slide="prev" data-bs-slide="next" data-bs-target="#carousel_id"

--Carousel controls can be light or dark, to apply dark style
data-bs-theme="dark" latest version
carousel-dark pervious version [deprecated]

Syntax:
        <div class="carousel" data-bs-theme="dark">

Carousel Indicators:

Indicators allow random navigation.
You can navigate to any specific item directly.

Class:
.carousel-indicators

Attributes:
data-bs-slide-to-{ } index number starts with 0 = first item.
data-bs-target it refers to carouse id.

Syntax:
    <div class="carousel-indicators">
        <button></button>            // every button refers to a carousel item
        <button></button>    
    </div>

-- Make sure that any one button is active.
Note: The active must match with the carousel-item that is active.

Carousel Timing:

You can control the timing for items.
Timing refers to interval between items.
You can use the attribute "data-bs-interval".

Syntax:
    <div class="carousel-item" data-bs-interval="3000">

1000 = 1second

Collapse

It is used to show or hide any content dynamically.

Classes:
.collapse .show

Attributes:
data-bs-target data-bs-toggle

Syntax:
    <div class="collapse show"  id="p1">  </div>

    <button data-bs-toggle="collapse" data-bs-target="#p1">

Accordion

It is a set of items with show & hide functionality.
Accordion can show or hide using "Mutex" [Mutual Exclusion].
If any one item is open then others are hidden.

Classes:
.accordion .accordion-item .accordion-header .accordion-body .accordion-button .accordion-collapse

Attributes
data-bs-target data-bs-toggle data-bs-parent It is defined for collapse in accordion, it refers to parent ID.

Syntax:
    <div class="accordion-collapse collapse"  data-bs-parent="#accordion_id">

Nav with tabs

It is used for creating tab based navigation.
In one page you can display multiple categories using tabs.
User can switch between tabs.

Classes:
.nav-tabs .nav-pill .nav-item .nav-link .nav-text [obsolete] .nav-item-text .tab-content .tab-pane .nav [base class] .active

Syntax:
    <ul class="nav nav-tabs">
        <li  class="nav-item">
        <a class="nav-link">
            <span class="nav-item-text"> </span>
        </a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane">
        </div>
    </div>

Navbar

It is used to design responsive navigation bar.
It uses media query and changes according device width.

Classes:
.navbar .navbar-expand-{lg | sm} .navbar-nav .navbar-collapse .navbar-dark | light .nav-menu .nav-item .nav-link .nav-item-text .navbar-brand .navbar-toggler .navbar-toggler-icon

Progress Bar

It is used to show status of any task performed in page.

Classes:
.progress .progress-bar .progress-bar-striped .progress-bar-animated

Syntax:
    <div class="progress">
        <div class="progress-bar"> </div>
        ..... multiple progress bars ...
    </div>

The size of progress is defined by using "width".
Width is configured with style attribute and it is defined in "%".

Spinners
classes:
.spinner-grow .spinner-grow-sm|lg .spinner-border .spinner-border-sm | lg

Syntax:
    <span class="spinner-border text-danger"> </span>

Pagination
classes:
.pagination .page-item .page-link .page-item-text .active .disabled

Dropdown

It allows to configure a list that can open in various directions.
List allows complex format of content.

Classes:
.dropdown .dropup .dropend .dropstart .dropdown-toggler .dropdown-menu .dropdown-item .dropdown-item-text .dropdown-divider

Attributes:
data-bs-toggle data-bs-theme="dark"

Syntax:
    <div class="dropdown">
        <button class="dropdown-toggler"> Text </button>
        <ul class="dropdown-menu">
        <li class="dropdown-item"> <span class="dropdown-item-text"> </span></li>
        </ul>
    </div>

Scroll Spy

It is used for intra document navigation.
It can identify the scrolling content and highlight relative titles or menu items.

Attributes:
data-bs-spy="scroll" data-bs-target data-bs-smooth-scroll="true" data-bs-offset="0"

Syntax:
    <nav>
        <div class="list-group"  id="topics">
        <a class="list-group-item list-group-action" href="#topic1"> </a>
        </div>
    </nav>
     <div data-bs-spy="scroll" data-bs-smooth-scroll="true" data-bs-target="#topics">

        .... design headings with ID and content below heading scrollable...

     </div>

Cards
Classes:
.card .card-header .card-body .card-footer .card-title .card-subtitle .card-img-top .card-img-bottom .card-img-overlay

Badge
-It is used to highlight any content in a container.

Class:
.badge

Toast

It is similar to alert.
It can show or hide tips dynamically in page.

Classes:
.toast .toast-header .toast-body .toast-container .show .fade

The Art of Styling: A Comprehensive Guide to Cascading Style Sheets(CSS)

Bhabani Sankar — Sun, 02 Mar 2025 05:39:24 +0000

What is CSS?

CSS stands for Cascading Style Sheets.
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation (look and feel) of a web page written in HTML. It defines how HTML elements should be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.

Cascading: The term "cascading" refers to how styles are applied to elements in a hierarchical manner. If multiple styles apply to the same element, the "cascading" nature determines which style takes precedence. It follows a set of rules based on specificity, importance, and source order.

Styles :

Styles define a set of attributes that are used to make HTML more interactive and responsive.
Styles use an object model to format HTML elements and make them more interactive.
Object keeps all relative data and logic together.
Object enables features like a) Reusability b) Separation c) Extensibility d) Maintainability e) Testability etc..

Sheets: CSS is written in separate files (stylesheets) that can be linked to HTML documents, allowing for better organization and maintainability.

CSS Syntax

Object is a key and value collection enclosed in a block "{ }"..

{ Key : value; Key : value; }
- Key refers to style attribute name.
- There are various style attributes like color, width, height, margin, padding etc..

Styles can be defined for HTML elements in 3 ways.
a) Inline Styles
b) Embedded Styles
c) External Style Sheets

Inline Styles:

Styles are defined for HTML elements individually by using a "style" attribute.

<h1 style="color:red; font-family:Arial; border:1px solid black">
Inline styles are faster in rendering.
You can't reuse the styles.

Embedded Styles:

Styles are defined for HTML elements using a <style> container.
You can embed style container in page.
It enables easy reusability and extensibility.
However it is slow in rendering when compared to inline.

Syntax:
<style> selector { attribute: value; } </style>

External Style Sheets

You can configure styles in a separate style sheet.
Style sheets have extension ".css"
You can link style sheet to any page.
You can access styles across pages.

CSS Selectors

Selector is required for styles that are defined in embedded or external file.
A selector selects HTML element in page in order to apply given set of styles.
Selectors are of various types

Primary Selectors
Rational or Relational Selectors
Structural Selectors
Attribute Selectors
Dynamic Pseudo Classes
Root Selector
Language Selector
Universal Selector etc..

Primary Selectors:

Type Selector
ID Selector
Class Selector

Type Selector:

It refers to element name.
It applies styles to all occurrences of element in page.
You can't ignore for any specific occurrence.

Syntax:
h1, p, div, span, li
{
}

ID Selector:

Every element can use an ID reference.
You can configure styles using ID.
ID is accessible with "#".
You can choose occurrence where you want to apply the styles.

Syntax:
#text-style { } <h1 id="text-style">

Every HTML element can have only one ID reference.
You can't apply multiple set of styles to one element using ID.

Class Selector:

It is defined using class attribute.
It is accessible using ".className".
You can choose specific occurrence.
It allows multiple inheritance.
You can configure multiple classes for one element.

Syntax:
.className{ } <div class="className1 className2 className3..">

Rational or Relational Selectors:
-These selector default with parent and child elements as well as with elements that have relation.

Relation like adjacent, below, above, before, after, first, last etc..

Descendent Selector --
-Targets all tags under specified parent. It includes any level hierarchy.
-It defines the parent element and the child element by using
space.
Syntax:
parentElement childElement { }

Child Selector --
-It applies effects only to the direct child of parent element.
Syntax:
Parent > child { }

Adjacent --

It defines effects to an element which is specified immediately after current element.
It is not parent and child, it is one below another.
It will apply only to the first adjacent element. Syntax: FirstElement + adjacentElement { }

General --

It defines effects to all elements which are specified after the current element. Syntax: FirstElement ~ AdjacentElements { }

Attribute Selectors:

Several elements in HTML are presented by using attribute of tag. <input type="button"> <input type="radio">
“type” is attribute.
We have to apply effects based on attribute and value.

Syntax:
tagName[“attribute”] { } tagName[“attribute=value”] { }

Attribute selectors can be defined with conditions.
Effects are applied only to attribute that match the given condition.

[attribute="val"]
-- Equal specifies that it should be exact match.

[attribute^="val"]
-- It refers the value starting with specified term.

[attribute$="val"]
-- It specifies that the value ending with given term.

[attribute*="val"]
-- It matches the term at any location.

[attribute|="val"]
-- Name starts with specified term and separated with "-".

[attribute~="val"]
-- Name start with specified term and contain blank space.

Dynamic Pseudo-Classes:

Dynamic indicates that the effect can change according to state and situation.
Pseudo indicates that it is not referring to exactly the element which is having the same name as selector name.
The selector name and the element if effects may differ. Syntax: link - not <link> element, it refers to <a> class/Id/type: pseudoClass { }

:link -- Specifies effect for Hyperlink.
:visited -- It defines effects for visited links.
:hover -- It defines effects when mouse pointer is over element.
:active -- It defines effects when link is in active state.
:focus -- It defines effects when element get focus.

Syntax:

Element:Link { }
#heading:hover {}
.txtName:focus { }

Target pseudo class --
:target :-

It defines effects to any element when it becomes target of a link.
You can implement in intra document navigation.

The Element state pseudo-classes --

Element state indicates the state of element like enabled, disables, readonly,checked. :enabled -- It defines effects when element is enabled. :disabled -- It defines effects when element is disabled. :read-only -- It defines effects when element is set to read-only. :checked -- It defines effects when element is checked.

The Element validation state pseudo classes:

HTML 5 provides pre-defined form validations like require, email, url, pattern etc.
CSS can use HTML 5 validations to verify the state valid or not and can apply effects.

:valid -- It defines effects for element if is value is valid against the
validation defined. Validation can be verified by using:

Minlength
Maxlength
Required
Pattern
Email
URL etc.

:invalid -- It defines effect for element when it is invalid.
:in-range -- It defines effects for element when input value is within the specified range.
:out-of-range -- It defines effects for element when input value is out of given range.
-Range is verified with “min and max” values defined for input
element.
:required -- It defines effects to element when it verified with required
error.
-It is not validating required, It is just verifying whether the required defined or not.
:optional --If it is not defined with required validation then it is treated as optional.

Structural Selectors:
-You can target your effects based on the position of element in parent and child hierarchy.

:first-child -- It defines effects only for first child element.
:last-child -- It defines effects only for last child element.
:nth-child(LevelNumber) -- It defines effects only to specific child element that occurs at given level.
-Level number starts with 1.
-Index number starts with 0.
-You can also define the pre-set values like ‘even & odd’ to apply effects based on even and odd occurrences.
:nth-of-type(LevelNumber[n]) -- It will repeat the effect for every nth occurrence.
:nth-of-type(2n) -- It will repeat the effect for every 2nd occurrence.
:nth-of-type(2n+startNumber) -- It will start with specific level.
:nth-last-of-type(n) -- It will apply effect for every nth occurrence from bottom.
:nth-last-child(n) -- It will apply from bottom without repeating.
:root -- It refers to root of document, which is 'body'.
:empty -- If any element is empty, without any content then its will define the given effects.You can configure for containers like <div>, <span>,<td>, <dd>, <p> etc.

Pseudo-Element Selectors:
::first-line -- Effects for first line in paragraph.
::first-letter -- Effects for first character.
::before -- Effect or content to add before the current element.
::after -- Effect or content to add after the current element.
::placeholder -- It will apply effects for placeholder.
::selection -- It will apply effects for selection.

Language Selector:

It defines effects based on lang configured for element.
If you page is multi lingual then you can define effects to content based on specific language. ":lang()"

Universal Selector:

It is defined by using "*" that represents all.
It apply effects to all elements.

CSS Comments:

Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style>element, and starts with /* and ends with */.
You can add comments wherever you want in the code.

CSS Colors:
CSS Colors

Colors in CSS can be defined by using 3 techniques.
Color Name
Hexadecimal color code
RGB Color methods.
CSS supports 16 million colors.
Standard color names are few.
You can directly define the color name or color shade name. Syntax: h2{ color:green; } h2{ color:lightgreen; }

Hexadecimal color code:

The primary colors are “Red, Green & Blue”.
All colors are derived from primary colors.
Hexadecimal allows to define multiple color shades.
Hexadecimal colors have a combination or 3 or 6 chars with prefix “#”
Hexadecimal number system is 16 base number system.
We use 16 different values to mix and create a color shade.
Hexadecimal color code uses the values 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
0 is minimum and f is maximum.
Color code have 3 or 6 places other than #
If it is 3 then “#RGB” R - Red value G - Green value B - Blue value
Red, Green and Blue will have 1 place representation. Syntax: <style> input { background-color: #af0; } </style>
If it is 6 places then “#RRGGBB”.
Red, green and blue values will have 2 places. Syntax: <style> input { background-color: #dddddd; } </style>

RGB color code:

The colors are defined with “Red, Green and Blue” combination.
The method “rgb()” is used for RGB colors.
It takes 3 values “rgb(redValue, greenValue, blueValue)”
The value range for red, green and blue will be between 0 to 255. Syntax: rgb(0,0,255) blue color rgb(255,0,0) Red color

Ex:
<style> input { background-color:rgb(205,123,215); } </style>

RGBA (Red, Green, Blue, Alpha)

Alpha is for opaque 1.0 is full opaque
Range between 0.0 to 1.0 <style> input { background-color:rgba(255, 0, 0, 0.3); } </style>

CSS Units:

Units define size and position.
You can configure size with: height and width.
You can configure position with: x-axis, y-axis and z-axis.
The CSS units are categorized into 2 groups. -- Absolute Length Units -- Relative Length Units

Absolute Length Units :-

They are not relative to anything else and are generally considered as normal units.
These are not affected by other relative elements and their units.

Relative length units:
Relative length units:

These are related to other contents in the page.
The size of any element can be determined based on its parent, child or adjacent.
The advantages are when parent element size is changed will relatively affects the child element also.

em -- It uses the font size of parentelement and applies to current element.
ex -- X- height of elements’ font [width]
ch -- Defined for width, with regard to the root element.
rem -- Font size to the root element size.
ln -- Line height of the element.
vw -- 1% of the viewport’s width.
vh -- 1% of the viewport’s height.
vmin -- 1% of the viewport’s smaller dimension.
vmax --1% of the viewport’s larger dimension.

Cascading Rules:

If a set of effects are re-defined for same element with same type of selector then according to CSS rule the last set of effects are applied to element.
If element have to choose between type selector and class selector then it will always choose the "class selector".
If element is configured with both ID and class selector then always ID selector related effects are applied to element.
If different style attributes are defined in ID, Class and Type selectors and applied to any specific element. Then then all styles are applied to element. Only same name style attributes are overridden.

CSS 2D Transforms:

CSS 2D Transform feature allows the element to be transformed in 2-Dimensional space.
2D is along X-Axis and Y-Axis.
CSS provides “transform” property to defined transformations.
CSS transforms are not supported on various browsers.
You have to use special plug-in for different browsers.

Various transforms provided by CSS are:
translate()-

It is used to move the element from its current position to a new position along x and y axis. Syntax: transform:translate(xPixels, yPixels); transform:translateX(pixels); transform:translateY(pixels); Note: Transformation happens in just one second, you can set timing for transformation by using "transition" attribute.

scale():

It is used to increase or decrease the size of element along x and y axis.
You can control the height and width of element. Syntax: transform:scale(scaleX, scaleY); transform:scaleX() transform:scaleY()
Scale units are defined in fractions -- 1 = 100 -- 1.5 = 150 -- 2 = 200 Syntax: transform:scale(2) // both x and y will be 200 transform:scale(2,1) // x will be 200 and y 100 transform:scaleX(2) // x will be 200 X = width Y = height

Skew():

Skew is used to tilt the image by specified angle. Syntax: transform:skew(sx, sy) transform:skewX(angle) transform:skewY(angle)

angle clockwise: 0 to 360
angle counter clockwise: -360

Rotate():

It rotates the element around its origin.
It uses value defined in deg.
It uses 0 to 360 deg angle
You can use -ve value for counter clockwise. Syntax: transform:rotate(‘angle’); transform:rotateX() transform:rotateY()

Transform Matrix:
-- Matrix allows to define all 2D transforms to single element.
-- The transform methods
-- translate(x,y)
-- translateX()
-- translateY()
-- scale(x,y)
-- scaleX()
-- scaleY()
-- rotate()
-- rotateX()
-- rotateY()
-- skew()
-- skewX()
-- skewY()
Syntax:
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

CSS 3D Transforms:

CSS 3D transforms allows 3-Dimensional design.
It will have configuration for X, Y and Z axis.
The methods used for 3D are same as 2D but comprises of 3rd Dimension.

Translate3d():

It sets the position of element along x, y and z axis. Syntax: translate3d(tx, ty, tz)

Scale3d:

It changes the image size in 3 dimensions. Syntax: scale3d(x, y, z)

CSS Text Styling:
Font Styling :-
-It provides a set of attributes and values that are used to
format the text.
color -- Defines the foreground color.
font-family -- It defines the font family name like: Arial
font-size -- It defines the text size.
font-weight -- Defines normal, bold, lighter, bolder.
font-style -- Defines italic effect.
text-transform -- Defines uppercase, lowercase, capitalize, full-width. [affects the font size]
text-decoration -- Defines underline, overline, line- through.
-It is short had for various text decoration options like style of line, color of line etc.
-- text-decoration-color
-- text-decoration-style
-- text-decoration-line
text-shadow -- It defines a shadow for text.
text-align -- Left, center, right and justify
line-height -- Space between lines.
letter-spacing -- Space between letters.
word-spacing -- Space between words.
font-variant -- Caps, lowercase. [Without effecting the height of text it will change to caps]
text-indent -- First line spacing.
text-overflow -- Control the wrapping of text.
white-space -- Control the blank space.
direction -- Text direction
text-orientation -- Changes the orientation of text.

Ex: Font, Font Style, Color, Text Decoration

<!DOCTYPE html>
<html>
<head>
<title>Text Effects</title>
<style>
div{
color:red;
font-family: Arial;
font-size: 4em;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
text-decoration: underline;
text-decoration-color: blue;
text-decoration-style: wavy;
}
</style>
</head>
<body>
<div>sample text</div>
</body>
</html>

CSS Box Model:

Everything in CSS has a box around it.
Understanding boxes is important for designing layout.
It is often called as “Box Model”.
Box model comprises of Content Box -- The area where your content is displayed. It can be defined by using "height and width" attributes.

Padding Box -- The padding is around the content as white space. Its size can be controlled by using "padding".

Border Box -- The border box warps around the content or padding. It is controlled by using "border" property.

Margin Box -- The margin is the outmost layer wrapping the content, padding and border. It configures a white space around border. It is defined by using “margin”.

Set Margins, Padding and Border:
Margin
-- It specifies the space around border.
-- You define by using following properties.
-- margin [short hand – sets in all directions].
-- margin-top.
-- margin-bottom.
-- margin-left.
-- margin-right.

Padding
-- It specifies the space around content.
-- You can define
-- Padding-left.
-- Padding-right.
-- Padding-top.
-- Padding-bottom.
-- Padding. (All options are similar like margin)

CSS Transition:

CSS transition is a module of CSS.
Transition is used for configuring animation for initial and final state.
Initial state is before transformation.
Final State is after transformation. -You can control the behaviour using various CSS effects

-- timing
-- duration
-- other attributes

CSS Transition comprises of following properties

-- transition
-- transition-delay
-- transition-duration
-- transition-property
-- transition-timing-function

transition-delay : Delay is time taken to start animation.
Syntax:
transition-delay: 2s;
transition-duration : Time take to complete the transformation.Specifies the duration from initial to final and vice versa.
Syntax:
transition-duration: 5s;
transition-property : You can define several effects for transformation.
-All effects are transformed from initial to final.
-You can define only the effect that you want to transform by using transform-property.
Syntax:
transition-property: width, height; transition-property:all;
transition-timing-function : CSS provides a set of pre-defined animations functions which you can apply to content.
-These effects have pre-defined timings and behaviour.
-The transition timing functions are
linear: speed will be even from begin to end.
ease-in: starts slowly and increases towards end.
ease-out: starts quickly and slow down.
ease-in-out
steps
jump-start
jump-end
jump-none
jump-both
start
end
step-start
step-end

CSS Animations:
-- CSS animations are used to animate CSS transitions.
-- You can reduce the use of JavaScript and Flash for animation.
-- Animation can easily run on low bandwidth devices like mobiles, tabs.
-- Animation will work even when JavaScript is disabled or flash plugin is not available.
-- To create CSS animation, we need
-- @keyframes
-- animation
-- animation-name
-- animation-duration
-- animation-timing-function
-- animation-delay
-- animation-iteration-count
-- animation-direction
-- animation-fill-mode
-- animation-play-state

@Keyframes:

It is used to configure every frame in animation.
At each frame we can define effects for object.
Keyframes are defines with initial, final, and intermediate steps.

Syntax:

@keyframes identifierName
{
from { effects for initial state }
to { effects for final state }
}

Keyframes are applied to any element by using "animation-name" property Syntax: P { animation-name: keyframeIdentifierName; }
You can control the iteration count, the number of times to display by using "animation-iteration-count"
You can control animation direction by using "animation-direction"

CSS Position:

Generally, elements are placed according to the document layout flow.
Position allows to make element behave differently and take them out of the document flow.
CSS Positions are defined by using “position” style attribute.

Static Position:

It is according to the normal flow of document.
It is the default position for every element.
It will not have any effect on the element position.
Static position is not affected by top, right, bottom, left and z-index attributes. Ex: p { position: static; right: 10px; }

Sticky Position:

Element is positioned according to the normal flow of document.
It can make the content sticky after scrolling to the specified margin.
It required the margins to define and position by using left, right, top or bottom.

Fixed Position:

The element is removed from normal document flow.
Element is no longer a part of DOM flow.
Its position is fixed with left, right, top and bottom attributes.
It will not move from the position defined.
It locks the component at fixed position on page.

Relative Position:

It according to the normal document flow.
Its position will be relative to adjacent or parent element.
It is from the parent or from adjacent.

Position Absolute:

The element is removed from the normal document flow.
It is positioned relative to its closest element.
It is affected by using left, right, top and bottom values.

As you apply these techniques, your CSS skills will continue to grow, opening doors to endless design possibilities.

Thank you for taking the time to read this article. I hope it has helped you on your CSS journey!

The Ultimate Guide to HTML: From Fundamentals to Advanced Techniques

Bhabani Sankar — Mon, 30 Dec 2024 18:44:44 +0000

HTML (HyperText Markup Language) is the standard language used to create and design websites and web applications. It structures the content on the web by using a system of elements, tags, and attributes.

1.The Birth of HTML
HTML was invented by Tim Berners-Lee, a British computer scientist, in 1989 while working at CERN (European Organization for Nuclear Research). He proposed the idea of a "hypertext system" that would allow researchers to share and access documents over the internet.

In 1991, Berners-Lee created the first version of HTML, which included just 18 tags. These tags allowed the creation of simple documents with hyperlinks (which is why it’s called HyperText) and basic formatting. This marked the birth of the World Wide Web. Tim Berners-Lee introduced HTML as a way to format documents and hyperlinks on the web.

2.HTML 2.0 (1995)
As the internet began to grow rapidly, the need for a standardized version of HTML arose. In 1995, the Internet Engineering Task Force (IETF) formed a working group to standardize HTML, leading to the release of HTML 2.0. HTML 2.0 was the first version to be formally standardized and included all the basic elements necessary for web documents. It supported text, images, tables, forms, and links but was still quite limited in terms of formatting and layout capabilities.

3.HTML 3.2 and HTML 4.0 (1997 - 1999)
By 1997, HTML had become more widely used, and the World Wide Web Consortium (W3C), led by Tim Berners-Lee, took over the development and standardization of HTML. HTML 3.2 (1997): This version introduced table-based layout, the tag, and other presentational elements. It was a major step forward for web design, although still lacking in advanced styling features.

HTML 4.0 (1999): This version was a significant upgrade, emphasizing separation of content and presentation. HTML 4.0 encouraged web developers to use CSS (Cascading Style Sheets) for layout and design, which improved accessibility and usability. HTML 4.0 also introduced features like:
New semantic elements such as <header>, <footer>, <section>, and <article> (though they would become more relevant in later versions). Internationalization support (with support for different languages). Scripting support with <script> tags for JavaScript.

4.HTML 5 (2014)
HTML5 is the most significant update to HTML, introduced to meet the growing demands of modern web applications, multimedia content, and mobile devices.
Key Features Introduced in HTML5:

New Semantic Elements: HTML5 added more meaningful elements for better document structure, such as: <header>, <footer>, <nav>, <article>, <section>, <figure>, and more.

Multimedia Support: HTML5 introduced new elements like:- <audio> and <video> for embedding multimedia directly into web pages without needing plugins like Flash. <canvas> for dynamic, scriptable rendering of 2D shapes and bitmap images.

Offline Capabilities: HTML5 added support for offline web applications with features like:-Local storage and IndexedDB to store data on the client side.

Form Controls: New input types were introduced, including date, email, number, and range to improve user input and form validation.

API Support: HTML5 included many JavaScript APIs for geolocation, local storage, web workers, and more.

Better Mobile Support: HTML5 was designed to be mobile-friendly, ensuring that websites could be easily viewed on smartphones and tablets.

HTML5 marked the transition to web apps and interactive websites, as it offered features that eliminated the need for many third-party plugins (like Flash and Java applets).

5. HTML Today
After HTML5, there was no formal "HTML 6." Instead, HTML has transitioned into a living standard under the stewardship of the Web Hypertext Application Technology Working Group (WHATWG).This living standard approach means HTML is continuously evolving, with regular updates and improvements.New features are introduced as necessary, based on the needs of modern web applications and the web development community.

HTML Structure

HTML documents are structured hierarchically, with elements containing other elements. Here's a basic breakdown of an HTML document structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Basics</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

<!DOCTYPE html>: Declares the document type and version of HTML.
<html>: The root element that contains all the HTML content.
<head>: Contains metadata such as the title, character set, and external links.
<body>: Contains the visible content of the page like text, images, and links.

HTML Elements and Tags :
HTML uses elements that are enclosed in tags. An element can contain other elements, text, or attributes.

Tags: Elements are wrapped in angle brackets, e.g., <h1>, <p>, <a>.
Opening Tag: <h1> (start of an element).
Closing Tag: </h1> (end of an element).
Content: The content goes between the opening and closing tags.
Empty Tags: Some elements don’t have closing tags, such as <img> and <br>.

Common HTML Tags :

Headings: <h1> to <h6> tags represent headings, with <h1> being the most important and <h6> the least.

<h1>This is a most important heading</h1>
<h6>This is a lest important heading<h6>

Paragraphs: <p> is used to define paragraphs.

<p>This is a paragraph of text.</p>

Links: <a> is used to create hyperlinks.

<a href="https://dev.to">Dev.to</a>

These links are used to navigate the user into different addresses/references. These links are generated by anchor tag. anchor tag denoted with 'a'.We can even keep one element inside another element called as "nested elements".eg:

<p> for more content like,share and subsctibe <a href="https://youtube.com">fb</a></p>

we can even navigate to mail using 'mailto:mailid' or telephone using 'tel:number' or watsapp using 'wa.me/number'

To open anchor links in new tab , we use attribute target and set value = "_blank"
eg:

<a href="https://dev.to" target="_target">click for Dev.to</a>

Images: <img> is used to display images.But img is a self closing tag. self closing tags are the tags which do not have closed tags.

<img src="image.jpg" alt="Description of Image">

img have following attributes:
src -- used to keep links/path of images source.
alt -- it describes alternative text for image and it works only when
src is not works.
height -- used to mention height of the image.
width -- used to mention width of the image.

Lists: Lists are used to list out certain items either ordered or unordered. eg: grocery list,expenditure list,books list, students list,todo lists,results,contact list some lists have order and some don't. In HTML, lists are classified as 3 types :

1.ordered list : ordered lists are used to list out certain items in an order.HTML uses 'ol' tag for ordered lists.Inside ol, each list item denoted by 'li' tag.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

2.unordered list: unordered lists are to lists out items in which order is not necessry.unordered lists uses 'ul' tag and each list item is 'li'
Type of the unordered list can be done similary as ordered but not recommanded.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

3.Definition list: These lists are used to define certain statements or events, changelog,timline etc.., They uses 'dl' tag.
Each item will have 2 properties
dt- definition term
dd - definition data

Tables: Tables are used to represent the data in rows and columns. Eg: crickbuzz, screener, school/college time tables...etc. Horizontal lines of information is called row,Vertical lines of information is called column. tables are created by 'table' tag each table have rows, which are created by 'tr' tag each row contains either heading or data , which are created by 'th' or 'td' tags

Formatting Tags :

Click here

Element :
An element is nothing but content with open and closed tags.
<h1>heading</h1> -- h1 element
Elements are two types:
i. block element: block element will not allow any other element beside.
blocks element also have height and width
Eg: h1 to h6, p, div etc..,
ii. in-line element: inline element will allow other elements beside.
inline elements also not have height and width
Eg: a, img, span

div and span are container elements, they are used to wrap certain elements as a group.

div is a general block container element.
span is a genral inline container element.

** Class and id's** :
we can specify a class name or id name to any element to identify the element.class names can be multiple and multiple elements can have same class name.id names will be always unique or singular.
<element class="classname" id="idname"></element>

Semantic elements :
sematic elements are introduced to make meaningful HTML which is easily understand by search engines. This practice is good for better SEO(Search Engine Optimation). semantic elements will not change any UI.
Most used semanti elements are:
header, main, footer, nav, aside, section, article, thead, tbody, tfoot, address, figure, picture etc...

Media :

Audio--audio's are used to keep audio track files into webpage. it uses audio tag and for source it uses source tag. we can use flags like autoplay,controls to make audio plays automatically and contains controls.

Video--video's are used to show the media to user. To keep video into webpage, we can use video and for source, it uses source tag.

Iframe --Iframe is used to embedany 3rd party media into your website.

<iframe src=""></iframe>

Figure--Figure is used to display images with its captions.

<figure>
   <img src="" alt=""/>
   <figcaption>caption</figcaption>
 </figure>

Picture :
Picture is used to add responsive images to web page(means different images for different devices).it works with source tag containing media queries.

<picture>
  <source media="">
  <source media="">
  <img />
</picture>

Forms :

forms are used to collect user's data such as name,email,phone_number etc..,Eg: login, registration, feedback,contact,admission, attendance form, messages,subscribe,search, forgot password etc...,To take user's data we can use a self closing element named 'input', Every input will have following attributes:
type: it defines the type of input it can take.
placeholder: Dummy text to hold the place until actual value comes.
id : used to identify the input uniquely.
name : name is the variable by which value is sent to server.
Label Tag: label is used to select certain elements and it needed to be connected with input's id (for attribute) form tag also have attributes such as :
-- action: contains the path of server(where the form to be submitted).
-- method: it defines the way to send the values.
--- GET: get shows all the values in URL.
--- POST: post will not show the values in the URL.

Input Types: There are different types of inputs such as
i. text: text is used for alphanumerical inputs.
ii. email: email is used for email inputs.
iii. password: password is used for secret keys,pins,password etc..,
iv. url: url is used to input links of http/https;
v. number: number is used to input the only numerical values.
vi. date: date is used to input date using default calender.
vii. time: time is used to input time using default timer.
viii. datetime-local: it is used to input date and time at a time.
ix. week : it is used to input week of the year.
x. month : it is used to input the month of the year.
xi. file: file is used to upload certain files.
xii. hidden : hidden is used to hide the input.
xiii. button: button is used to include buttons of different variations.
submit: submit is used to submit the form.
reset: reset is used to reset the form .
xiv.color: color is used to select specific colours.
xv. range: range is used to get range slider.

Radio buttons: radio buttons are used to select only one out of the choices. In radio buttons, all same purpose radio buttons should have same name.

<input type="radio" name="answer" value="yes>
<input type="radio" name="answer" value="no">

Checkboxes: checkboxes are used to select one or more values.

<input type="checkbox" name="" id="" value="">

all names of same purpose checkboxes should be same.

Dropdowns: Drop Downs are used to select one or more values.
it uses 'select' tag where each option is a 'option' tag

<select>
<option value=" "> </option>
</select>

HTML Validation

HTML validation is the process of checking whether an HTML document follows the syntax and rules defined by the HTML specification (such as HTML5, HTML4, or XHTML). It helps ensure that a webpage is properly structured and can be rendered correctly by browsers. Validation also plays a significant role in improving accessibility, search engine optimization (SEO), and web performance.

HTML5 Validation Methods:
With HTML5, validation has become easier, thanks to new form elements and input types that allow better client-side validation.

Required Fields : HTML5 introduces the required attribute, which ensures that a user fills in a form field before submitting it.

<form>
  <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>

Pattern Validation : You can define a pattern for form inputs using the pattern attribute, which ensures that the user input matches a specific format (using regular expressions).

<form>
  <input type="text" name="pincode" pattern="\d{6}" title="Enter a 6-digit pin code">
  <input type="submit" value="Submit">
</form>

Input Types for Validation : HTML5 introduces new input types like email, url, date, number, and tel, which provide built-in validation for specific data formats.

<form>
  <input type="email" name="email" required>
  <input type="submit" value="Submit">
</form>

HTML is the backbone of web development. It structures the content on the web using tags, elements, and attributes, forming the foundation for building web pages. As you advance, you will combine HTML with CSS (for styling) and JavaScript (for interactivity) to create fully functioning websites.

HTML Formatting

Bhabani Sankar — Wed, 18 Dec 2024 17:44:11 +0000

HTML is a markup language,meaning it uses tags and attributes to define the structure and content of a webpage.It was developed by Tim Berners-Lee in the early 1990s and has since evolved into an essential technology for web development. HTML works alongside CSS (Cascading Style Sheets) and JavaScript, which add style and functionality to websites, respectively.

The Basic Structure of an HTML Document :
An HTML document follows a standard structure that all webpages share. Here’s a simple example of an HTML document:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Web Page</title> </head> <body> <h1>Hello, World!</h1> <p>Welcome to my first webpage.</p> </body> </html>

Key HTML Tags and Their Functions:
HTML uses tags to structure content.Tags are enclosed in angle brackets
(< >).Most tags come in pairs,with an opening tag(e.g.,<h1>) and a closing tag (e.g.,</h1>). Here are some of the most commonly used HTML tags:

a. Headings (<h1>to<h6>): Headings define the importance and hierarchy of text. <h1> is the most important heading, and <h6> is the least important.

<h1>Main Heading</h1> <h2>Subheading</h2>

b. Paragraph (<p>): A paragraph tag is used to define blocks of text.

<p>This is a paragraph of text.</p>

c. Links (<a>): The anchor tag is used to create hyperlinks, allowing users to navigate to other pages or websites.

<a href="https://www.google.com/">Click here to visit Google.com</a>

d. Images (<img>): The image tag embeds images into the webpage.It requires a src attribute that specifies the image file location.

<img src="image.jpg" alt="Description of the image">

e. Bold text (<b>): b tag is used to represent bold text with respect to its surrounding text.

<b>This text is bold.</b>

f. Bold text (<strong>):The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

<strong>This text is important!</strong>

g. italic (<i> and <em>):The i tag is use to make the text italic,and em tag is also use to make the text italic but search engine understand it better.

<i>This text is italic</i>
<em>This text is emphasized</em>

h. <del> - Deleted Text:
The <del> tag represents text that has been deleted from a document. It is typically rendered with a strikethrough (line through the text) to visually indicate the removal of the text.

<p>This is <del>old</del> new text.</p>

i. <ins> - Inserted Text:
The <ins> tag is used to represent text that has been inserted into a document. This text is often displayed with an underline to indicate it is newly added.

<p>This is <ins>new</ins> text.</p>

j. <u> - Underlined Text:
The <u> tag is used to underline text. However, it is generally used for styling purposes and should be avoided for semantic meaning, as modern CSS can handle underlining more effectively.

<p>This is <u>underlined</u> text.</p>

k. <sup> - Superscript Text:
The <sup> tag is used to display text in superscript, making it appear slightly above the normal line of text. This is commonly used for mathematical exponents or footnotes.

<p>(a+b)<sup>2</sup>.</p>

l. <sub> - Subscript Text:
The <sub> tag is used to display text in subscript, making it appear slightly below the normal line of text. This is often used for chemical formulas or other scientific notations.

<p>The chemical formula for water is H<sub>2</sub>O.</p>

m. <mark>- Marked or Highlighted Text:
The <mark> tag is used to highlight text, typically for emphasis. This tag is often used when indicating a search result or highlighting important text. It is usually rendered with a yellow background.

<p>This is a <mark>highlighted</mark> text.</p>

n. <br> - Line Break:
The <br> tag is used to create a line break within a block of text. It does not require a closing tag. This tag is commonly used for poetry, addresses, or other content where line breaks are needed.

<p>This is the first line.<br>This is the second line.</p>

o. <hr> - Horizontal Rule:
The <hr> tag is used to create a horizontal line (or rule) across the page. It is often used to separate sections of content and is typically displayed as a thick, horizontal line.

<p>HTML is the standard markup language for creating Web pages.</p>

<hr>

CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media.</p>

p. <kbd> - Keyboard Input:
The <kbd> tag is used to represent user input that would typically come from a keyboard. The text within this tag is often displayed in a monospaced font, making it easy to distinguish keyboard inputs from other content.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

q.<pre> - Preformatted Text:
The <pre> tag is used to display preformatted text, preserving both whitespace and line breaks exactly as written in the HTML code. This is useful for displaying code snippets, poems, or text that requires precise formatting.

<pre> This is preformatted text. It preserves spaces and line breaks exactly. </pre>

r. <code> - Inline Code:
The <code> tag is used to display a piece of inline code, often within a paragraph or other text content. It typically uses a monospaced font to distinguish it from regular text.

<p>The <code>print()</code> function is used to display output in Python.</p>

s. HTML Comments:
You can add comments to your HTML code, which are ignored by browsers but useful for explaining the code to yourself or others. Comments are written between  tags:

These tags help structure content in meaningful ways, enhancing readability and providing context for the user. Understanding how and when to use them can improve your web pages' accessibility and user experience.