UNIT-2
Introduction to CSS-Box Model and text properties -Font and display properties-float and
overflow-link-list-table-forms- web layout - Accessing CSS from javascript-Expressions and
Control flow in JavaScript-JavaScript Functions, Objects, and Arrays-Event and Event
Listeners-Closure-Classes-Fetch API
Introduction to CSS
CSS (Cascading Style Sheets) is a language designed to simplify the process of making web
pages presentable.
• It allows you to apply styles to HTML documents by prescribing colors, fonts,
spacing, and positioning.
• The main advantages are the separation of content (in HTML) and styling (in CSS)
and the same CSS rules can be used across all pages and not have to be rewritten.
• HTML uses tags, and CSS uses rule sets.
• CSS styles are applied to the HTML element using selectors.
What is Cascading?
Cascading in CSS refers to how styles are applied to elements based on priority rules. When
multiple CSS rules target the same element, the browser decides which style to apply by
following the cascading order: inline styles, internal styles, and external stylesheets. The
specificity of selectors, the order of CSS rules, and the use of important tags further
determine which styles take precedence. This allows developers to layer styles and create
more complex designs without overriding other rules unnecessarily. Understanding this
behavior is essential for efficient and effective styling.
Why CSS?
• Saves Time: Write CSS once and reuse it across multiple HTML pages.
• Easy Maintenance: Change the style globally with a single modification.
• Search Engine Friendly: Clean coding technique that improves readability for search
engines.
• Superior Styles: Offers a wider array of attributes compared to HTML.
• Offline Browsing: CSS can store web applications locally using an offline cache,
allowing offline viewing.
CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to the
corresponding elements. A style rule set includes a selector and a declaration block.
• Selector: Targets specific HTML elements to apply styles.
• Declaration: Combination of a property and its corresponding value.
// HTML Element
<h1>GeeksforGeeks</h1>
// CSS Style
h1 {
color: blue; font-size: 12px;
The CSS code targets the h1 element with the selector h1. The declaration { color: blue; font-
size: 12px; } sets the text color to blue and the font size to 12 pixels.
• The selector points to the HTML element that you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
Example
p{
color: blue;
text-align: center;
CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces. In this example, all paragraph element (<p> tag) will be centre-aligned, with a
blue text color.
Ways to Apply CSS
1. Inline CSS: Directly within the HTML element using the style attribute.
2. Internal CSS: Within a <style> tag in the <head> section.
3. External CSS: The external CSS is the CSS linked to an HTML file using the <link> tag.
Key Advantages and Disadvantages of CSS
Here are some key advantages and disadvantages of css:
Advantages of CSS
• Simplifies web design and maintenance.
• Enhances website performance and user experience.
• Supports responsive and adaptive designs for all devices.
Disadvantages of CSS
• Cross-Browser Compatibility Issues: Different browsers may interpret CSS
differently, causing inconsistencies in design.
• Complexity in Large Projects: As projects grow, CSS can become hard to manage,
leading to cluttered code and style conflicts.
• Limited Dynamic Behavior: CSS is mainly for static design, so it can't handle
complex interactions or animations without JavaScript
Note:
CSS (Cascading Style Sheets)
• Used to control layout, colors, fonts, and positioning of HTML elements.
• Types:
o Inline: <p style="color:red">
o Internal: <style> tag in <head>
o External: link to .css file using <link rel="stylesheet">
CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists
of: content, padding, borders and margins. The image below illustrates the box model:
Explanation of the different parts:
• 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.
Example
<!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. It
consists of: borders, padding, margins, and the actual content.</p>
<div>Welcome to New Page </div>
</body>
</html>
Output:
Note:
• Every HTML element is a box consisting of:
o Content
o Padding
o Border
o Margin
Example
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
Text Properties
It is possible to assign various CSS text properties in your HTML element using the CSS text
properties listed below:
CSS Text Property Description
color The color property can be applied to set the color in your text.
direction The direction property can be applied to set the direction of your text.
letter-spacing The letter-spacing property can be applied to add or subtract space between
letters, which will form a word.
text-decoration The text-decoration property can be applied for underlining, overlining, and
strikethrough text.
text-shadow The text-shadow property can be applied for setting the text-shadow on your
text.
text-transform The text-transform property can be applied to capitalize text or convert text to
uppercase or lowercase letters.
word-spacing The word-spacing property can be applied to add or subtract space between
different words in your sentence.
text-indent The text-indent property can be applied to indent the text of your paragraph.
text-align The text-align property can be applied to align text in your document.
white-space The white-space property can be applied to control flow, as well as to the
formatting of your text.
CSS Text Color
The color property of CSS is implemented for assigning colors to your texts. Three different
approaches can specify these colors:
• By using the color name, such as red, aqua, blue
• By using the HEX value, such as #ff0000, #ffff00
• By using the RGB value, such as rgb(255,0,0), rgb(255,255,0)
Example:
p{
color: red;
}
body {
color: aqua;
CSS Text Alignment
This property is implemented to specify a horizontal alignment in your text. Text alignment
can be of these four values.
1. left
2. right
3. center or
4. justify
Example
p{
text-align:left;
body {
text-align: center;
h2 {
text-align: right;
It is to be noted that when the text-align property is assigned with a justify value, the line is
stretched to fit the page where the right and the left margins become straight.
CSS Text Decoration
This property of CSS is implemented to add or remove decorations from your text. When the
text-decoration value is set to none, it is often employed for removing underlines from links,
which looks something like this:
Example1:
a{
text-decoration: none;
Example2:
h2 {
text-decoration: line-through;
p{
text-decoration: overline;
body {
text-decoration: underline;
CSS Text Transformation
This CSS property is implemented for specifying the uppercase as well as the lowercase
letters of your text. The transformation can be either converting every text to lowercase or
upper case or capitalize the starting letter of every word.
Example
h2.uppercase {
text-transform: uppercase;
h3.lowercase {
text-transform: lowercase;
h4.capitalize {
text-transform: capitalize;
}
CSS Text Indentation
The text-indent property of CSS is implemented to specify the indentation of the initial line
of your text.
Example
p{
text-indent: 40px;
CSS Letter and Word Spacing
The letter-spacing property is implemented for specifying the space involving the characters
within your HTML text. And the word-spacing property is implemented for specifying the
space involving the words between your texts.
Example:
h2 {
letter-spacing: 2px;
}
h3 {
letter-spacing:3px;
h1 {
word-spacing: 10px;
CSS Text Shadow
The text-shadow property of CSS allows including shadow to your text. Here is a code
snippet:
Example:
h2 {
text-shadow: 2px 1px gray;
Note:
• color, font-size, font-weight, font-style, text-align, text-decoration, line-height, letter-
spacing
Font and Display Properties
The CSS font-display property controls how a custom web font is displayed while it's
loading. It determines whether to show a fallback font, hide text temporarily, or swap to the
custom font once it's fully loaded.
Font-display allows customizing how web fonts are displayed when the page is being
rendered.
It is applied using @font-face rule which defines custom fonts in a style sheet.
Syntax
@font-face {
font-family: Sample;
src: url(samplefont.woff) format('woff'),
url(samplefontbold.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: optional;
}
Example: In this example we demonstrates the usage of the @font-face rule to import the
"Roboto" font with bold and italic styles, utilizing the font-display property to control loading
behavior.
<!DOCTYPE html>
<html>
<head>
<title>CSS font-display</title>
<meta name='viewport' content="width=device-width, initial-scale=1">
<style>
@font-face {
font-family: Roboto;
src: url(Roboto\Roboto-BoldItalic.ttf) format('truetype');
font-style: italic;
font-weight: bold;
font-display: block;
div {
font-family: Roboto;
font-style: italic;
font-weight: bold;
</style>
</head>
<body>
<h1>Usage of font-display</h1>
<div>Downloaded font</div>
<p>Normal font</p>
</body>
</html>
Output:
CSS Layout - Float and Clear
CSS layout is used to control how elements are positioned and arranged on a webpage. The
"float" and "clear" properties help in organizing content, ensuring proper alignment and
preventing wrapping around elements.
Float Property
The CSS float property allows elements to be positioned to the left or right of their container,
allowing inline content (like text) to wrap around it. It is commonly used to create layouts,
such as columns, where the text or other elements wrap around floated items.
Syntax
.element {
float: left | right | none | inherit;
}
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 Removes the float and keeps the element in the normal flow.
inherit Inherits the float property from its parent element.
1. float: left
Floats the element to the left side of its container.
<html>
<head>
<style>
.left {
float: left;
width: 50px;
height: 50px;
background-color: lightblue;
</style>
</head>
<body>
<div class="left">Left Float</div>
</body>
</html>
2. float: right
Floats the element to the right side of its container.
<html>
<head>
<style>
.right {
float: right;
width: 50px;
height: 50px;
background-color: lightgreen;
</style>
</head>
<body>
<div class="right">Right Float</div>
</body>
</html>
3. float: none
Removes the float and keeps the element in the normal flow.
<html>
<head>
<style>
.none {
float: none;
width: 50px;
height: 50px;
background-color: lightcoral;
</style>
</head>
<body>
<div class="none">No Float</div>
</body>
</html>
4. float: inherit
Inherits the float property from its parent element.
<html>
<head>
<style>
.parent {
float: left;
.child {
float: inherit;
width: 50px;
height: 50px;
background-color: lightyellow;
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child">Inherit Float</div>
</div>
</body>
</html>
Clear Property
The CSS clear property controls the behavior of elements in relation to floated elements. It
specifies whether an element should be placed next to or below floated elements.
Syntax
.element {
clear: left | right | both | none | inherit;
}
Value Description
none No effect on adjacent elements, allowing them to position freely.
Value Description
left Forces the element below any left-floating elements.
right Forces the element below any right-floating elements.
both Forces the element below both left and right floating elements.
inherit Inherits the clear property from its parent element.
1. clear: left
Prevents the element from being adjacent to left-floated elements.
<html>
<head>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
.clear-left {
clear: left;
background-color: lightgreen;
</style>
</head>
<body>
<div class="float-left">Floated Left</div>
<div class="clear-left">Cleared Left</div>
</body>
</html>
2. clear: right
Prevents the element from being adjacent to right-floated elements.
<html>
<head>
<style>
.float-right {
float: right;
width: 100px;
height: 100px;
background-color: lightcoral;
.clear-right {
clear: right;
background-color: lightyellow;
</style>
</head>
<body>
<div class="float-right">Floated Right</div>
<div class="clear-right">Cleared Right</div>
</body>
</html>
3. clear: both
Prevents the element from being adjacent to both left and right-floated elements.
<html>
<head>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
.float-right {
float: right;
width: 100px;
height: 100px;
background-color: lightcoral;
.clear-both {
clear: both;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="float-left">Floated Left</div>
<div class="float-right">Floated Right</div>
<div class="clear-both">Cleared Both</div>
</body>
</html>
4. clear: none
Allows the element to be adjacent to floated elements (default behavior).
<html>
<head>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
.no-clear {
clear: none;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="float-left">Floated Left</div>
<div class="no-clear">No Clear Applied</div>
</body>
</html>
Note
Float and Overflow
• float: aligns elements left or right
• clear: prevents float overlap
• overflow: controls overflow content
o hidden, scroll, auto
Links, Lists, Tables, Forms
➤ Links (<a>)
A link is a connection from one web page to another web page. CSS property can be used to
style the links in various different ways.
States of Link: Before discussing CSS properties, it is important to know the states of a link.
Links can exist in different states and they can be styled using pseudo-classes.
There are four states of links given below:
• a:link => This is a normal, unvisited link.
• a:visited => This is a link visited by user at least once
• a:hover => This is a link when mouse hovers over it
• a:active => This is a link that is just clicked.
Example:
a:link {
color:color_name;
color_name can be given in any format like color name (green), HEX value (#5570f0) or
RGB value rgb(25, 255, 2). There is another state 'a:focus' which is used to focused
when a user uses the tab key to navigate through the links.
The default value of links:
• By default the links created are underlined.
• When the mouse is hovered above a link, it changes to a hand icon.
• Normal/unvisited links are blue.
• Visited links are colored purple.
• Active links are colored red.
• When a link is focused, it has an outline around it.
Example: This example shows the basic use of links in CSS.
<!DOCTYPE html>
<html>
<head>
<title>CSS links</title>
<style>
p{
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<p>
<a href="https://www.google.com/">
Welcome to New Link
</a>
</p>
</body>
</html>
Output:
➤ Lists
CSS Lists are used to display items in a clear and organized manner, either with bullets
(unordered) or numbers (ordered). They help keep content neat and structured on a webpage.
With CSS, you can customize the look of lists to improve the design and layout of your
content.
<html>
<head>
<style>
ul {
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Output:
Types of Lists in CSS
The list can be categorized into 2 types:
• Unordered List: In unordered lists, the list items are marked with bullets i.e. small
black circles by default.
• Ordered List: In ordered lists, the list items are marked with numbers and an
alphabet.
Properties of CSS List
We have the following CSS lists properties, which can be used to control the CSS lists:
Property Description
list-style- Specifies the appearance of the list item marker (e.g.,
type disc, circle, square, numbers, etc.).
list-style- Sets the image to be used as the list item marker,
image replacing the default marker with a custom image.
list-style- Defines the position of the marker relative to the list
position item's content (inside or outside the list item).
A shorthand property to set list-style-type, list-style-
list-style
position, and list-style-image together.
➤ Tables
CSS tables are used to style HTML tables, making them look neat and organized for clear
data presentation.
• Add borders, spacing, and colors to enhance table design.
• Create responsive tables that adjust for all screen sizes.
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #000;
padding: 8px;
text-align: center;
th {
background-color: #f2f2f2;
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Output:
➤ Forms
CSS forms are HTML forms styled using CSS to improve appearance and usability. Forms
are used to collect user inputs. Styling forms with CSS makes them more attractive,
responsive, and user-friendly.
CSS Properties for Styling Forms
CSS Property Description
width, height Size of input fields
padding, margin Spacing
border, border-radius Border styling and rounding
font-family, font-size Font styling
background-color, color Color of background and text
display, flex, grid Layout styling
box-shadow Adds shadow effect
CSS Property Description
transition Smooth animation for focus or hover
CSS (Form Styling) form {
width: 300px;
margin: 0 auto;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #ccc;
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
transition: 0.3s ease;
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #007BFF;
outline: none;
input[type="submit"] {
background-color: #007BFF;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
input[type="submit"]:hover {
background-color: #0056b3;
Web Layout
• Use of semantic HTML5 tags:
o <header>, <footer>, <nav>, <section>, <aside>, <main>
• Layout Techniques:
o Flexbox
o Grid
o Media Queries for responsive design
Accessing CSS from JavaScript
Example
document.getElementById("box").style.backgroundColor = "blue";
document.getElementById("box").classList.add("active");
Expressions and Control Flow in JavaScript
• if, else, switch, for, while, do-while
• Operators: +, -, *, /, ==, ===, !=
JavaScript Functions, Objects and Arrays
Example:
function greet(name) {
return "Hi " + name;
let student = { name: "Anu", age: 21 };
let fruits = ["apple", "banana", "mango"];
Events and Event Listeners
Example
document.getElementById("btn").addEventListener("click", function() {
alert("Clicked!");
});
• Types: click, mouseover, keydown, submit
Closures
• A function inside another function with access to the outer scope variables.
function counter() {
let count = 0;
return function() {
count++;
return count;
};
let increment = counter();
JavaScript Classes
class Student {
constructor(name) {
this.name = name;
display() {
return "Name: " + this.name;
Fetch API
• Used for making HTTP requests asynchronously
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
Sample Program:
Source code1: index.html
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Student Weather Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header><h1>Student Weather Card</h1></header>
<main>
<form id="studentForm">
<label>Name:</label>
<input type="text" id="name" required>
<label>City:</label>
<input type="text" id="city" required>
<button type="submit">Submit</button>
</form>
<section id="output" class="card" style="display: none;">
<h2 id="studentName"></h2>
<p><strong>City:</strong> <span id="studentCity"></span></p>
<p><strong>Temperature:</strong> <span id="temp"></span> °C</p>
<p><strong>Condition:</strong> <span id="condition"></span></p>
<img id="icon" src="" alt="Weather Icon">
</section>
</main>
<footer>
<p>© 2025 Weather Info System</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Source Code2: style.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #eef;
text-align: center;
header, footer {
background-color: #007BFF;
color: white;
padding: 10px;
form {
margin-top: 30px;
input {
padding: 10px;
margin: 5px;
button {
padding: 10px 20px;
background-color: green;
color: white;
border: none;
.card {
background: white;
margin: 20px auto;
padding: 20px;
width: 300px;
border-radius: 10px;
box-shadow: 2px 2px 10px #999;
Source Code3: script.js
document.getElementById("studentForm").addEventListener("submit", function (e) {
e.preventDefault();
let name = document.getElementById("name").value;
let city = document.getElementById("city").value;
document.getElementById("studentName").innerText = name;
document.getElementById("studentCity").innerText = city;
fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`)
.then(response => response.json())
.then(data => {
document.getElementById("temp").innerText = data.current.temp_c;
document.getElementById("condition").innerText = data.current.condition.text;
document.getElementById("icon").src = data.current.condition.icon;
document.getElementById("output").style.display = "block";
})
.catch(error => {
alert("City not found or API error.");
document.getElementById("output").style.display = "none";
});
});
Output:
Important Questions:
2-Mark Questions
1. What is CSS?
2. What is the Box Model in CSS?
3. Write any two text formatting properties in CSS.
4. What is the difference between inline and block elements?
5. What is a closure in JavaScript?
6. Write a simple JavaScript function example.
7. What is the use of fetch() API?
8. What is the use of the float property in CSS?
16-Mark Questions
Question 1:
a) Explain the CSS Box Model with diagram and example. (8 Marks)
b) Write detailed notes on font, display, float, and overflow properties with examples. (8
Marks)
Question 2:
a) Explain how events and event listeners work in JavaScript with example. (8 Marks)
b) Describe the Fetch API and demonstrate how it is used to access data. (8 Marks)
Question 3:
a) Write short notes on HTML form elements with example. (8 Marks)
b) Explain the web page layout structure using semantic tags and CSS Flexbox/Grid. (8
Marks)
Question 4:
a) Define JavaScript classes and objects. Write a program using both. (8 Marks)
b) Discuss JavaScript control structures and expression evaluation. (8 Marks)
