Chapter 2

Cascading Style Sheets (CSS)

2.1 Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document
written in HTML or XML. CSS enables the separation of document content from document presentation,
including layout, colors, and fonts. This separation can improve content accessibility, provide more
flexibility and control in the specification of presentation characteristics, and reduce complexity and
repetition in the structural content.

2.2 CSS Syntax

A CSS Syntax rule consists of a selector, property, and its value.
Syntax

selector { Property: value; }

Example 1
You can define a table border as follows:
table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid #C00 is the value of
that property.

Example 2
You can define a paragraph text color and font size as follows:
p{
color: blue;
font-size: 16px;
}

Selector:
CSS selectors identify specific HTML elements as targets for CSS styles. There are several types of
selectors such as elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns, each
serving a specific purpose and offering different levels of specificity.
Properties and Values: Properties are the aspects of an element you want to change (e.g., color,
font-size), and values are the settings you apply to those properties (e.g., blue, 16px).
Declaration Block: Contains one or more declarations separated by semicolons. Each declaration
includes a CSS property name and a value, separated by a colon, and surrounded by curly braces.

2.2.1 Types of CSS selectors

1. Universal Selector (*)

The universal selector selects all elements on the page.
Example:
*{
color: #000000;
}
This rule renders the content of every element in our document in black.
2. Type Selector (Element Selector)
The type selector selects all elements of a given type.
Example:
p{
color: blue;
}
This rule renders the text of all paragraphs in blue color.
3. Class Selector
You can define style rules based on the class attribute of the elements. The class selector selects
all elements with a specific class attribute. Classes can be reused on multiple elements.

CSS

.intro {
color: #000000;
}

HTML

<p class="intro">This is an introduction paragraph.</p>

<div class="intro">This is an introduction div.</div>

This rule renders the content in black for every element with class attribute set to intro in our
document. You can make it a bit more particular. For example −

[Link] {
color: #000000;
 }

This rule renders the content in black for only <h1> elements with class attribute set to intro.

You can apply more than one class selectors to given element. Consider the following example-

<p class = "center bold">

This para will be styled by the classes center and bold.
</p>

4. ID Selector
The ID selector selects an element based on its ID attribute. IDs should be unique within a page.

CSS
#main-header {
color: #000000;
}

HTML
<h1 id="main-header">Welcome to My Website</h1>

This rule renders the content in black for elements with id attribute set to main-header.

You can make it a bit more particular. For example −

h1# main-header {
color: #000000;
}

This rule renders the content in black for only <h1> elements with id attribute set to
main-header.

The true power of id selectors is when they are used as the foundation for descendant
selectors, For example −

# main-header h2 {
color: #000000;
}

In this example all level 2 headings will be displayed in black color when those headings will lie
within tags having id attribute set to main-header.

5. Attribute Selector
The attribute selector selects elements based on the value of a given attribute.
 CSS

input[type="text"] {
border: 1px solid black;
}

HTML

<input type="text" name="username">

<input type="password" name="password">

The advantage to this method is that the <input type = "submit" /> element is unaffected, and
the color applied only to the desired text fields.

There are following rules applied to attribute selector.

● p[lang] − Selects all paragraph elements with a lang attribute.

● p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly
"fr".
● p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word
"fr".
● p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values
that are exactly "en", or begin with "en-".
6. Descendant Selector
The descendant selector selects elements that are descendants of another element.
Css

div p {
color: green;
}

HTML

<div>
<p>This paragraph is inside a div and will be green.</p>
</div>
<p>This paragraph is not inside a div and will not be green.</p>

7. Child Selector (>)

The child selector selects elements that are direct children of a specified element.
css
ul > li {
list-style-type: square;
}

HTML

<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
8. Adjacent Sibling Selector (+)
The adjacent sibling selector selects an element that is immediately following another element.
css

h1 + p {
margin-top: 0;
}

HTML

<h1>Heading</h1>
<p>This paragraph immediately follows the heading and will have no top
margin.</p>
<p>This paragraph will have a default top margin.</p>
9. General Sibling Selector (~)
The general sibling selector selects all elements that are siblings of a specified element.
css

