CSS Basics & CSS Advanced

Unit-2
Web Technology-(BCS502)
CSS Introduction

• CSS (Cascading Style Sheets) was created by Håkon Wium Lie in

1994 while working at CERN.

• CSS stands for Cascading Style Sheets, used to describe the

presentation and design of a web pages.

• Using CSS, you can control the color of the text, the style of fonts, the
spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used.

• CSS can control the layout of multiple web pages all at once.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 2

CSS Versions

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 3

CSS Versions
Since the inception of CSS, several versions have came into existence. Some of the notable versions include:

1. CSS1 (Cascading Style Sheets Level1) - The initial version of CSS, released in December 1996. CSS1
provided basic styling capabilities for HTML documents, including properties for text, colors, backgrounds,
margins, and borders.

2. CSS2 (Cascading Style Sheets Level2) - Released in May 1998, CSS2 introduced new features such as
positioning, z-index, media types, and more advanced selectors like attribute selectors and child selectors.

3. CSS2.1 - The version 2.1, published as a W3C Recommendation in June 2011, clarified and refined CSS2,
addressing inconsistencies and ambiguities in the specification. CSS2.1 focused on improving
interoperability among web browsers. Note: Each version of CSS builds upon
the previous ones, adding new
features and refining existing
4. CSS3 (Cascading Style Sheets Level 3) - CSS3 is a collection of modules that extend the capabilities of capabilities to meet the evolving
CSS. It introduces numerous new features and enhancements, including advanced selectors, multiple needs of web developers and
designers. CSS is referred as just CSS
column layouts, animations, transformations, gradients, shadows, and more.
now, without a version number.

5. CSS4 (Cascading Style Sheets Level 4) - CSS4 is an ongoing effort to extend CSS3 with new features and
enhancements.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 4

Webpage Layout without CSS

How it works:

1 Start a new presentation by going to File > New > Blank

Presentation.

2 On the very first slide, add a picture: Go to Insert > Pictures or

Insert > Online Pictures and choose the picture.

Hint: You need to be online when you add the picture.

3 When PowerPoint asks your permission to get design ideas,

select Let's Go.

4 Choose a design you like from the Design Ideas task pane.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 5

Webpage Layout with CSS

How it works:

1 Start a new presentation by going to File > New > Blank

Presentation.

2 On the very first slide, add a picture: Go to Insert > Pictures or

Insert > Online Pictures and choose the picture.

Hint: You need to be online when you add the picture.

3 When PowerPoint asks your permission to get design ideas,

select Let's Go.

4 Choose a design you like from the Design Ideas task pane.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 6

Why Use CSS?

•CSS Saves Time: You can write CSS once and then reuse same sheet in multiple HTML pages.
•Pages Load Faster: If you are using CSS, you do not need to write HTML tag or attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
•Easy Maintenance: To make a global change, simply change the style, and all elements in all
the web pages will be updated automatically.
•Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can get
a far better look to your HTML page.
•Multiple Device Compatibility: For the same HTML document, different versions of a website
can be presented for different screen widths
•Global Web Standards: Now most of the HTML attributes are being deprecated and it is being
recommended to use CSS.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 7

CSS Syntax
Syntax of CSS consist of selectors and declaration used to apply styles to HTML elements.

• The selector targets the HTML element/elements that you want to style.
• The declaration block contains one or more declarations enclosed in curly braces {}.
• Each declaration consists of a property and a value separated by a colon :. Declarations are separated by
semicolons ;.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 8

Types of CSS & Creating a CSS Style Sheet

1. Inline CSS:

 Inline CSS is applied directly to an HTML element

using the style attribute.
 It has the highest priority among the three
methods.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 9

Types of CSS & Creating a CSS Style Sheet

2. Internal CSS:

 Internal CSS is defined within

the <style> tag inside
the <head> section of an
HTML document.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 10

Types of CSS & Creating a CSS Style Sheet

3. External CSS:

 External CSS is written in a

separate .css file and linked to
the HTML document using the
<link> tag.

 External CSS is the most

common and recommended
way for maintainability and
reusability.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 11

Advantages of Using CSS

 Responsive design - CSS offers features like media queries that enable developers to create
responsive layouts that adapt to different screen sizes and devices, ensuring a consistent user
experience.
 Flexibility and Control - CSS provides precise control over the presentation of HTML
elements, allowing developers to customize layout, typography, colors, and other visual
properties.
 Consistency and Reusability - Developers can ensure consistency across the entire website,
by defining styles in a central CSS file. Styles can be reused across multiple pages, reducing
redundancy and making updates easier.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 12

Advantages of Using CSS

 Search Engine Optimization (SEO) - CSS can be used to structure content in a way that
improves search engine visibility.
 Ease of Maintenance - Centralized CSS files make it easier to maintain and update styles
across a website. Changes can be applied globally, ensuring uniformity and reducing the risk
of inconsistencies.
 Faster Page Loading - External CSS files can be cached by browsers, resulting in faster page
loading times for subsequent visits to a website. This caching mechanism reduces server load
and bandwidth consumption.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 13

Components of CSS

CSS works by associating rules with HTML elements. A CSS rule contains
two main parts:
 a selector which specifies the HTML element(s) to style.
 a declaration block which contains one or more declarations
separated by semicolons.
Each declaration includes a property name and a value, specifying the
aspect of the element's presentation to control.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 14

Components of CSS

