Web Technology

Cascading Style Sheet

Dr. Navanath Saharia

Indian Institute of Information Technology Senapati, Manipur
nsaharia@iiitmanipur.ac.in

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 1 / 27
 Cascading Style Sheet Why Style Sheet?

Why Style Sheet?

b The aim of HTML is to let the content providers concentrate on the contents of the document and
leave the appearance to be handled by the browsers.

b Authors markup the document contents using markup tags (such as <p>, <h1>, <table>, <img>)
to indicate its semantic meaning

b Web browsers, being the HTML document processor decides on how to display the content

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 2 / 27
 Cascading Style Sheet Why Style Sheet?

Why Style Sheet?

b The aim of HTML is to let the content providers concentrate on the contents of the document and
leave the appearance to be handled by the browsers.

b Authors markup the document contents using markup tags (such as <p>, <h1>, <table>, <img>)
to indicate its semantic meaning

b Web browsers, being the HTML document processor decides on how to display the content

b HTML has gone out-of-control in the early years. Many markup tags and attributes were created for
marking the appearance and the display styles (e.g., font, center, align, color, bgcolor, link, alink,
vlink are concerned about the appearance in font, color and alignment) rather than the meaning of
the contents.

b These tags flooded the document and make creation and maintenance of the contents extremely
difficult. Furthermore, over the years, we have engaged graphic designers to work on the appearance
and leave the content providers to focus on the contents. Hence, there is a need to separate the
contents and presentation of the HTML document.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 2 / 27
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 3 / 27
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 3 / 27
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list or
presentation properties enclosed within {...}

{ text-align : center ; }

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list or
presentation properties enclosed within {...}

{ text-align : center ; }

property name

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list or
presentation properties enclosed within {...}

{ text-align : center ; }

property name value

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list or
presentation properties enclosed within {...}

{ text-align : center ; }

property name value

seperator

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list or
presentation properties enclosed within {...}

{ text-align : center ; }

property name value

seperator
Rule
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list or
presentation properties enclosed within {...}

p { text-align : center ; }

property name value

seperator
Rule
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
 Cascading Style Sheet Why Style Sheet?

What is it?

b A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements. A
style rule is used to control the appearance of HTML elements such as their font properties (for
example, type face, size and weight), color properties (e.g., background and foreground colors),
alignment, margin, border, padding, and positioning.

b Cascading means that multiple style rules can be applied to the same HTML element. The browser
follows a certain cascading order in finalizing a style to format the HTML element in a predictable
fashion.

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list or
presentation properties enclosed within {...}

Selector p { text-align : center ; }

property name value

seperator
Rule
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 3 / 27
 Cascading Style Sheet Why Style Sheet?

Working procedure

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list of
presentation properties enclosed within {...}.
p { text-align: center; }

b A property is identified by its name,

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 4 / 27
 Cascading Style Sheet Why Style Sheet?

Working procedure

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list of
presentation properties enclosed within {...}.
p { text-align: center; }

b A property is identified by its name, followed by its value, separated by colon :.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 4 / 27
 Cascading Style Sheet Why Style Sheet?

Working procedure

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list of
presentation properties enclosed within {...}.
p { text-align: center; }

b A property is identified by its name, followed by its value, separated by colon :. A name could have
multiple values, separated by comma.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 4 / 27
 Cascading Style Sheet Why Style Sheet?

Working procedure

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list of
presentation properties enclosed within {...}.
p { text-align: center; }

b A property is identified by its name, followed by its value, separated by colon :. A name could have
multiple values, separated by comma. The name:value pairs are separated by semicolon ; to define
multiple property.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 4 / 27
 Cascading Style Sheet Why Style Sheet?

Working procedure

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list of
presentation properties enclosed within {...}.
p { text-align: center; }

b A property is identified by its name, followed by its value, separated by colon :. A name could have
multiple values, separated by comma. The name:value pairs are separated by semicolon ; to define
multiple property.

p {text-align: right; font-family: Arial, sans-serif;}

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 4 / 27
 Cascading Style Sheet Why Style Sheet?

Working procedure

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list of
presentation properties enclosed within {...}.
p { text-align: center; }

b A property is identified by its name, followed by its value, separated by colon :. A name could have
multiple values, separated by comma. The name:value pairs are separated by semicolon ; to define
multiple property.

p {text-align: right; font-family: Arial, sans-serif;}

b A selector selects a set of HTML elements to apply the styles.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 4 / 27
 Cascading Style Sheet Why Style Sheet?

Working procedure

b A CSS style sheet contains style rules. A style rule begins with a selector, followed by the list of
presentation properties enclosed within {...}.
p { text-align: center; }