h1 ~ p {
color: red;
}

HTML

<h1>Heading</h1>
<p>This paragraph is a sibling of the heading and will be red.</p>
<p>This paragraph is also a sibling of the heading and will be red.</p>
10. Pseudo-Class Selector
Pseudo-classes select elements based on their state or position.
css

a:hover {
color: orange;
}

HTML
<a href="#">Hover over this link</a>
11. Pseudo-Element Selector
Pseudo-elements select and style parts of an element.
css

p::first-line {
font-weight: bold;
}

HTML

<p>This is a paragraph. The first line of this paragraph will be bold.</p>

12. Group Selector
The group selector selects multiple elements and applies the same styles to all of them.
css

h1, h2, h3 {
font-family: Arial, sans-serif;
}

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

2.3 Location of Styles, Selectors

1. Inline Styles
Inline styles are defined directly within an HTML element using the style attribute. This
method is useful for applying unique styles to a single element.
<p style="color: blue; font-size: 20px;">This is a paragraph with inline styles.</p>

2. Internal (Embedded) Styles

Internal styles are defined within a <style> element inside the <head> section of an HTML
document. This method is useful for applying styles to a single HTML document.
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
p{
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal styles.</p>
</body>
</html>

3. External Styles
External styles are defined in an external CSS file and linked to an HTML document using the
<link> element. This method is ideal for applying styles across multiple HTML documents,
ensuring consistency and easier maintenance.
<!-- HTML document -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body>
<p>This is a paragraph with external styles.</p>
</body>
</html>

2.4 Units of Measure

Four types of units can be specified in CSS: length units, percentage units, color units, and URLs.
There are two kinds of length units: absolute and relative. Absolute units theoretically
correspond to a unit of measure in the real world, such as an inch, a centimeter, or a point.
Relative units are based on some more arbitrary unit of measure.
2.5 The Box Model
The CSS box model is a fundamental concept in web design and layout. It describes how
elements on a webpage are structured and how they interact with each other in terms of
spacing and dimensions. Every HTML element can be considered as a rectangular box, and the
box model defines the structure of these boxes. Figure below shows a diagram of the box
model.
The components of the CSS Box Model
The innermost box contains the content of the element. Surrounding that is the padding, then
the border, and finally, the outermost layer (the margin). In addition to properties that you can
use to change how the content is displayed, CSS provides properties that can be used to change
the padding, border, and margins around each box.

1. Content
The actual content of the box, such as text, images, or other media. The size of the content box
can be controlled using properties like width and height.
2. Padding
Padding is the space between the content and the border. It is creates a transparent area around
the content inside the box. Padding is controlled with padding properties (e.g., padding-top,
padding-right, padding-bottom, padding-left).
3. Border
Border is a line that surrounds the padding (if any) and the content. CSS provides several
properties for adding borders around elements and changing how they are displayed. Using CSS,
you can apply a border to any box.

The border-style property specifies the type of border that will be displayed. Valid options for
the border-style are none, dotted, dashed, solid, double, groove, ridge, inset, outset, and inherit.
Most of the styles alter the border appearance, but none and inherit are special. Setting the
border-style to none disables borders, and inherit uses the border-style inherited from a
less-specific selector.
The border-width property specifies how wide the border around a box should be. Borders are
usually specified in pixels, but any CSS unit of measurement can be used. To create a 1-pixel,
dashed border around all the anchors on a page, you use the following CSS:

a { border-width: 1px; border-style: solid; }

The border-color property is used to set the color for a border. To set the border color for links
to red, you use the following style declaration:

a { border-color: red; }

You can also set border properties for an element using shorthand property. Instead of using the
three separate border properties, you can apply them all simultaneously as long as you put the
values in the right order, using the border property. It’s used as follows:

selector { border: style width color; }

So, to add a three-pixel dashed red border to the links on a page, you use the
following style decoration:

a { border: dashed 3px red; }

You can use different values for each side of a box when you’re using any of the box
properties. There are two ways to do so. The first is to add directions to the property names, as
follows:
a{
border-left-width: 3px;
border-left-style: dotted;
border-left-color: green;
}

The directions are top, bottom, left, and right. Alternatively, you can set the values for each side.
If you specify four values, they will be applied to the top, right, bottom, and left, in that order. If
you specify two values, they will be applied to the top and bottom and left and right. And if you
set three values, they will be set to the top, right, and left the same, and bottom. To set different
border widths for all four sides of a box, you use the following style:

[Link] { border-width: 1px 2px 3px 4px; }

That’s equivalent to the following:

[Link] {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 4px;
 }
4. Margin
Margin is the space outside the border, separating the element from other elements. Margins are
transparent and can be used to control the distance between boxes. Margin is controlled with
margin properties (e.g., margin-top, margin-right, margin-bottom, margin-left).

Example below illustrates how padding and margins work.

<html>
<head>
<title>Nested Elements</title>
<style type="text/css">
.outer { border: 2px solid black; }
.inner { border: 2px dotted black;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="outer">
Outer.
<div class="inner">
Friends, Romans, countrymen, lend me your ears;<br />
I come to bury Caesar, not to praise him.<br />
The evil that men do lives after them;<br />
The good is oft interred with their bones;<br />
So let it be with Caesar. The noble Brutus<br />
</div>
</div>
</body>
</html>

The outer <div> has a solid black border; the inner <div> has a dotted black border. The text in
the inner <div> will be jammed right up against the border, and the inner border and outer
border are flush against each other. That’s because both the padding and the margin of the
inner <div> are set to 0.

2.6 CSS Text Styling

Styling text with CSS involves using a variety of properties to control the appearance of text on a
webpage. These properties can affect the font, color, spacing, alignment, and other aspects of text
presentation. Common CSS text styling properties are given below.
1. The Text Decoration Property
The text-decoration property is used to add decoration to the text such as underlining, overlining,
line-through, etc
Example 1
<h1 style="text-decoration: underline;">An Underlined Heading</h1>

Using the style attribute, you can specify how the text of the heading appears.

Example 2
a{
text-decoration: none; /* Can use underline, overline, line-through, or none */
}
2. Font Properties
Font properties are used to modify the appearance of text. The different font properties are
given below.
a. Font Style
The font-style property specifies whether the text is normal, italic, or oblique.

Example 1
<p>Here's some <span style="font-style:italic">italic text</span>.</p>

Example 2
em {
font-style: italic;
}

b. Font Family
The font-family property is used specify the typeface for the text such as Arial, sans-serif,
Verdana etc.
Example
p{
font-family: Arial, sans-serif;
}

c. Font Size
The font-size propery sets the size of the text.
Example:
h1 {
font-size: 2em; /* Can use px, em, rem, %, etc. */
}

d. Font Weight
 The font-weight property controls the thickness of the text.
Example
strong {
font-weight: bold; /* Can use values like normal, bold, bolder, lighter, or numeric values
(100-900) */
}

e. Font Variant
The font-variant property controls the use of small-caps.
Example
small {
font-variant: small-caps;
}

3. Text Color
The color property sets the color of the text.
Example
p{

color: #333333; /* Can use named colors, HEX, RGB, RGBA, HSL, HSLA */

4. Text Alignment
The text-align property aligns the text within its container.
Example
h2 {
text-align: center; /* Can use left, right, center, justify */
}

5. Text Transform
The text-transform property controls the capitalization of the text.
Example
h3 {
text-transform: uppercase; /* Can use none, capitalize, uppercase, lowercase */
}

6. Line Height
The line-height property sets the height of each line of text.
Example
p {
line-height: 1.5; /* Can use unitless number, px, em, etc. */
}
7. Letter Spacing
The letter-spacing property controls the space between characters.
Example
h1 {
letter-spacing: 2px;
}

8. Word Spacing
The word-spacing property controls the space between words.
Example
p{
word-spacing: 4px;
}

2.7 CSS Layout

When web pages display pages, the content normally flows from left to right and top to bottom.
You’ve seen that elements can be floated to the right or left, but the basic top-to-bottom
paradigm still remains. CSS enables you to position elements anywhere you like on the page,
altering the default layout rules of HTML in any way that you choose.

2.7.1 Positioning Schemes

To control the position of an element on the page, you first have to choose a positioning
scheme. There are four positioning schemes: static, relative, absolute, and fixed. You specify
which scheme to use for an element using the position CSS property.

The static scheme is the default. Elements that are not floated flow down the page from left to
right and top to bottom. This is referred to as the normal flow. The relative scheme positions
the element relative to its position in the normal flow. The element’s original positioned is
preserved and affects the position of the subsequent elements. The absolute and fixed schemes
enable you to position elements in any location you like, and elements positioned using those
schemes are removed from the document layout entirely. If you specify a position for an
element other than static, you can set a position for the element. There are four positioning
properties: top, left, bottom, and right. The position setting is what establishes what the values
of these properties relate to.
Example:
.thing {
position: relative;
left: 50px;
top: 50px;
}
In this case, elements in the thing class will be shifted 50 pixels down and 50 pixels to the left
from the element’s position in the normal flow. If the position is changed to absolute or fixed,
the element would appear 50 pixels from the nearest positioned ancestor of the element, or if
no such ancestor exists, the browser window itself.

Generally, when you’re positioning elements, you specify a left or a right value and a top or a
bottom value. If you specify conflicting values, one of the values you specify will be ignored.

1. Static positioning
HTML elements are positioned static by default. Static positioned elements are not affected by
the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page.

Example

<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>
</body>
</html>

2. Relative Positioning
An element with position: relative; is positioned relative to its normal position. The key
characteristics are:

Offset from Normal Position: The element can be offset from its original position using top,
right, bottom, and left properties. However, the space originally occupied by the element is
still preserved in the document flow.
Remains in Document Flow: The element remains part of the normal document flow,
meaning it still affects the layout of other elements.
Stacking Context: It does not create a new stacking context (layer for z-index), except when
combined with z-index.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
position: relative;
top: 20px; /* Moves down 20px from its normal position */
left: 30px; /* Moves right 30px from its normal position */
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>
</body>
</html>

3. Fixed positioning
An element with position: fixed; is positioned relative to the viewport, which means it always stays
in the same place even if the page is scrolled. Here are its key characteristics:

1. Viewport-based Positioning:
o The element is positioned relative to the viewport, meaning it stays fixed in the
same position even when the user scrolls the page. It does not move with the rest
of the document content.
o It uses the top, right, bottom, and left properties to define its position relative
to the viewport.
2. Removed from Document Flow:
o Similar to absolute positioning, a fixed element is removed from the normal
document flow. This means it does not take up space and other elements are
positioned as if the fixed element does not exist.
3. No Positioned Ancestors:
o Unlike absolute positioning, which is relative to the nearest positioned ancestor,
fixed positioning is always relative to the viewport. The presence of positioned
ancestors does not affect its positioning context.
4. Stacking Context:
o A fixed element creates a new stacking context. This is particularly useful for
managing the z-index of elements and ensuring that certain elements (e.g.,
headers, footers, modals) stay on top of other content.
5. Use in User Interface Design:
o Commonly used for fixed headers, footers, navigation bars, and other UI elements
that should remain visible regardless of scrolling.
o Ideal for creating overlays and modal dialogs that need to stay in a consistent
position on the screen.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

4. Absolute Positioning
An element with position: absolute; is positioned relative to the nearest positioned ancestor
(i.e., an ancestor with position set to relative, absolute, fixed, or sticky). It is not positioned
relative to the viewport, like fixed.

However; if an absolute positioned element has no positioned ancestors, it uses the document
body, and moves along with page scrolling.

The key characteristics are:

Removed from Document Flow: The element is removed from the normal document flow,
meaning it does not affect the layout of other elements and vice versa.
Offsets from Containing Block: The element can be precisely positioned using top, right,
bottom, and left properties relative to its containing block.
Creates a Stacking Context: It can create a new stacking context when combined with
z-index.

Example

<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

[Link] {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;

<div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

2.7.2 The display property

The display property is the most important CSS property for controlling layout. Every element in CSS is
a rectangular box, and the box model describes the space around these elements. It consists of Content,
Padding, Border, Margin. The display property specifies the type of rendering box used for an element.
Key values include:
block: The element is rendered as a block-level box.
inline: The element is rendered as an inline-level box.
inline-block: Similar to inline, but the element can have a width and height.
none: The element is not displayed.
flex: The element becomes a flex container.
grid: The element becomes a grid container.

Every HTML element has a default display value, depending on what type of element it is. The
default display value for most elements is block or inline. The display property is used to change the
default display behavior of HTML elements.
Block-level Elements

A block-level element ALWAYS starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).

Examples of block-level elements:

● <div>
● <h1> - <h6>
● <p>
● <form>
● <header>
● <footer>
● <section>

Inline Elements
An inline element DOES NOT start on a new line and only takes up as much width as necessary.

Examples of inline elements:

● <span>
● <a>
● <img>

Main layouts in CSS

1. Float layout
The float layout in CSS is one of the older techniques used to create complex web layouts. Originally
intended to allow text to wrap around images, floats have been used creatively to create entire page
layouts before the advent of Flexbox and Grid.

2. Flexbox
Flexbox (Flexible Box Layout) is a layout model designed for one-dimensional layouts. It allows
items in a container to be automatically arranged within a flexible space.

Flexbox Components:
Flex Container: The parent div containing various divisions.
Flex Items: The items inside the container div.

Flexbox Axes
Flexbox operates on two axes:
 ▪ Main Axis: Runs from left to right by default.
▪ Cross Axis: Perpendicular to the main axis, runs from top to bottom.

The flex container properties are:

● flex-direction
● flex-wrap
● flex-flow
● justify-content
● align-items
● align-content

The flex-direction Property:

The flex-direction property defines in which direction the container wants to
stack the flex items.
▪ Left to Right: flex-direction: row;
▪ Right to Left: flex-direction: row-reverse;
▪ Top to Bottom: flex-direction: column;
▪ Bottom to Top: flex-direction: column-reverse;
The flex-wrap Property:
The flex-wrap property specifies whether the flex items should wrap or not.
▪ wrap value specifies that the flex items will wrap if necessary
▪ nowrap value specifies that the flex items will not wrap (this is default)
▪ wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order

The flex-flow Property:

The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap
properties.
Example
.flex-container {
display: flex;
flex-flow: row wrap;
}

Aligning and Justifying Content:

Flexbox provides several properties for aligning and justifying content within the container:
 ▪ justify-content: Aligns items along the main axis (e.g., flex-start, flex-end, center,
space-between, space-around).
▪ align-items: Aligns items along the cross axis (e.g., stretch, center, flex-start, flex-end).
▪ align-content: Aligns rows within a flex container when there is extra space on the cross
axis.

Creating a Flexbox:
To create a flexbox, set the display property of the container to flex.
Example
<!DOCTYPE html>
<html>

<head>
<title>Flexbox Tutorial</title>
<style>
.flex-container {
display: flex;
background-color: #32a852;
}

.flex-container div {
background-color: #c9d1cb;
margin: 10px;
padding: 10px;
}
</style>
</head>

<body>

<h4> Flexbox</h4>
<div class="flex-container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</body>
3. Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making
it easier to design web pages without having to use floats and positioning. CSS Grid is powerful
for creating complex form layouts with precise control over the placement of form controls.
Grid Elements
A grid layout consists of a parent element, with one or more child elements.
Display Property
An HTML element becomes a grid container when its display property is set to grid or
inline-grid.
All direct children of the grid container automatically become grid items.

Grid Columns, Grid Rows and Grid Gaps

The vertical lines of grid items are called columns. The horizontal lines of grid items are called
rows. The spaces between each column/row are called gaps. You can adjust the gap size by
using one of the following properties: column-gap, row-gap, gap

Grid Lines
The lines between columns are called column lines. The lines between rows are called row lines.

Refer to line numbers when placing a grid item in a grid container:

Example
Place a grid item at column line 1, and let it end on column line 3:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Example

<!DOCTYPE html>
<html>

<head>
<title>grid form</title>
<style>
.grid-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 600px;
margin: auto;
}

.form-group {
display: flex;
flex-direction: column;
}

label {
margin-bottom: 5px;
}

input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
grid-column: span 2;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
 }
</style>
</head>
<body
<form class="grid-form">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname">
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</html>

2.8 Responsive Web Design

Responsive web design (RWD) is a web design approach to make web pages render well on all
screen sizes and resolutions while ensuring good usability. Web pages can be viewed using
many different devices: desktops, tablets, and phones. Your web page should look good, and be
easy to use, regardless of the device.

Web pages should not leave out information to fit smaller devices, but rather adapt its content
to fit any device:
It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge,
or move the content to make it look good on any screen.

Media queries
Media queries allow us to run a series of tests (e.g. whether the user's screen is greater than a
certain width, or a certain resolution) and apply CSS selectively to style the page appropriately
for the user's needs.

For example, the following media query tests to see if the current web page is being displayed
as screen media (therefore not a printed document) and the viewport is at least 80rem wide.
The CSS for the .container selector will only be applied if these two things are true.

@media screen and (min-width: 80rem) {

.container {
margin: 1em 2em;
}
}

2.9 CSS Frameworks

CSS frameworks are pre-prepared libraries that serve to expedite the web development process
by offering a collection of standardised, reusable elements and styles. They provide a set of CSS
and frequently JavaScript code that may be used to quickly and effectively create visually
pleasing and consistent web interfaces. Here are the key aspects of CSS frameworks:

Key Features

1. Grid Systems:
Most CSS frameworks include a responsive grid system that aids in the creation of
layouts that adapt seamlessly to various screen sizes and devices. This is essential for
creating responsive and mobile-first websites.
2. Pre-styled Components:
These frameworks offer a variety of pre-styled UI components such as buttons, forms,
navigation bars, modals, alerts, and more. These components save time and ensure
consistency in design.
 3. Responsive Design:
Built-in responsiveness ensures that web pages look good on a variety of devices, from
desktops to tablets to mobile phones.
4. Customizable:
While they come with a default style, CSS frameworks are usually customizable.
Developers can modify variables and use mixings to tailor the look and feel to their
specific needs.
5. Cross-browser Compatibility:
Frameworks are designed to be compatible with various web browsers, helping to avoid
common issues related to browser discrepancies.
6. Utility Classes:
These classes provide a way to apply common styles (such as margins, padding, colors,
and typography) directly in the HTML markup without writing additional CSS.

Benefits

● Efficiency:
Using a CSS framework speeds up the development process by providing ready-made
styles and components, reducing the amount of custom CSS needed.

● Consistency:

Ensures a consistent look and feel across different parts of the application, as all
components follow the same design language.

● Best Practices:
Many frameworks are developed by experienced developers and incorporate best
practices for responsive design, accessibility, and browser compatibility.

● Community and Resources:

Popular CSS frameworks have large communities, extensive documentation, and
numerous third-party resources (themes, plugins, tutorials).

Popular CSS Frameworks

1. Bootstrap:
o One of the most widely used frameworks, developed by Twitter. It offers
extensive components, a responsive grid system, and comprehensive
documentation.
2. Foundation:
o Developed by Zurb, it is known for its flexible grid system and emphasis on
responsive design and accessibility.
3. Bulma:
o A modern CSS framework based on Flexbox. It is lightweight and focuses on
simplicity and ease of use.
4. Tailwind CSS:
 o A utility-first framework that allows developers to apply styles directly in the
HTML with utility classes, offering great flexibility and customization.
5. Materialize:
o Based on Google's Material Design guidelines, it provides a sleek and modern
design aesthetic with many pre-styled components.