<html> div {
<head> border: 5px inset gold;
<title>CSS Tutorial</title> background-color: black;
<style> width: 300px;
h1 { text-align: center;
color: #36CFFF; }
} </style>
</head>
p{ <body>
font-size: 1.5em; <div>
color: white; <h1>Hello World!</h1>
} <p>This is a sample CSS code.</p>
</div>
</body>
</html>

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 15

CSS Properties

CSS works by selecting HTML elements and applying properties to style them. Properties
define what aspect of the element you want to change.

Commonly Used Example properties:

 color (text color)

 background-color (background color)

 font-size (text size)

 margin (outer spacing)

 padding (inner spacing)

 border (element border style)

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 16

CSS Styling Examples

1. Background Styling

Control the background of elements:

body {
background-color: #f0f0f0; /* light gray background */
background-image: url('[Link]'); /* set background image */
background-repeat: no-repeat; /* place the background image once */
background-size: cover; /* image covers entire area */
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 17

CSS Styling Examples

2. Text Formatting

Style text appearance such as color, alignment, spacing:

h1 {
color: #333; /* text color */
text-align: center; /* center text */
text-transform: uppercase; /* make uppercase */
letter-spacing: 2px; /* space between letters */
line-height: 1.5; /* space between lines */
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 18

CSS Styling Examples

3. Controlling Fonts

Set font type, size, weight, and style:

p{
font-family: 'Arial', sans-serif; /* font family */
font-size: 16px; /* font size */
font-weight: bold; /* bold text */
font-style: italic; /* italic text */
font-variant: small-caps; /* small caps */
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 19

 CSS Properties

Concept Description Example CSS

Creating Style Sheet Inline, Internal, External CSS <link rel="stylesheet" href="[Link]">

CSS Properties Attributes like color, margin, padding color: red; margin: 10px;

Background Styling Set background color/image for elements background-color: #eee;

Text Formatting Color, alignment, spacing, case text-align: center; letter-spacing: 1px;

Controlling Fonts Font type, size, weight, style font-family: Arial; font-weight: bold;

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 20

CSS Selectors
CSS Selectors are used to select the HTML elements you want to style on a web page. They allow you to
target specific elements or groups of elements to apply styles like colors, fonts, margins, and more.

The element or elements that are selected by the selector are referred to as subject of the selector.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 21

CSS Pseudo-classes

A CSS pseudo-class is a keyword that can be added to a selector, to

define a style for a special state of an element.
Some common use for pseudo-classes:
 Style an element when a user moves the mouse over it
 Style visited and unvisited links differently
 Style an element when it gets focus
 Style valid/invalid/required/optional form elements
 Style an element that is the first child of its parent
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 22
CSS Pseudo-classes
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element.
Some common use for pseudo-classes:
 Style an element when a user moves the mouse over it
 Style visited and unvisited links differently
 Style an element when it gets focus
 Style valid/invalid/required/optional form elements
 Style an element that is the first child of its parent

Syntax
Pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class name:

selector:pseudo-class-name {
CSS properties
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 23
CSS Pseudo-classes

Pseudo-classes Used on Links:

For HTML links, it is common to use the following pseudo-
classes:

:link - Styles unvisited links

:visited - Styles visited links
:hover - Styles an link on mouse over
:active - Styles an activated link

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 24

CSS Pseudo-classes

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 25

CSS Pseudo-classes

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 26

CSS Pseudo-classes: Example >> :hover on <div>

<!DOCTYPE html> </head>

<html> <body>
<head>
<style> <h2>:hover on div</h2>
div {
background-color: green; <p>Mouse over the div element below to change its
color: white; background color:</p>
padding: 25px;
text-align: center; <div>Mouse Over Me</div>
}
</body>
div:hover { </html>
background-color: blue;
}
</style>
Note: a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective! a:active MUST come after a:hover in the CSS definition in
order toKaur
Faculty Name: Ms. Ramandeep be effective! Pseudo-class
| College: GCET names
| Department: CSEare not case-sensitive. 27
CSS Pseudo-classes: Example

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 28

CSS Pseudo-classes: Example >> :focus on <input>
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>

<h2>Using :focus</h2>

<p>Use :focus to style an input field when it gets focus:</p>

<form action="/action_page.php" method="get">

First name: <input type="text" name="fname"><br><br>
Last name: <input type="text" name="lname"><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 29
Working with Lists and Tables

CSS provides various properties to style HTML lists (<ul>, <ol>, <dl>).

List Styling Properties:

 list-style-type: Controls the appearance of the list item marker (e.g., disc, circle, square, decimal,

lower-alpha, upper-roman, none).

 list-style-image: Specifies an image to be used as the list item marker.

 list-style-position: Determines whether the marker is placed inside or outside the list item

content box.

 list-style: A shorthand property to set list-style-type, list-style-position, and list-style-image in a

single declaration.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 30
Working with Lists and Tables

Example:

ul {
list-style-type: square;
background-color: #f0f0f0;
padding: 15px;
}

li {
margin-bottom: 5px;
color: #333;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 31

Working with Lists and Tables

<style>
table { <table>
width: 100%; /* Full width */ <thead>
border-collapse: collapse; /* Removes double borders */
}
<tr><th>Header 1</th><th>Header 2</th></tr>
</thead>
th, td { <tbody>
border: 1px solid #ddd;
padding: 8px;
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
text-align: left; <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
} </tbody>
th {
</table>
background-color: #f4f4f4;
font-weight: bold;
}

tr:nth-child(even) { Output
background-color: #fafafa; /* Zebra striping */ Screen >>
}

tr:hover {
background-color: #f1f1f1; /* Highlight row on hover */
}
</style>

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 32

 Output
Working with Lists and Tables Screen >>

<style>
table { <table>
width: 100%; /* Full width */ <thead>
border-collapse: collapse; /* Removes double borders */
}
<tr><th>Header 1</th><th>Header 2</th></tr>
</thead>
th, td { <tbody>
border: 1px solid #ddd;
padding: 8px;
<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
text-align: left; <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
} </tbody>
th {
</table>
background-color: #f4f4f4;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #fafafa; /* Zebra striping */
}

tr:hover {
background-color: #f1f1f1; /* Highlight row on hover */
}
</style>

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 33

Working with Lists and Tables

Table Styling Properties:

• border-collapse: Controls whether table cell borders are rendered separately (separate)
or collapsed into a single border (collapse).
• border-spacing: Sets the distance between adjacent cell borders when border-collapse
is separate.
• width / height: Defines the dimensions of the table and its cells.
• text-align / vertical-align: Controls the alignment of content within table cells.
• padding: Adds space between the cell content and its border.
• background-color: Sets the background color for table elements (table, rows, cells).
• caption-side: Positions the table <caption> element (top or bottom).
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 34
Working with Lists and Tables
table {
Table Styling Properties: Example width: 100%;
border-collapse: collapse;
}

th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}

th {
background-color: #eee;
font-weight: bold;
}

tr:nth-child(even) {
background-color: #f9f9f9;
Faculty Name: Ms. Ramandeep Kaur} | College: GCET | Department: CSE 35
Working with Lists and Tables

Table Styling Properties: Example Output

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 36

Working with Lists and Tables

Table Styling Properties:

Element Common CSS Properties

List list-style-type, padding-left, margin

List Item (li) margin, font-size, color, ::before for custom bullets

Table border-collapse, border, padding, width

Table Row (tr) background-color, hover effect

Table Cell (th, td) border, padding, text-align

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 37
CSS Id and Class

Feature ID Selector (#) Class Selector (.)

Uniqueness Unique within the Can be used on multiple
document elements
Reusability Not reusable for other Highly reusable
elements
Specificity Highest Lower than ID, higher than
element
Primary Use Targeting a single, Grouping elements with
specific element common styles/behaviors
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 38
We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)

 Combinator selectors (select elements based on a specific
relationship between them)
 Pseudo-class selectors (select elements based on a certain
state)
 Pseudo-elements selectors (select and style a part of an
element)
 Attribute selectors (select elements based on an attribute or
attribute value)

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 39

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific

element.

The id of an element is unique within a page, so the id selector is used to

select one unique element!

To select an element with a specific id, write a hash (#) character, followed by
the id of the element.
<body> <style>
#para1 {
<p id="para1">Hello World!</p> text-align: center;
<p>This paragraph is not affected by the style.</p> color: red;
}
</body> </style>
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 40
The CSS id Selector Example:

Output screen >>

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 41

The CSS class Selector

The class selector selects HTML elements with a specific class

attribute.

To select elements with a specific class, write a period (.) character,

followed by the class name.

<body> .center {
text-align: center;
<h1 class="center">Red and center-aligned heading</h1> color: red;
<p class="center">Red and center-aligned }
paragraph.</p>

</body> Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 42
The CSS id Selector Example:

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 43

The CSS Box Model : Introduction

The Box Model is fundamental in web design and CSS because it

defines how elements on a webpage are structured and how their
size and spacing are calculated.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 44

The CSS Box Model : What is the Box Model?

In CSS, every HTML element is treated as a rectangular box.

The box model describes this box and consists of four parts:

Content — The actual content like text or images.

Padding — Space between the content and the border.
Border — The border surrounding the padding (if any).
Margin — Space outside the border, separating the element
from others.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 45

 The CSS Box Model : Why is the Box Model Needed?

 Consistent Layout Control:

 It helps developers understand how the total size of an element is calculated, including content,
padding, border, and margin. This ensures consistent layout and spacing on the webpage.

 Spacing and Alignment:

 It allows precise control over spacing inside (padding) and outside (margin) the element, helping
with alignment and arrangement of elements.

 Responsive Design:
 Knowing how the box model works helps make elements adjust properly when screen sizes
change (like on mobile devices).
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 46
 The CSS Box Model : Why is the Box Model Needed?

 Debugging Layout Issues:

 When elements don’t align or overlap, understanding the box model helps identify if padding,
border, or margin is causing the problem.

 Browser Rendering:
 Browsers use the box model to render elements. Without it, the size and spacing would be
unpredictable.

**The box model is needed to define, calculate, and control the size and spacing
of elements on a web page for a clean, predictable layout.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 47
The CSS Box Model : Types

1. Two Box Model Types:

content-box (default):
The width and height CSS properties apply only to the content area. Padding and border
add extra size outside the content.
So, total size = content + padding + border + margin.

box-sizing: content-box;
• The width and height apply only to the content.
• Padding and border add to the total size.

Example:

If width = 200px, padding = 10px, border = 5px:

Total width = 200 + 102 + 52 = 230px

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 48
The CSS Box Model : Types

1. Two Box Model Types:

border-box:
The width and height include content, padding, and border, making it easier to size
elements exactly. Margin is still added outside. This model is often preferred for layout
control because it simplifies calculations.

box-sizing: border-box;
• The width and height include content + padding + border.
• Easier to control element size because total width remains as defined.

Example:

If width = 200px, padding = 10px, border = 5px:

Content width shrinks to fit inside total 200px

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 49
The CSS Box Model : Types

Property What it Affects Applies to

Content area only
width Content width
(unless border-box)
Content area only
height Content height
(unless border-box)
padding Space inside element Inside border
Thickness and style of
border Surrounds padding .box {
border
width: 200px;
Separates from other height: 100px;
margin Space outside element
elements padding: 20px;
Defines how border: 5px solid black;
box- content-box or margin: 10px;
width/height are
sizing border-box box-sizing: border-box; /* Try changing
calculated
to content-box */
background-color: lightblue;
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 50
}
The CSS Box Model : Key Components

1. Content Area
• The content area is the central part of the CSS box
model, containing the main content (e.g., text,
images, videos, or elements like <p> or <span>).
• It can be styled with CSS properties like height and
width.
• The content edge refers to the four edges of the
content area
 Left content edge
 Right content edge
 Top content edge
 Bottom contentFaculty
edgeName: Ms. Ramandeep Kaur | College: GCET | Department: CSE 51
The CSS Box Model : Key Components

2. Padding Area

• The padding area is the space between the content and the
border of an element.
• It includes the areas highlighted in light green and skin color in
the example.
• The distance between the content edge and the border is the
padding.
• The border marks the end of the padding area.
• The padding area contributes to the element's total dimensions.
• Padding can be adjusted using CSS properties.
• It works similarly with box-sizing: content-box and box-sizing:
border-box, but with slight calculation differences.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 52

The CSS Box Model : Key Components

3. Border Area
• The area that marks the end of an element is called as
the border it is the outer fencing for the element.
• The default border properties are provided in CSS to
control the thickness of this outer fencing.
• The border area also add 's up to the complete height
and width of the element.
• The more the border width the more will be the height or
width of the element.
• In the above image the area marked with skin color is
called the border area.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 53

The CSS Box Model : Key Components

4. Margin Area
• The area outside the border of an element is called
the margin area.
• Basically this area depends on the parent of the
element.
• The distance between the border of the parent
element and the border of the child element is
called as the margin.
• CSS has provides certain margin properties to get
control over this scenario.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 54
Box Sizing Property in CSS
There are two type's of box-sizing properties in CSS :

1. Content-Box(default property)
When the user set's the value of the box-sizing
property for an element as content-box or even if
user do not set's it ,it remains by default as content-
box and in the actual height and width of the
element the dimensions of the content area as well
This code will create a box model
as the padding area is added to constitute the final with a border line width of 0.4px
always and border-area of 1.6px
dimensions of the element.
and padding area as 20px width on
both sides of the content area.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 55
Box Sizing Property in CSS
There are two type's of box-sizing properties in CSS :

This code will create a box model

with a border line width of 0.4px
always and border-area of 1.6px
and padding area as 20px width on
both sides of the content area.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 56
Box Sizing Property in CSS

Content Area (Width) :The width of the content area is

fixed at 200px.

Padding
• Padding adds extra space inside the element, around
the content.
• Padding Left: 20px
• Padding Right: 20px
• Total padding width: 20px + 20px = 40px
Border
• The border, being solid, has a width, but it is calculated
differently from the padding.
• Line Width of Border: 0.4px (the width of the line itself)
• Area of Border: 1.6px (the actual space the border
occupies visually)
• Border width for both sides: 1.6px (left) + 1.6px (right) =
3.2px
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 57
Box Sizing Property in CSS

Total Width

• Total width of the element can be calculated by

adding the padding and border areas to the content
area width.
• Formula for Total Width = (Padding-Left + Padding-
Right + Border-Area-Left + Border-Area-Right) +
Content Area Width
• Total Width = (20px + 20px + 1.6px + 1.6px) + 200px
= 243.2px
• The total width of the element becomes 243.2px.

The reason the total width is increased unexpectedly is because box-sizing: content-box applies
the width to the content area only .The padding and border are added outside the content area,
leading to an increase in the overall width and height of the element.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 58

Box Sizing Property in CSS
There are two type's of box-sizing properties in CSS :

2. Border-Box

When the box-sizing property is set

as border-box the actual dimensions of the
element's remains same as that of the
actual dimensions set by the user. The
difference it makes is just that the size of
the content area get's altered in a manner This code will create a box model by
so that it could accommodate the padding altering the dimensions specifically the
width of the content area to
area and the border area so the resultant accomodate the padding and the
could be equal to the actual dimensions border area with the border line-width.
entered by the user. Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 59
Box Sizing Property in CSS
2. Border-Box

This code will create a box model by

altering the dimensions specifically the
width of the content area to
accomodate the padding and the
border area with the border line-width.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 60

Box Sizing Property in CSS
2. Border-Box

• Width of Border and Padding Border

width : 0.4px (line width) and 1.6px + 1.6px =
3.2px (total border area).
• Padding width : 20px + 20px = 40px.
• User-Entered Width : The width entered by
the user is 200px, which applies to the
content area only when box-sizing: content-
box is used.
• Box-Sizing Behavior :The box-sizing:
content-box property adds the padding and
border outside the content area, causing the
total width to increase.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 61
Box Sizing Property in CSS
2. Border-Box

• Adjusting Content Area Width : To ensure

the total width remains 200px, the extra width
from padding and borders (40px + 3.2px =
43.2px) is subtracted from the total width.
• New content area width : 200px - 43.2px =
156.8px.
• Final Width Calculation : The final total
width is: 156.8px (content area) + 40px
(padding) + 3.2px (border) = 200px, ensuring
the user’s entered width remains unchanged.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 62

The CSS Box Model :
Content - The content of the box, where text and
images appear
Padding - Clears an area around the content.
The padding is transparent
Border - A border that goes around the padding
and content
Margin - Clears an area outside the border. The
margin is transparent

The box model allows us to add a border around

elements, and to define space between
elements.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 63

The CSS Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element.</p>
<p>It consists of (from innermost part to outermost part): content, padding, border, and margin.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>

</body> Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 64
</html>
The CSS Box Model
Explanation of the different parts (from
innermost part to outermost part):

Content - The content of the box, where text and

images appear
Padding - Clears an area around the content.
The padding is transparent
Border - A border that goes around the padding
and content
Margin - Clears an area outside the border. The
margin is transparent

The box model allows us to add a border around

elements, and to Faculty
define space between
Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 65
elements.
The CSS Box Model
Width and Height of an Element

>>> In order to set the width and height of an element correctly in all browsers, you need to
know how the box model works.
**This <div> element will have a total width of 350px and a total height of 80px:

>>> When you set the width and height properties of an element with CSS, you just set the
width and height of the content area. To calculate the total width and height of an element,
you must also include the padding and borders.

320px (width of content area)

div { Here is the calculation >> + 20px (left padding + right padding)
width: 320px; + 10px (left border + right border)
height: 50px; = 350px (total width)
padding: 10px;
border: 5px solid gray; 50px (height of content area)
margin: 0; + 20px (top padding + bottom padding)
} + 10px (top border + bottom border)
= 80px
Faculty Name: Ms. Ramandeep Kaur | College: GCET (totalCSE
| Department: height) 66
 The CSS Box Model
Width and Height of an Element Here is the calculation >>
div {
width: 320px;
320px (width of content area)
height: 50px; + 20px (left padding + right padding)
padding: 10px; + 10px (left border + right border)
border: 5px solid gray; = 350px (total width)
margin: 0;
}
50px (height of content area)
 The total width of an element should be calculated like + 20px (top padding + bottom padding)
this: + 10px (top border + bottom border)
= 80px (total height)
Total element width = width + left padding + right padding
+ left border + right border
 The total height of an element should be calculated like
this:
Total element height = height + top padding + bottom
padding + top border + bottom Faculty
border Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 67
The CSS Box Model

What is CSS Box Model :

Every element in a web page is a rectangular box, and the CSS box model describes how the size of
that box is calculated. It consists of four areas (from inside out):

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 68

The CSS Box Model

Content
• The actual content of the element, like text, images, etc.
• Size controlled by width and height properties.

Padding
• Space inside the element, between the content and the border.
• Controlled by padding properties (e.g., padding-top, padding-right).

Border
• The border that wraps around the padding and content.
• Controlled by border-width, border-style, border-color.

Margin
• The space outside the border, separating the element from other elements.
• Controlled by margin properties.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 69
 The CSS Box Model

By default, the total size of a box is:

Total width =

width + left padding + right padding + left border + right

border + left margin + right margin

Total height =

height + top padding + bottom padding + top border +

bottom border + top margin + bottom margin

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 70

The CSS Box Model

Important Property: box-sizing

content-box (default):
>>>>The width and height apply to the
content only (padding and border added
outside).

border-box: .box {
width: 200px;
>>>>The width and height include padding: 10px;
content + padding + border, so the total border: 5px solid black;
margin: 20px;
size is fixed. box-sizing: border-box; /* width includes padding and
border */
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 71
The CSS Box Model

Content Properties >>>

Description: The actual content of the element (text, image, etc.).

CSS properties: width, height

Example:

div {
width: 200px;
height: 100px;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 72

The CSS Box Model

Content Properties >>>

Property Description

width Sets the content width

height Sets the content height

min-width Sets the minimum width

max-width Sets the maximum width

min-height Sets the minimum height

max-height Sets the maximum height

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 73

The CSS Box Model

Padding Properties >>>

Description: Space between the content and the border. It adds space inside
the element.

CSS properties: padding, padding-top, padding-right, padding-bottom,

padding-left

Example:

div {
padding: 20px;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 74
The CSS Box Model

Padding Properties >>>

Property Description

padding Shorthand for all padding sides

padding-top Padding on the top

padding-right Padding on the right

padding-bottom Padding on the bottom

padding-left Padding on the left

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 75

The CSS Box Model

Padding Properties

Style Description
none No border is drawn. The element has no visible border at all.
solid A single solid line. The most common and simple border style.
dashed A series of short dashes, like a broken line.
dotted A series of dots, spaced evenly around the border.
double Two solid lines drawn parallel to each other with some space between.
groove Looks like a carved or engraved groove; it gives a 3D effect by using
light and shadow.
ridge Opposite of groove; looks like a raised ridge, also a 3D effect with
highlights and shadows.
inset Makes the element appear embedded or sunken into the page (3D inset
effect).
outset Makes the element appear raised or coming out of the page (3D outset
effect). Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 76
The CSS Box Model

Border Properties >>>

Description: A border that wraps the padding and content.

CSS properties: border, border-width, border-style, border-color

Example:

div {
border: 2px solid black;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 77

The CSS Box Model

Border Properties >>>

Property Description
border Shorthand for width, style, color
border-width Width of the border
border-style Style of the border (solid, dotted, etc)
border-color Color of the border
border-top Shorthand for top border
border-right Shorthand for right border
border-bottom Shorthand for bottom border
border-left Shorthand for left border
border-radius Rounds the corners
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 78
The CSS Box Model

Margin Properties >>>

Description: Space outside the border. It separates the element from other
elements.

CSS properties: margin, margin-top, margin-right, margin-bottom, margin-

left

Example:

div {
margin: 15px;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 79
The CSS Box Model

Margin Properties >>>

Property Description
margin Shorthand for all sides
margin-top Margin on the top
margin-right Margin on the right
margin-bottom Margin on the bottom
margin-left Margin on the left

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 80

UNIT – 2 (Part – II)
CSS Advanced (Grouping, Dimension, Display, Positioning,
Floating, Align, Pseudo class, Navigation Bar, Image Sprites,
Attribute sector), CSS Color, Creating page Layout and Site
Designs.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 81

CSS Advanced : Grouping Selectors

1. Grouping in CSS

Selector Grouping: Apply same styles to multiple selectors.

h1, h2, p {
color: blue;
}

Reduces redundancy and makes code cleaner.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 82

CSS Advanced : Grouping Selectors

2. Dimensions in CSS

Width & Height: Define the size of an element.

Units: px, %, em, rem, vw, vh

div {
width: 100px;
height: 200px;
}

min-width / max-width, min-height / max-height

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 83
CSS Advanced : Display Property

Controls the rendering box of an element:

block: Takes full width

inline: Takes only as much width as needed

inline-block: Like inline, but can set width/height

none: Hides the element

flex, grid: For modern layouts

div {
display: flex;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 84
Activity Session

create a styled profile card layout using

HTML and CSS applying these concepts:

• External Stylesheet creation

• CSS properties
• Background, text, font styling
• Block elements
• Lists & tables
• ID & class selectors
• Box model (padding, margin, border)

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 85

Activity Session

What to add in your profile card: Here are the minimum requirement.
Section Description Example
A heading with the
Name Student Name
person's name
A sentence or two Engineering student who loves
Short Bio
about the person coding and web development.
A list of 3 technical or HTML, CSS, XML, Javascript,
Skills List
soft skills [Link]
A small table with email Email: student@[Link],
Contact Info (Table)
and phone Phone: +91-1234567890

**Add your photograph in your profile card

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 86
CSS Advanced

4. Positioning

Types: static, relative, absolute, fixed, sticky.

Example:

.box {
position: absolute;
top: 50px;
left: 100px;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 87

CSS Advanced

5. Floating

Property: float: left | right | none | inherit;

Clearfix method to handle float issues.

Example:

img {
float: right;
margin: 10px;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 88

CSS Advanced

6. Align

Text alignment: text-align: left|right|center|justify;

Block alignment: margin: auto;

Flexbox alignment: justify-content, align-items.

Example:

.container {
display: flex;
justify-content: center;
align-items: center;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 89

CSS Advanced

7. Pseudo-classes

Examples: :hover, :focus, :nth-child(), :first-child, :last-child.

Example:

a:hover {
color: red;
text-decoration: underline;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 90

CSS Advanced
8. Navigation Bar

Teach horizontal & vertical menus using ul, li, and display.

Example (Horizontal Nav):

ul li a {
ul {
display: block;
list-style: none;
padding: 10px 20px;
margin: 0;
color: white;
padding: 0;
text-decoration: none;
background: #333;
}
overflow: hidden;
}
ul li a:hover {
background: #111;
ul li {
}
float: left;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 91
CSS Advanced

9. Image Sprites

Concept: Use a single image for multiple icons to reduce

HTTP requests.

Example:

.icon {
background: url("[Link]") no-repeat;
width: 50px;
height: 50px;
}

.icon-home { background-position: 0 0; }
.icon-user { background-position: -50px 0; }
.icon-mail { background-position: -100px 0; }
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 92
CSS Advanced
10. Attribute Selectors

Types:

[attr] → elements with attribute

[attr=value] → exact match
[attr^=value] → starts with
[attr$=value] → ends with
[attr*=value] → contains substring

Example:

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

a[href^="https"] {
color: green;
} Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 93
CSS Advanced

11. CSS Colors

Formats: name, hex (#ff0000), RGB (rgb(255,0,0)), RGBA,

HSL, HSLA.

Example:

div {
background-color: rgba(255, 0, 0, 0.5);
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 94

CSS Advanced

12. Creating Page Layout and Site Designs

Layouts:

Header, Navigation, Content, Sidebar, Footer.

Use flexbox or grid.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 95

CSS Advanced

1. Grouping

Concept: Apply same style to multiple selectors using commas.

Example:

h1, h2, p {
color: darkblue;
font-family: Arial, sans-serif;
}

Difference from combining selectors (h1 p {}).

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 96

CSS Advanced : Activity Session
Q : How can you simplify while still keeping logic correct?
h1 {
p{
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 1.5;
color: darkblue;
margin: 10px;
margin: 20px;
}
}
li {
h2 {
font-family: Arial, sans-serif;
font-family: Arial, sans-serif;
line-height: 1.5;
font-weight: bold;
margin: 5px;
color: darkblue;
}
margin: 15px;
}

h3 {
font-family: Arial, sans-serif;
font-weight: bold;
color: darkblue;
margin: 10px;
} Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 97
CSS Advanced : Activity Session - Solution
Q : How can you simplify while still keeping logic correct?

/* Common font family */ /* Individual margins */

h1, h2, h3, p, li { h1 { margin: 20px; }
font-family: Arial, sans-serif; h2 { margin: 15px; }
} h3 { margin: 10px; }

/* Common heading style */ /* Paragraphs and lists share line height */

h1, h2, h3 { p, li {
font-weight: bold; line-height: 1.5;
color: darkblue; }
}
p { margin: 10px; }
li { margin: 5px; }

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 98

Activity Session :
HTML Code: CSS Code:

<div class="classroom"> /* Descendant combinator: select all <p> inside .classroom */

<h2>Classroom</h2> .classroom p {
<p>Welcome students!</p> color: blue;
<div class="student-list"> }
<p class="student">Alice</p> /* Child combinator: select <p> elements directly inside .classroom */
<p class="student">Bob</p> .classroom > p {
<p class="student">Charlie</p> font-weight: bold;
<span>Note: Attendance is }
important.</span> /* Adjacent sibling combinator: select <p> immediately after <h2> */
</div> h2 + p {
<p>End of list</p> font-style: italic;
</div> }
/* General sibling combinator: select all <p> siblings after .student-list */
.student-list ~ p {
text-decoration: underline;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 99
Activity Session :
HTML Code: /* Descendant combinator: select all <p> inside .classroom */
.classroom p {
<div class="classroom"> color: blue;
}
<h2>Classroom</h2>
/* Child combinator: select <p> elements directly inside .classroom */
<p>Welcome students!</p> .classroom > p {
<div class="student-list"> font-weight: bold;
<p class="student">Alice</p> }
<p class="student">Bob</p> /* Adjacent sibling combinator: select <p> immediately after <h2> */
<p class="student">Charlie</p> h2 + p {
font-style: italic;
<span>Note: Attendance is
}
important.</span> /* General sibling combinator: select all <p> siblings after .student-list */
</div> .student-list ~ p {
<p>End of list</p> text-decoration: underline;
</div> }

1. Make all <p> inside .student-list green.

2. Make only the <p> that comes directly after the <h2> italic.
3. Select all <p> elements that are siblings after .student-list and make them red.
4. Add a new <p> somewhere else in the HTML and ask which selectors will style it.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 100
Activity Session :

1. Make all <p> inside .student-list green.

2. Make only the <p> that comes directly after the <h2> italic.
3. Select all <p> elements that are siblings after .student-list and make them red.
4. Add a new <p> somewhere else in the HTML and ask which selectors will style it.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 101
Activity Session :

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 102
CSS Advanced

2. Dimension

Properties: width, height, max-width, min-width, max-height, min-height.

Example:

div {
width: 300px;
height: 200px;
max-width: 100%;
min-height: 150px;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 103
CSS Advanced : Activity Session
Answer the Questions >>
div {
width: 400px;
1. What is the width and height of <div>? height: 200px;
background-color: lightblue;
2. If the text in <p> is very short, what will its height be? }

3. If the text is very long, will <p> grow endlessly? p{

width: 300px;
min-height: 100px;
4. What happens if the image file is 500px wide? max-height: 150px;
background-color: lightgreen;
}

img {
width: 100%;
max-width: 200px;
height: auto;
border: 2px solid black;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 104
CSS Advanced : Activity Session - Solution
Answer the Questions >>
div {
width: 400px;
1. What is the width and height of <div>? height: 200px;
background-color: lightblue;
(Answer: 400×200px) }

2. If the text in <p> is very short, what will its height be? p{
width: 300px;
min-height: 100px;
(Answer: 100px, because of min-height). max-height: 150px;
background-color: lightgreen;
3. If the text is very long, will <p> grow endlessly? }

(Answer: No, it stops at 150px, due to max-height). img {

width: 100%;
4. What happens if the image file is 500px wide? max-width: 200px;
height: auto;
border: 2px solid black;
(Answer:It shrinks to 200px, due to max-width). }
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 105
CSS Advanced : List of Dimensions Property

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 106
CSS Advanced : Grouping Selectors

Unit Type Relative To Example Use

px Absolute Fixed pixels Borders, fonts

% Relative Parent element Width, margin

em Relative Parent font size Padding, font size

rem Relative Root (<html>) font size Typography, spacing

vw Relative Viewport width Responsive width

vh Relative Viewport height Full-screen layouts

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 107
CSS Advanced

3. Display

Values: block, inline, inline-block, none, flex, grid.

Example:

span {
display: block;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 108
CSS Advanced: Display Property

CSS Display Property defines how an element is displayed in the document flow. Common
values:

• block – Element takes full width, starts on a new line (e.g., <div>, <p>).

• inline – Element only takes up as much width as needed, flows inline (e.g., <span>, <a>).

• inline-block – Behaves like inline but allows setting width and height.

• none – Element is hidden (not rendered).

• flex – Enables flexbox layout.

• grid – Enables grid layout.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 109
CSS Advanced: Activity Session
<!DOCTYPE html> .block { display: block; width: 150px; }
<html lang="en"> .inline { display: inline; width: 150px; }
<head> .inline-block { display: inline-block; width: 150px; }
<style> .none { display: none; }
.box { </style>
border: 2px solid black; </head>
margin: 5px; <body>
padding: 10px;
background: lightyellow; <div class="box block">Block</div>
} <div class="box inline">Inline</div>
<div class="box inline-block">Inline-block</div>
<div class="box none">None (Hidden)</div>

</body>
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 110
</html>
CSS Advanced: Activity Session
<!DOCTYPE html> <div class="box block">Block</div>
<html lang="en"> <div class="box inline">Inline</div>
<head> <div class="box inline-block">Inline-block</div>
<style> <div class="box none">None (Hidden)</div>
.box {
border: 2px solid black; </body>
margin: 5px; </html>
padding: 10px;
background: lightyellow;
}
.block { display: block; width: 150px; }
.inline { display: inline; width: 150px; }
.inline-block { display: inline-block; width: 150px; }
.none { display: none; }
</style>
</head>
<body>

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 111
CSS Advanced : Activity Session
<!DOCTYPE html> <div class="box block">Block</div>
<html lang="en"> <div class="box inline">Inline</div>
<head> <div class="box inline-block">Inline-block</div>
<style> <div class="box none">None (Hidden)</div>
.box {
border: 2px solid black; </body> 1. What happens when you change an element from inline to block
margin: 5px; </html> display?
padding: 10px;
background: lightyellow;
} 2. Can you set the width of an inline element? Why or why not?
.block { display: block; width: 150px; }
.inline { display: inline; width: 150px; }
.inline-block { display: inline-block; width: 3. When should you use inline-block instead of inline or block?
150px; }
.none { display: none; }
4. What does display: none do to an element on the page?
</style>
</head>
<body> 5. How do block and inline elements affect the flow of content?
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 112
CSS Advanced
 What happens when you change inline to block?
 — Starts new line

 Can you set width on inline elements?

 — No

 When to use inline-block?

 — Set size + inline

 What does display:none do?

 — Hides element

 How do block and inline affect flow?

 — Block: new line;
Faculty Name: Ms. Inline: same
Ramandeep Kaur line
| College: GCET | Department: CSE 113
1. What happens when you change an element from inline to block display?
CSS Advanced
The element starts on a new line and takes up the full width available.

2. Can you set the width of an inline element? Why or why not?

No, because inline elements only take up as much space as their content needs and ignore width and height
properties.

3. When should you use inline-block instead of inline or block?

Use inline-block when you want the element to flow inline with others but still be able to set its width and
height.

4. What does display: none do to an element on the page?

It completely hides the element and removes it from the layout, so it takes up no space.

5. How do block and inline elements affect the flow of content?

Block elements start on a new line and stack vertically; inline elements flow within the same line
horizontally.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 114
Activity Session : CSS Selectors and Box Model

Snippet 1: Basic and Descendant Selectors

<div class="card">
<h2>Title</h2> 1. What color will the heading be?
<p>This is a paragraph.</p>
</div> 2. What about the paragraph?

3. What would change if we had .card p instead of p?

.card h2 {
color: blue;
}

p{
color: green;
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 115
Activity Session : CSS Selectors and Box Model
Snippet 2: Class, ID, and Grouping Selectors

<p id="intro"
class="highlight">Welcome!</p>
<p class="highlight">Hello!</p>

#intro { Questions:
font-size: 20px;
} What styles will apply to the first paragraph?

.highlight { What will the second paragraph look like?

background-color: yellow;
} What happens if you change the order of the rules?

#intro, .highlight {
color: red;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 116
Activity Session : CSS Selectors and Box Model
Snippet 3: Attribute and Pseudo-class Selectors

<a href="[Link]
target="_blank">Visit</a>
<a href="[Link] Again</a>

a[target="_blank"] {
color: orange; Questions:
}
Which link turns orange?
a:hover {
text-decoration: underline; When does underline appear?
}
What if we remove the target attribute?

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 117
Activity Session : CSS Selectors and Box Model
Snippet 4: Calculating Box Size

<div class="box">Content</div>

.box {
width: 200px;
padding: 10px;
border: 5px solid black; Questions:
margin: 20px;
} What's the total width and height of the element?

What part of this contributes to spacing outside the element?

How would this change with box-sizing: border-box;?

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 118
Activity Session : CSS Selectors and Box Model
Snippet 5: Box-Sizing Demo
<div class="content-box">A</div>
<div class="border-box">B</div>

div {
width: 150px;
padding: 20px;
border: 5px solid green; Questions:
margin-bottom: 10px;
} Which box will be larger visually?

.content-box { Why is box-sizing important for layouts?

box-sizing: content-box;
background-color: lightblue; What happens if you remove padding?
}

.border-box {
box-sizing: border-box;
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 119
background-color: lightgreen;
}
Activity Session : CSS Selectors and Box Model
Snippet 6: Margin Collapsing

<div class="outer">
<div class="inner">Text</div>
</div>

.outer {
margin-top: 30px; Questions:
background: #eee;
} Will the total space above .inner be 50px?

.inner { What is margin collapsing?

margin-top: 20px;
background: #ccc; How can you prevent it?
}

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 120
 div:nth-child(1) {
position: static; /* Default */
CSS Advanced : Activity Session background-color: lightblue;
width: 100px;
Answer the Questions >> height: 50px;
margin: 5px;
}
1. describe where each box will appear:
div:nth-child(2) {
position: relative;
• Box A top: 20px;
• Box B left: 30px;
• Box C background-color: lightgreen;
width: 100px;
2. Which positioning keeps element in normal flow? height: 50px;
}
3. Which positioning moves element but keeps space
reserved? div:nth-child(3) {
4. Which positioning removes element from normal position: absolute;
flow? top: 0;
right: 0;
background-color: lightcoral;
width: 100px;
height: 50px;
}
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 121
 div:nth-child(1) {
position: static; /* Default */
CSS Advanced : Activity Session - Solution background-color: lightblue;
width: 100px;
Answer the Questions >> height: 50px;
margin: 5px;
}
1. describe where each box will appear:
div:nth-child(2) {
• Box A → normal flow position: relative;
• Box B → moves 20px down, 30px right, but space still top: 20px;
reserved left: 30px;
background-color: lightgreen;
• Box C → positioned absolutely in top-right of container
width: 100px;
height: 50px;
2. Which positioning keeps element in normal flow? }
→ static
div:nth-child(3) {
position: absolute;
[Link] positioning moves element but keeps space
top: 0;
reserved? right: 0;
→ relative background-color: lightcoral;
width: 100px;
[Link] positioning removes element from normal flow? height: 50px;
→ absolute }
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 122
CSS Advanced : Activity Session
Answer the Questions >> /* Header and Footer */ /* Content */
div:nth-child(1), div:nth-child(4) { div:nth-child(3) {
display: block; display: block;
Draw the layout on paper: width: 100%; width: 400px;
height: 50px; height: 200px;
• Header and Footer → full background-color: lightblue; background-color: lightcoral;
width margin: 5px 0; position: relative;
} top: -200px; /* moves up over
sidebar */
• Sidebar → left side
/* Sidebar */ left: 160px; /* moves right next
div:nth-child(2) { to sidebar */
• Content → next to sidebar, display: block; }
slightly overlapping (because width: 150px;
of relative top/left) height: 200px; /* Buttons */
background-color: lightgreen; span {
• Buttons → side by side below position: relative; display: inline-block;
content top: 0; width: 100px;
left: 0; height: 30px;
} background-color: yellow;
margin: 5px;
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE
} 123
CSS Advanced : Positioning

The position property in CSS specifies how an element is positioned in

a document. It determines the positioning method used for an element
(static, relative, absolute, fixed, or sticky), and affects how it interacts
with other elements in the layout.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 124
CSS Advanced : Types of Positioning in CSS

CSS positioning is used to control the exact placement and layering of HTML elements on a web page.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 125
CSS Advanced : Types of Positioning in CSS
1. static (Default)

The default positioning; elements appear in the normal flow of the document.

div {
position: static;
}

Characteristics:
• Cannot be moved with top, left, right, bottom.
• Used when no special positioning is needed.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 126
CSS Advanced : Types of Positioning in CSS
2. relative

The default positioning; elements appear in the normal flow of the document.

div {
position: relative;
top: 20px;
left: 10px;
}

Characteristics:
• Element keeps its space in the document.
• Useful for creating reference points for absolutely positioned children.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 127
CSS Advanced : Types of Positioning in CSS
3. absolute

Removes the element from the document flow and positions it relative to the
nearest ancestor that is positioned (i.e., not static).

.container {
position: relative;
}
.box {
position: absolute;
top: 0; Characteristics:
left: 0; • Can overlap other elements.
}
• Useful for dropdowns, tooltips, or popups.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 128
CSS Advanced : Types of Positioning in CSS
4. fixed

Positions the element relative to the viewport (browser window), so it stays in

place while scrolling.

button {
position: fixed;
bottom: 10px;
right: 10px;
}
Characteristics:
• Always visible even when scrolling.
• Used for sticky headers, floating buttons, etc.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 129
CSS Advanced : Types of Positioning in CSS
5. sticky

Starts as relative, but becomes fixed once it reaches a certain scroll position.

header {
position: sticky;
top: 0;
}

Characteristics:
• Useful for headers or table columns that stay visible during scroll.
• Requires a scrollable container or page.
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 130
CSS Advanced : Types of Positioning in CSS

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 131
CSS Advanced : List of Properties for CSS Positioning

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 132
CSS Advanced : What is float in CSS?

Property Purpose Values

position Type of positioning static , relative, absolute, fixed, sticky
top Vertical offset Length, %, auto
right Horizontal offset (right edge) Length, %, auto
bottom Vertical offset (bottom edge) Length, %, auto
left Horizontal offset (left edge) Length, %, auto
z-index Stacking order Integer or auto
float Float element left or right left , right , none
clear Control float clearance left , right , both, none

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 133
CSS Advanced : What is float in CSS?

 The float property is used to position an element to the

left or right inside its parent container.

 When an element is floated, other content (like text or

inline elements) can wrap around it.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 134
CSS Advanced : Why do we use float?

 To create layouts where elements sit side by side (like

images with text wrapped around).

 To let text flow around images or other floated elements.

 To build simple column layouts (before modern layout

tools like Flexbox/Grid).

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 135
CSS Advanced : Values of float

Value Description

left Floats the element to the left side of its container.

right Floats the element to the right side of its container.

none Default — element does not float; behaves normally.

inherit Takes the float value from its parent element.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 136
CSS Advanced : How does float behave?

 When you float an element, it is taken out of the normal document

flow, meaning other block elements behave as if it’s not there.

 Inline content (like text) wraps around the floated element.

 The height of the parent container may collapse if it only contains

floated children because floated elements are removed from normal
flow.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 137
CSS Advanced : Example of float

<style>
.photo {
float: left;
width: 150px;
margin-right: 15px; /* space between image and text */
}
</style>

<div>
<img src="[Link]" alt="Sample" class="photo" />
<p>
This paragraph will wrap around the image floated to the left.
Notice how the text flows nicely beside the image instead of below it.
</p>
</div>
Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 138
CSS Advanced : Example of float

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 139
CSS Advanced : Common Points related to Float in CSS

 Margins: It’s common to add margins to floated Example of clearing floats:

elements to separate them from wrapped
content. .clearfix::after {
content: "";
 Clearing floats: Because floated elements are
display: block;
removed from the normal flow, the container
might collapse in height. To fix this, use clear clear: both;
property or clearfix techniques. }

 clear property: Prevents elements from

wrapping around floated elements. **Apply this clearfix class to the
container to force it to contain
floated children.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 140
CSS Advanced : Common Use Cases::: Float in CSS

 Text wrap around images: Float images left or right to let text flow
around them.

 Simple two-column layouts: Float two divs left and right to create side-
by-side columns.

 Navigation bars: Float menu items to the left or right for horizontal
menus.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 141
CSS Advanced : Limitations of float::: Float in CSS

 Float was not originally intended for full page layouts, so it can
be tricky.

 Modern CSS layout tools like Flexbox and Grid are more
powerful and easier to control.

 Still useful for small tasks like image wrapping.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 142
CSS Advanced : Limitations of float::: Float in CSS

• Positioning controls how an element is placed relative to its normal

position or viewport (static, relative, absolute, fixed, sticky).

• Floating moves an element left or right, allowing text and inline elements

to wrap around it, mainly used for layouts before flexbox/grid.

Faculty Name: Ms. Ramandeep Kaur | College: GCET | Department: CSE 143
Thankyou