b A property is identified by its name, followed by its value, separated by colon :. A name could have
multiple values, separated by comma. The name:value pairs are separated by semicolon ; to define
multiple property.

p {text-align: right; font-family: Arial, sans-serif;}

b A selector selects a set of HTML elements to apply the styles.

b Selectors having the same rules can be grouped together and separated by comma ,.

b If more than one rules are applicable, the properties are accumulated. But, the last rule will take
effect, if there is conflict.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 4 / 27
 Cascading Style Sheet Type of CSS

Type of CSS

b Three primitive types: Inline, Internal and External

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 5 / 27
 Cascading Style Sheet Type of CSS

Type of CSS

b Three primitive types: Inline, Internal and External

b Inline CSS: The style rules are appended inside the opening HTML tag via style attribute. The rules
are applicable to that particular HTML element only.

<p style="color: #0000FF; text-transform: uppercase;">

b The scope of an inline style is limited to that particular element. May be avoided.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 5 / 27
 Cascading Style Sheet Type of CSS

Type of CSS

b Three primitive types: Inline, Internal and External

b Inline CSS: The style rules are appended inside the opening HTML tag via style attribute. The rules
are applicable to that particular HTML element only.

<p style="color: #0000FF; text-transform: uppercase;">

b The scope of an inline style is limited to that particular element. May be avoided.
b Internal CSS: The style rules are defined inside <style> by nesting inside the <head>.

<style>
p {color: #00FF00; text-transform: uppercase;}
</style>

b The scope of an internal style is the current HTML document. Useful if page-to-page uniformity is
not required
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 5 / 27
 Cascading Style Sheet Type of CSS

Type of CSS

b External CSS: The style rules are defined in a separate .css file which is linked to an HTML
document using the <link> tag in the <head> section.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 6 / 27
 Cascading Style Sheet Type of CSS

Type of CSS

b External CSS: The style rules are defined in a separate .css file which is linked to an HTML
document using the <link> tag in the <head> section.

/*----- btech.css ------*/

p { color: #00FF00; text-transform: uppercase;}

<!----- index.html ----->

<head>
<link rel="stylesheet" type="text/css" href="path/btech.css">
</head>

b Uniformity in presentation: Same set of styles can be applied to all HTML elements over the site.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 6 / 27
 Cascading Style Sheet Type of CSS

Linking to External Style Sheet

b Using <link> tag

<link rel="stylesheet" type="text/css" href="path/btech.css">

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 7 / 27
 Cascading Style Sheet Type of CSS

Linking to External Style Sheet

b Using <link> tag

<link rel="stylesheet" type="text/css" href="path/btech.css">

b Using CSS @import directive

<!----- in HTML file------>

<style> /* in CSS fie */
@import url("path/btech.css"); @import 'path/btech.css';
</style>

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 7 / 27
 Cascading Style Sheet The Box model

The Box model

b A fundamental concept that refers how HTML
elements are structured and laid out on a webpage
b Each HTML element is considered as a box, and the
box model describes how the content, padding,
border, and margin interact with each other.
b The perimeter of each of the four areas is called an
edge, so each box has four edges:
Image source: https://www.w3.org/TR/CSS22/box.html - Content edge or inner edge
- Padding edge
- Border edge
- Margin edge or outer edge
b Each edge may be broken down into a top, right,
bottom, and left edge.

Image source: https://developer.mozilla.org/en-US/

docs/Learn/CSS/Building_blocks/The_box_model . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 8 / 27
 Cascading Style Sheet The Box model

The Box model

b A fundamental concept that refers how HTML
elements are structured and laid out on a webpage
b Each HTML element is considered as a box, and the
box model describes how the content, padding,
border, and margin interact with each other.
b The perimeter of each of the four areas is called an
edge, so each box has four edges:
Image source: https://www.w3.org/TR/CSS22/box.html - Content edge or inner edge
- Padding edge
- Border edge
- Margin edge or outer edge
b Each edge may be broken down into a top, right,
bottom, and left edge.
b Margin vs padding: Margins create extra space
Image source: https://developer.mozilla.org/en-US/ around an element, unlike padding, which creates
docs/Learn/CSS/Building_blocks/The_box_model extra space within an element
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 8 / 27
 Cascading Style Sheet The Box model

Example : margin property

b Used to control the space around the content of an element for top, right, bottom, and left sides
selector | combinator {
selector | combinator { margin-top : value;
margin-right : value;
margin : value; margin-bottom: value;
} margin-left: value;
}
b Each value is either a length, or percentage, or auto.
b Negative values draw the element closer to its neighbors than it would be by default.
b As the value in margin is composite, the interpretation varies with varying number of values.
p {margin: 10px;} The value has to be applied to four sides

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 9 / 27
 Cascading Style Sheet The Box model

Example : margin property

b Used to control the space around the content of an element for top, right, bottom, and left sides
selector | combinator {
selector | combinator { margin-top : value;
margin-right : value;
margin : value; margin-bottom: value;
} margin-left: value;
}
b Each value is either a length, or percentage, or auto.
b Negative values draw the element closer to its neighbors than it would be by default.
b As the value in margin is composite, the interpretation varies with varying number of values.
p {margin: 10px;} The value has to be applied to four sides
p {margin: 10px 20px;} The first value is for top and bottom margins, and the
second value is for the left and right margins.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 9 / 27
 Cascading Style Sheet The Box model

Example : margin property

b Used to control the space around the content of an element for top, right, bottom, and left sides
selector | combinator {
selector | combinator { margin-top : value;
margin-right : value;
margin : value; margin-bottom: value;
} margin-left: value;
}
b Each value is either a length, or percentage, or auto.
b Negative values draw the element closer to its neighbors than it would be by default.
b As the value in margin is composite, the interpretation varies with varying number of values.
p {margin: 10px;} The value has to be applied to four sides
p {margin: 10px 20px;} The first value is for top and bottom margins, and the
second value is for the left and right margins.
p {margin: 10px 20px 30px;} The first value is for top, the second value is for the
left and right margins, and the third value is for bottom
margin.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 9 / 27
 Cascading Style Sheet The Box model

Example : margin property

b Used to control the space around the content of an element for top, right, bottom, and left sides
selector | combinator {
selector | combinator { margin-top : value;
margin-right : value;
margin : value; margin-bottom: value;
} margin-left: value;
}
b Each value is either a length, or percentage, or auto.
b Negative values draw the element closer to its neighbors than it would be by default.
b As the value in margin is composite, the interpretation varies with varying number of values.
p {margin: 10px;} The value has to be applied to four sides
p {margin: 10px 20px;} The first value is for top and bottom margins, and the
second value is for the left and right margins.
p {margin: 10px 20px 30px;} The first value is for top, the second value is for the
left and right margins, and the third value is for bottom
margin.
p {margin: 10px 20px 30px 40px;} The first value is for top, the second value is for the right,
the third value is for bottom, and the fourth value is for
the left margin. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 9 / 27
 Cascading Style Sheet Units

Absolute length units

b Represents physical measurement when the physical properties of the output medium are known,
such as for print layout

- px : One pixel. 1px = 1in / 96

- cm : One centimeter. 1cm = 96px / 2.54

- mm: One millimeter. 1mm = 1cm / 10

- in : One inch. 1in = 2.54cm = 96px

- pt : One point. 1pt = 1in / 72

- Q: One quarter of a millimeter. 1Q = 1cm / 40

- pc: One pica. 1pc = 12pt = 1in / 6

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 10 / 27
 Cascading Style Sheet Units

Relative length units

b Can be classified based on viewport, font and container sizes.

b Example of relative length units based on viewport (small, large, dynamic, and default)
- Viewport represents a polygonal area that is currently being viewed. In the context of web
browser, it is the part of the document that is currently visible.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 11 / 27
 Cascading Style Sheet Units

Relative length units

b Can be classified based on viewport, font and container sizes.

b Example of relative length units based on viewport (small, large, dynamic, and default)
- Viewport represents a polygonal area that is currently being viewed. In the context of web
browser, it is the part of the document that is currently visible.
- vh (svh, lvh, dvh): Represents a percentage of the height of the viewport’s initial containing
block. 1vh = 1% of the viewport height
For example, if the viewport height is 100px, then a value of 50vh on a device will be 50px.
- vw (svw, lvw, dvw): 1vw = 1% of the viewport width.
- vmax (svmax, lvmax, dvmax): Represents in percentage the largest of vw and vh.
- vmin (svmin, lvmin, dvmin): Represents in percentage the smallest of vw and vh.
- vb (svb, lvb, dvb): Represents the percentage of the size of the initial containing block, in
the direction of the root element’s block axis.
- vi (svb, lvb, dvb): Represents the percentage of the size of the initial containing block, in
the direction of the root element’s inline axis.
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 11 / 27
 Cascading Style Sheet Units

Relative length units

b Example of relative length units based on font size.

- cap, rcap : Represents the nominal height of capital letters of the element’s font.

- ch, rch : Specifies the advance measure of the glyph 0 in the element’s font.

- em, rem : Specifies the calculated font-size of the element. If used on the font-size property
itself, it represents the inherited font-size of the element.

- ex, rex : Specifies the x-height of the element’s font.

- lh, rlh: Equal to the computed value of the line-height property of the element on which it is
used. This unit enables length calculations based on the theoretical size of an ideal empty line.
However, the size of actual line boxes may differ based on their content.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 12 / 27
 Cascading Style Sheet Units

Relative length units

b Example of relative unit length based on container query length
- These units specify a length relative to the dimensions of a query container. Container query
enables to apply styles to an element based on the size of the element’s container.
- Container queries are an alternative to media queries, which apply styles to elements based on
viewport size or other device characteristics
/ cqw: Represents a percentage of the width of the query container. 1% of a query
container’s width
/ cqh: 1% of a query container’s height
/ cqi: 1% of a query container’s inline size
/ cqb: 1% of a query container’s block size
/ cqmin: The smaller value of either cqi or cqb
/ cqmax: The larger value of either cqi or cqb
.abc{
width: 100%; /*Relative to parent container*/
max-width: 800px; /*Absolute size limit */
padding: 1rem; /*Relative to font size of parent*/
font-size: 1cqi; /*1% of the inline-size of the nearest container*/
} . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 13 / 27
 Cascading Style Sheet Selector

Selector-I

b Used to select the HTML elements on a web page to which a set of CSS styles will be applied.
b Selectors can be used to target elements based on their tag name, class, id, attribute, or other
characteristics. Thus several types.
b Tag selector
- Selects HTML element/tag to apply the appearance property
- element1 {color: #0000FF;}
b Attribute selector
- Selects elements based on their attributes and attribute values
- Denoted by a [type=‘typeName’]
- [type=`text'] {color: #0000FF;}
b Class selector (.)
- Selects element/tag based on their class attribute
- Denoted by a . symbol before the class name
- .className1 {color: #0000FF;}
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 14 / 27
 Cascading Style Sheet Selector

Selector-II
b ID selector (#)
- Selects element/tag based on their ID attribute
- Denoted by a # symbol before the ID
- #idName1 {color: #0000FF;}
b Pseudo-class selectors (:)
- Selects target elements based on their dynamic state or user interactions
- Dynamic state refers to the state of an HTML element that is based on user interactions, such
as the element’s position on the page or the value of a form field. Example: hover, focus, active,
disabled,
- Separated by a : symbol
- element1 : hover {color: #0000FF;}
b Universal selector (*)
- Selects every single element on the page. It affects only the elements that have no definition of
their own.
- * {color: #0000FF;}
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 15 / 27
 Cascading Style Sheet Selector

Example: Selector

p {color: #0000FF;}
p.test {font-weight: bold;}
p#test {text-decoration: underline;}
p span {color: #FF0000;} /*Note the Conflict*/

<!-----HTML Code----->

<p class="test">Example line with class="test"</p>

<p id="test">Example line with id="test"</p>
<p>Example line has a <span>nested span</span></p>

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 16 / 27
 Cascading Style Sheet Selector

Example: Selector

p {color: #0000FF;}
p.test {font-weight: bold;}
p#test {text-decoration: underline;}
p span {color: #FF0000;} /*Note the Conflict*/

<!-----HTML Code----->

<p class="test">Example line with class="test"</p>

<p id="test">Example line with id="test"</p>
<p>Example line has a <span>nested span</span></p>

b Output

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 16 / 27
 Cascading Style Sheet Selector

Preventing Override

b !important is used to avoid overriding cascading rules with property value.

<style>
p {color: #0000FF !important;}
p {color: #00FF00; text-transform: uppercase;}
</style>

<!-----HTML Code----->
<p>Sample paragraph with blue colour and uppercase letter</p>

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 17 / 27
 Cascading Style Sheet Selector

Preventing Override

b !important is used to avoid overriding cascading rules with property value.

<style>
p {color: #0000FF !important;}
p {color: #00FF00; text-transform: uppercase;}
</style>

<!-----HTML Code----->
<p>Sample paragraph with blue colour and uppercase letter</p>

b Output

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 17 / 27
 Cascading Style Sheet Combinator

Combinator
b A symbol that is used to specify the relationship between two CSS selectors
b Four types: descendant, child, adjacent sibling, and general sibling
b Descendant combinator (space)
- Selects all elements that are descendants of the preceding element.
- element1 element2 {color: #0000FF;}

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 18 / 27
 Cascading Style Sheet Combinator

Combinator
b A symbol that is used to specify the relationship between two CSS selectors
b Four types: descendant, child, adjacent sibling, and general sibling
b Descendant combinator (space)
- Selects all elements that are descendants of the preceding element.
- element1 element2 {color: #0000FF;}
b Child combinator (>)
- Selects all elements that are immediate children of the preceding element
- element1 > element2 {color: #0000FF;}

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 18 / 27
 Cascading Style Sheet Combinator

Combinator
b A symbol that is used to specify the relationship between two CSS selectors
b Four types: descendant, child, adjacent sibling, and general sibling
b Descendant combinator (space)
- Selects all elements that are descendants of the preceding element.
- element1 element2 {color: #0000FF;}
b Child combinator (>)
- Selects all elements that are immediate children of the preceding element
- element1 > element2 {color: #0000FF;}
b Adjacent sibling combinator (+)
- Selects all elements that are immediately preceded by the preceding element and share the same
parent
- element1 + element2 {color: #0000FF;}

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 18 / 27
 Cascading Style Sheet Combinator

Combinator
b A symbol that is used to specify the relationship between two CSS selectors
b Four types: descendant, child, adjacent sibling, and general sibling
b Descendant combinator (space)
- Selects all elements that are descendants of the preceding element.
- element1 element2 {color: #0000FF;}
b Child combinator (>)
- Selects all elements that are immediate children of the preceding element
- element1 > element2 {color: #0000FF;}
b Adjacent sibling combinator (+)
- Selects all elements that are immediately preceded by the preceding element and share the same
parent
- element1 + element2 {color: #0000FF;}
b General sibling combinator (∼)
- Selects all elements that share the same parent and come after the preceding element.
- element1 ∼ element2 {color: #0000FF;}
- Added in CSS3 . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 18 / 27
 Cascading Style Sheet Combinator

Example: Combinator

p {color:magenta; }
p span {font-weight: bold; color: red;}
p + span {color: yellow;}
p > span {color: green;}
p ~ span {text-decoration: underline; color: blue;}

<p>Sample paragraph</p>
<span>Sample span after a paragraph</span>
<p>Example paragraph that has a <span>nested span</span>.</p>
<div><p>Example paragraph that is not a direct children of body tag</p></div>
Example line that has <span>nested span</span>

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 19 / 27
 Cascading Style Sheet Combinator

Example: Combinator

p {color:magenta; }
p span {font-weight: bold; color: red;}
p + span {color: yellow;}
p > span {color: green;}
p ~ span {text-decoration: underline; color: blue;}

<p>Sample paragraph</p>
<span>Sample span after a paragraph</span>
<p>Example paragraph that has a <span>nested span</span>.</p>
<div><p>Example paragraph that is not a direct children of body tag</p></div>
Example line that has <span>nested span</span>

b Output

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 19 / 27
 Cascading Style Sheet CSS Variable

CSS Variable
b CSS variables (aka custom properties) are used to store values that can be reused throughout a large
project.
b How to define a CSS variable?

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 20 / 27
 Cascading Style Sheet CSS Variable

CSS Variable
b CSS variables (aka custom properties) are used to store values that can be reused throughout a large
project.
b How to define a CSS variable?
- Using a double hyphen (--) prefix followed by variableName inside any selector.
<symbol-of-selector-type> <selector-name> {
--variable-name-without-space : value-with-unit;
}

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 20 / 27
 Cascading Style Sheet CSS Variable

CSS Variable
b CSS variables (aka custom properties) are used to store values that can be reused throughout a large
project.
b How to define a CSS variable?
- Using a double hyphen (--) prefix followed by variableName inside any selector.
<symbol-of-selector-type> <selector-name> {
--variable-name-without-space : value-with-unit;
}
- Example: .container {--containerPadding: 30px;}
- Considered as global, if defined inside a :root pseudo-class selector
:root {--bgColor: #f0f0f5; --primaryColor: #007fff; --defaultPadding: 10px;}

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 20 / 27
 Cascading Style Sheet CSS Variable

CSS Variable
b CSS variables (aka custom properties) are used to store values that can be reused throughout a large
project.
b How to define a CSS variable?
- Using a double hyphen (--) prefix followed by variableName inside any selector.
<symbol-of-selector-type> <selector-name> {
--variable-name-without-space : value-with-unit;
}
- Example: .container {--containerPadding: 30px;}
- Considered as global, if defined inside a :root pseudo-class selector
:root {--bgColor: #f0f0f5; --primaryColor: #007fff; --defaultPadding: 10px;}

b How to retrieve a CSS variable?

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 20 / 27
 Cascading Style Sheet CSS Variable

CSS Variable
b CSS variables (aka custom properties) are used to store values that can be reused throughout a large
project.
b How to define a CSS variable?
- Using a double hyphen (--) prefix followed by variableName inside any selector.
<symbol-of-selector-type> <selector-name> {
--variable-name-without-space : value-with-unit;
}
- Example: .container {--containerPadding: 30px;}
- Considered as global, if defined inside a :root pseudo-class selector
:root {--bgColor: #f0f0f5; --primaryColor: #007fff; --defaultPadding: 10px;}

b How to retrieve a CSS variable?

- Using var(--variableName) function
body {color: var(--primaryColor); background-color: var(--bgColor, #333);}
.container {padding: var(--containerPadding);}
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 20 / 27
 Cascading Style Sheet CSS Function

CSS Function
b CSS function (aka value functions) are built-in-statements provided by CSS to perform a variety of
tasks such as calculations, transformations, and manipulation. After performing the task it returns a
value that will be assigned to a property. It may take multiple arguments.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 21 / 27
 Cascading Style Sheet CSS Function

CSS Function
b CSS function (aka value functions) are built-in-statements provided by CSS to perform a variety of
tasks such as calculations, transformations, and manipulation. After performing the task it returns a
value that will be assigned to a property. It may take multiple arguments.
b Functions are defined/designed to enhance the power and flexibility of CSS, allowing for more
dynamic, responsive, and maintainable styles. img { filter: invert(var(--pc)); }

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 21 / 27
 Cascading Style Sheet CSS Function

CSS Function
b CSS function (aka value functions) are built-in-statements provided by CSS to perform a variety of
tasks such as calculations, transformations, and manipulation. After performing the task it returns a
value that will be assigned to a property. It may take multiple arguments.
b Functions are defined/designed to enhance the power and flexibility of CSS, allowing for more
dynamic, responsive, and maintainable styles. img { filter: invert(var(--pc)); }
b For example, the calc() function is used to perform calculations to determine CSS property values.
font-size: calc(1.5rem + 3vw); // mixing unit
color: lch(from blue l c calc(h + 80)); //nested function

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 21 / 27
 Cascading Style Sheet CSS Function

CSS Function
b CSS function (aka value functions) are built-in-statements provided by CSS to perform a variety of
tasks such as calculations, transformations, and manipulation. After performing the task it returns a
value that will be assigned to a property. It may take multiple arguments.
b Functions are defined/designed to enhance the power and flexibility of CSS, allowing for more
dynamic, responsive, and maintainable styles. img { filter: invert(var(--pc)); }
b For example, the calc() function is used to perform calculations to determine CSS property values.
font-size: calc(1.5rem + 3vw); // mixing unit
color: lch(from blue l c calc(h + 80)); //nested function

b Invalid statements in the context of calc()

- Space matters. font-size: calc(3vw-2px);
- The + and - operators require both numbers to have length unit. margin: calc(10px + 5);
- The * operator requires one of the numbers to be unitless. margin: calc(30px * 3px);
- The / operator requires the second number to be unitless. margin: calc(30px / 10px);
padding: calc(30px / 0);
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 21 / 27
 Cascading Style Sheet CSS Function

CSS Function
b Math functions: Performs basic arithmetic calculations
- calc(), min(), max(), clamp(), round(), mod(), rem(), abs()
- clamp(): Used to set a value within a specified range by combining a minimum value, a
preferred value, and a maximum value. Syntax: clamp(minimum, preferred, maximum)
- Example: font-size: clamp(1rem, 2.5vw, 2rem);

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 22 / 27
 Cascading Style Sheet CSS Function

CSS Function
b Math functions: Performs basic arithmetic calculations
- calc(), min(), max(), clamp(), round(), mod(), rem(), abs()
- clamp(): Used to set a value within a specified range by combining a minimum value, a
preferred value, and a maximum value. Syntax: clamp(minimum, preferred, maximum)
- Example: font-size: clamp(1rem, 2.5vw, 2rem);
b Transform functions: Specifies transformation and used as a value of transform property
- translate(), skew(), rotate(), scale()

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 22 / 27
 Cascading Style Sheet CSS Function

CSS Function
b Math functions: Performs basic arithmetic calculations
- calc(), min(), max(), clamp(), round(), mod(), rem(), abs()
- clamp(): Used to set a value within a specified range by combining a minimum value, a
preferred value, and a maximum value. Syntax: clamp(minimum, preferred, maximum)
- Example: font-size: clamp(1rem, 2.5vw, 2rem);
b Transform functions: Specifies transformation and used as a value of transform property
- translate(), skew(), rotate(), scale()
b Color functions: Specifies color representations
- color(), rgb(), hsl(), hwb(), lch()

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 22 / 27
 Cascading Style Sheet CSS Function

CSS Function
b Math functions: Performs basic arithmetic calculations
- calc(), min(), max(), clamp(), round(), mod(), rem(), abs()
- clamp(): Used to set a value within a specified range by combining a minimum value, a
preferred value, and a maximum value. Syntax: clamp(minimum, preferred, maximum)
- Example: font-size: clamp(1rem, 2.5vw, 2rem);
b Transform functions: Specifies transformation and used as a value of transform property
- translate(), skew(), rotate(), scale()
b Color functions: Specifies color representations
- color(), rgb(), hsl(), hwb(), lch()
b Reference functions: Used as a value of properties to reference a value defined elsewhere
- attr(), env(), url(), var()

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 22 / 27
 Cascading Style Sheet CSS Function

CSS Function
b Math functions: Performs basic arithmetic calculations
- calc(), min(), max(), clamp(), round(), mod(), rem(), abs()
- clamp(): Used to set a value within a specified range by combining a minimum value, a
preferred value, and a maximum value. Syntax: clamp(minimum, preferred, maximum)
- Example: font-size: clamp(1rem, 2.5vw, 2rem);
b Transform functions: Specifies transformation and used as a value of transform property
- translate(), skew(), rotate(), scale()
b Color functions: Specifies color representations
- color(), rgb(), hsl(), hwb(), lch()
b Reference functions: Used as a value of properties to reference a value defined elsewhere
- attr(), env(), url(), var()
b Filter functions: Specifies graphical effect that can change the appearance of an input image. Used as
a value of filter property
- blur(), brightness(), contrast(), grayscale(), invert(), opacity(),
. . . . . . . . .sepia()
. . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 22 / 27
 Cascading Style Sheet Fallback

Fallback behavior

b An alternative arrangement, in case a particular style is not supported by a browser or is not applied
for some reason.

b Unrecognized HTML elements are treated by the browser as anonymous inline elements.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 23 / 27
 Cascading Style Sheet Fallback

Fallback behavior

b An alternative arrangement, in case a particular style is not supported by a browser or is not applied
for some reason.

b Unrecognized HTML elements are treated by the browser as anonymous inline elements.

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

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 23 / 27
 Cascading Style Sheet Fallback

Fallback behavior

b An alternative arrangement, in case a particular style is not supported by a browser or is not applied
for some reason.

b Unrecognized HTML elements are treated by the browser as anonymous inline elements.

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

b Multimedia fallback: In case of <video>, <audio>, <picture>, <object>, and <canvas>, the
fallback content can add in between the opening and closing tags, and non-supporting browsers will
ignore the outer element and run the nested content.
<video id="video" controls preload="metadata" poster="img/abc.jpeg">
<source src="abc.ogv" type="video/ogg">
<p>The current browser does not support OGG; here is a link to
<a href="abc.ogv">view/download the video</a></p>
</video>
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 23 / 27
 Cascading Style Sheet Fallback

CSS fallback

b If a browser encounters a rule it does not understand, it just skips it completely without applying it
or throwing an error

p {
font-family: 'Abc Font', 'Times New Roman', serif;
}

p {
background: linear-gradient(to corner, purple, orange);
background: gray;
}

/*change 'corner' to 'right' and comment second property to check the working*/

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 24 / 27
 Cascading Style Sheet Web-safe font

Web-safe font
b Fonts that are commonly found on most operating systems and devices. These fonts are considered
safe because they are likely to be available to a large percentage of users, ensuring a consistent and
readable experience across different platforms.
b Example: Arial, Verdana, Tahoma (sans-serif), Times New Roman, Georgia, Garamond (serif),
Courier New (monospace), Brush Script MT (cursive)
b There are no 100% completely web safe fonts. Thus, the font fallback is a mechanism to ensure that
web pages are remain readable even if the user’s device does not have access to a specific fonts.
b font-family typically provide a list of font choices, and the browser will attempt to use the first font.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 25 / 27
 Cascading Style Sheet Web-safe font

Web-safe font
b Fonts that are commonly found on most operating systems and devices. These fonts are considered
safe because they are likely to be available to a large percentage of users, ensuring a consistent and
readable experience across different platforms.
b Example: Arial, Verdana, Tahoma (sans-serif), Times New Roman, Georgia, Garamond (serif),
Courier New (monospace), Brush Script MT (cursive)
b There are no 100% completely web safe fonts. Thus, the font fallback is a mechanism to ensure that
web pages are remain readable even if the user’s device does not have access to a specific fonts.
b font-family typically provide a list of font choices, and the browser will attempt to use the first font.
b General Syntax: font-family: 'F1', 'F2', 'F3', sans-serif;
b If F1 is not available on the user’s system or if there is an issue loading it, the browser will move on
to the next font in the list, that is F2, until it finds a suitable one or reaches a generic font family
(sans-serif) as a last resort.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 25 / 27
 Cascading Style Sheet Web-safe font

Web-safe font
b Fonts that are commonly found on most operating systems and devices. These fonts are considered
safe because they are likely to be available to a large percentage of users, ensuring a consistent and
readable experience across different platforms.
b Example: Arial, Verdana, Tahoma (sans-serif), Times New Roman, Georgia, Garamond (serif),
Courier New (monospace), Brush Script MT (cursive)
b There are no 100% completely web safe fonts. Thus, the font fallback is a mechanism to ensure that
web pages are remain readable even if the user’s device does not have access to a specific fonts.
b font-family typically provide a list of font choices, and the browser will attempt to use the first font.
b General Syntax: font-family: 'F1', 'F2', 'F3', sans-serif;
b If F1 is not available on the user’s system or if there is an issue loading it, the browser will move on
to the next font in the list, that is F2, until it finds a suitable one or reaches a generic font family
(sans-serif) as a last resort.
b Priority: Highest (leftmost) to lowest (rightmost)

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 25 / 27
 Cascading Style Sheet Web-safe font

Web-safe font
b Fonts that are commonly found on most operating systems and devices. These fonts are considered
safe because they are likely to be available to a large percentage of users, ensuring a consistent and
readable experience across different platforms.
b Example: Arial, Verdana, Tahoma (sans-serif), Times New Roman, Georgia, Garamond (serif),
Courier New (monospace), Brush Script MT (cursive)
b There are no 100% completely web safe fonts. Thus, the font fallback is a mechanism to ensure that
web pages are remain readable even if the user’s device does not have access to a specific fonts.
b font-family typically provide a list of font choices, and the browser will attempt to use the first font.
b General Syntax: font-family: 'F1', 'F2', 'F3', sans-serif;
b If F1 is not available on the user’s system or if there is an issue loading it, the browser will move on
to the next font in the list, that is F2, until it finds a suitable one or reaches a generic font family
(sans-serif) as a last resort.
b Priority: Highest (leftmost) to lowest (rightmost)
p {font-family: 'Times New Roman', serif;}
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 25 / 27
 Cascading Style Sheet CSS Frameworks

CSS framework
b A library allowing for easier, standards-compliant web design
b It offers multiple web components including: web-typography, responsive degin/grid, modular UI etc.
b Example: Bootstrap (https://getbootstrap.com), Foundation (https://get.foundation),
Tailwind (https://tailwindcss.com)

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 26 / 27
 Cascading Style Sheet CSS Frameworks

CSS framework
b A library allowing for easier, standards-compliant web design
b It offers multiple web components including: web-typography, responsive degin/grid, modular UI etc.
b Example: Bootstrap (https://getbootstrap.com), Foundation (https://get.foundation),
Tailwind (https://tailwindcss.com)
b Bootstrap 5 is a free & open source framework for faster, easier and mobile-first UI development.
- It includes HTML, CSS, and JavaScript components that provides ability to create flexible and
responsive web layouts with much less efforts to web developers.
- Developed by Mark Otto and Jacob Thornton while they were working at Twitter. It was
released on August 19, 2011.

. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 26 / 27
 Cascading Style Sheet CSS Frameworks

CSS framework
b A library allowing for easier, standards-compliant web design
b It offers multiple web components including: web-typography, responsive degin/grid, modular UI etc.
b Example: Bootstrap (https://getbootstrap.com), Foundation (https://get.foundation),
Tailwind (https://tailwindcss.com)
b Bootstrap 5 is a free & open source framework for faster, easier and mobile-first UI development.
- It includes HTML, CSS, and JavaScript components that provides ability to create flexible and
responsive web layouts with much less efforts to web developers.
- Developed by Mark Otto and Jacob Thornton while they were working at Twitter. It was
released on August 19, 2011.
- Bootstrap has removed the jQuery dependency from bootstrap release-version 5, opting instead
for plain JavaScript, which can improve performance and reduce the file size.
/ jQuery is a fast, small, and feature-rich JavaScript library designed to simplify the
client-side scripting of HTML. It was created by John Resig and released in January 2006.
- A flexible layout known as Grid system was introduced to help developers to create responsive
and consistent layouts for web pages. It is based on a 12-column layout and uses a series of
containers, rows, and columns to align content. . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 26 / 27
 Cascading Style Sheet CSS Pre-Processors

CSS Pre-Processors

b A scripting language that extends the capabilities of CSS to make it more powerful and easier to
work with
- By allowing developers to use variables, functions, and other programming constructs in their
CSS code. The resultant code can be compiled into standard CSS that can be interpreted by
web browsers. Example: SASS (https://sass-lang.com), LESS (https://lesscss.org),
STYLUS (https://stylus-lang.com)

$primary-color: blue;
$secondary-color: green; header {
.header { background-color: blue;
background-color: $primary-color; }
h1 { .header h1 {
color: $secondary-color; color: green;
} }
}
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
nsaharia@iiitmanipur.ac.in Web Technology 27 / 27