Session 3

Cascading Styling Sheet (CSS)

CSS (Cascading Style Sheets) is a core web technology designed to separate the visual presentation and layout of a webpage from its structural HTML content. In web development, maintaining a consistent look and feel across multiple pages is essential for user familiarity and professional design. CSS streamlines this process, especially in collaborative environments where teams of developers need to apply uniform styling across large projects without duplicating design code.

This session introduces how CSS enables developers to efficiently style and layout web pages. Key capabilities covered include controlling:

Typography & text formatting (fonts, colors, sizes, spacing)
Page layout & structure (multi-column arrangements, positioning)
Visual enhancements & animations (decorative features, transitions)

Objective

After Completing this session, one should be able to:

Create CSS for a webpage
Embed CSS inline and external into an HTML code.

Methods to implement CSS in HTML

There are three methods to implement CSS in HTML: Inline, Internal and External CSS.

Internal CSS

What it is: CSS rules defined directly within a single HTML document.
Where it goes: Placed inside the <head> tag section using <style> tags.
Scope: Applies globally to all elements within that specific HTML page only.

Example:

		<head>
  <style>
    body { background-color: green; }
    h1 { margin-left: 20px; color: red; }
  </style>
</head>

Best for: Styling a single page when you don't want to create a separate file.

Inline CSS

What it is: CSS applied directly to a specific HTML element.
Where it goes: Added as a style attribute directly inside the opening tag of the element.
Scope: Element-specific. It only affects the exact tag it's attached to.

Example:

		<h2 style="text-align: right; color: red;">This is a heading</h2>
<p style="text-align: justify; color: green;">This is a paragraph.</p>

Best for: Quick, one-off styling. However, it's not recommended for large projects as it mixes content with presentation and reduces maintainability.

External CSS

What it is: CSS written in a completely separate file with a .css extension.
Where it goes: Linked to the HTML document using the link> tag inside the <head> section.
Scope: Can be attached to multiple HTML pages, ensuring a consistent look across an entire website.

Example:

file.html

		<head>
  <link rel="stylesheet" href="external-css.css">
</head>

external-css.css

		body { background-color: lightblue; }
h2 { color: navy; margin-left: 20px; }

Cascading Priority

When multiple styles are applied to the same element, the browser follows a cascading priority rule to determine which style wins. From highest to lowest priority:

Inline style (Highest priority → overrides everything)
External & Internal style sheets (Equal priority; whichever loads last usually wins)
Browser default styles (Lowest priority)

Example: If an external stylesheet sets h2 { color: blue; } but you add style="color: red;" directly to that <h2> tag, the text will render red because inline styles take precedence.

Question 1

Problem Statement

Create an HTML website to display the time table of all the 4 years of B. Tech. (even semester of each year).It should contain a home page where link to each year's time table is listed. On click to any year time table a new web page should be open displaying the corresponding time table. Apply the following effects on the table using CSS:

Common to all:
- Display day names (Mon, Tue etc...) in bold format with the first letter in the dayname in uppercase.
- Display lunch slightly in bigger font other than the remaining text.
Specific to each year:
- For 1st year
  - Apply blue as the background colour and white for the colour of the text in the table header.
- For 2nd year
  - Apply green as the background colour and white for the colour of the text in the table header.
- For 3rd year
  - Apply purple as the background colour and white for the colour of the text in the table header.
- For 4th year
  - Apply yellow as the background colour and black for the colour of the text in the table header.

Solution

File Structure

		📂 B.Tech_Timetable/
 ├── index.html          (Home Page)
 ├── year1.html          (1st Year Timetable)
 ├── year2.html          (2nd Year Timetable)
 ├── year3.html          (3rd Year Timetable)
 ├── year4.html          (4th Year Timetable)
 └── style.css           (External CSS File)

Code Files

Homepage

index.html

		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>B.Tech Even Semester Timetables</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>B.Tech Even Semester Timetables</h1>
        <nav>
            <ul>
                <li><a href="year1.html">1st Year Timetable</a></li>
                <li><a href="year2.html">2nd Year Timetable</a></li>
                <li><a href="year3.html">3rd Year Timetable</a></li>
                <li><a href="year4.html">4th Year Timetable</a></li>
            </ul>
        </nav>
    </body>
</html>

Ist Year

year1.html

		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>1st Year Timetable</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>1st Year B.Tech Even Semester Timetable</h1>
 
        <table class="year1">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>9:00 - 10:00</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>English</td>
                    <td>Computer Science</td>
                    <td>Physics Lab</td>
                </tr>
                <tr>
                    <td>10:00 - 11:00</td>
                    <td>Chemistry</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>Workshop</td>
                    <td>Chemistry Lab</td>
                </tr>
                <tr>
                    <td>11:00 - 11:45</td>
                    <td class="lunch" colspan="5">LUNCH BREAK</td>
                </tr>
                <tr>
                    <td>11:45 - 1:00</td>
                    <td>English</td>
                    <td>Chemistry</td>
                    <td>Workshop</td>
                    <td>Mathematics</td>
                    <td>Computer Science</td>
                </tr>
            </tbody>
        </table>
 
        <a href="index.html" class="back-link">← Back to Home</a>
    </body>
</html>

IInd Year

year2.html

		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>1st Year Timetable</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>1st Year B.Tech Even Semester Timetable</h1>
        <table class="year2">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>9:00 - 10:00</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>English</td>
                    <td>Computer Science</td>
                    <td>Physics Lab</td>
                </tr>
                <tr>
                    <td>10:00 - 11:00</td>
                    <td>Chemistry</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>Workshop</td>
                    <td>Chemistry Lab</td>
                </tr>
                <tr>
                    <td>11:00 - 11:45</td>
                    <td class="lunch" colspan="5">LUNCH BREAK</td>
                </tr>
                <tr>
                    <td>11:45 - 1:00</td>
                    <td>English</td>
                    <td>Chemistry</td>
                    <td>Workshop</td>
                    <td>Mathematics</td>
                    <td>Computer Science</td>
                </tr>
            </tbody>
        </table>
 
        <a href="index.html" class="back-link">← Back to Home</a>
    </body>
</html>

IIIrd Year

year3.html

		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>1st Year Timetable</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>1st Year B.Tech Even Semester Timetable</h1>
 
        <table class="year3">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>9:00 - 10:00</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>English</td>
                    <td>Computer Science</td>
                    <td>Physics Lab</td>
                </tr>
                <tr>
                    <td>10:00 - 11:00</td>
                    <td>Chemistry</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>Workshop</td>
                    <td>Chemistry Lab</td>
                </tr>
                <tr>
                    <td>11:00 - 11:45</td>
                    <td class="lunch" colspan="5">LUNCH BREAK</td>
                </tr>
                <tr>
                    <td>11:45 - 1:00</td>
                    <td>English</td>
                    <td>Chemistry</td>
                    <td>Workshop</td>
                    <td>Mathematics</td>
                    <td>Computer Science</td>
                </tr>
            </tbody>
        </table>
 
        <a href="index.html" class="back-link">← Back to Home</a>
    </body>
</html>

IVth Year

year4.html

		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>1st Year Timetable</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>1st Year B.Tech Even Semester Timetable</h1>
        <table class="year4">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>9:00 - 10:00</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>English</td>
                    <td>Computer Science</td>
                    <td>Physics Lab</td>
                </tr>
                <tr>
                    <td>10:00 - 11:00</td>
                    <td>Chemistry</td>
                    <td>Mathematics</td>
                    <td>Physics</td>
                    <td>Workshop</td>
                    <td>Chemistry Lab</td>
                </tr>
                <tr>
                    <td>11:00 - 11:45</td>
                    <td class="lunch" colspan="5">LUNCH BREAK</td>
                </tr>
                <tr>
                    <td>11:45 - 1:00</td>
                    <td>English</td>
                    <td>Chemistry</td>
                    <td>Workshop</td>
                    <td>Mathematics</td>
                    <td>Computer Science</td>
                </tr>
            </tbody>
        </table>
 
        <a href="index.html" class="back-link">← Back to Home</a>
    </body>
</html>

Common Style Sheet

year4.html

		/* Base Styles */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}
 
h1 {
    text-align: center;
    color: #333;
}
 
nav ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
nav ul li {
    display: inline;
    margin: 0 15px;
}
nav ul li a {
    text-decoration: none;
    color: #0056b3;
    font-weight: bold;
    font-size: 18px;
}
 
/* Table Base Styles */
table {
    width: 90%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
 
th,
td {
    border: 1px solid #444;
    padding: 12px;
    text-align: center;
}
 
/* COMMON EFFECT 1: Day names bold & first letter uppercase */
thead th {
    font-weight: bold;
    text-transform: capitalize;
}
 
/* COMMON EFFECT 2: Lunch slightly bigger font */
.lunch {
    font-size: 1.25em;
    font-weight: bold;
    letter-spacing: 2px;
}
 
/* YEAR-SPECIFIC HEADER STYLES */
.year1 th {
    background-color: blue;
    color: white;
}
.year2 th {
    background-color: green;
    color: white;
}
.year3 th {
    background-color: purple;
    color: white;
}
.year4 th {
    background-color: yellow;
    color: black;
}
 
.back-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
}

Preview (Working)

B.Tech Even Semester Timetables

Select a year to view the schedule

Question 2

Problem Statement

Create an HTML webpage to show personal information i.e. name, class, qualifications, photo,address etc. Make use of tables as when possible. Apply the following styleinformation using CSS:

Display the heading of the page in Arial font and with font size of 18px.
Align all the field names like Name, Class, Photo etc to left in the table.
Apply yellow color as background colour in left side cells contains field names like Name, Class etc...
Set college logo as background image to the web page.

File Structure

		📂 PersonalInfo/
 ├── index.html
 ├── style.css
 ├── college-logo.png   (Replace with your actual logo file)
 └── student-photo.jpg  (Replace with your actual photo file)

Code Files

Homepage

index.html

		<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Personal Information</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Personal Information</h1>
 
        <div class="info-container">
            <table>
                <tr>
                    <td>Name:</td>
                    <td>John Doe</td>
                </tr>
                <tr>
                    <td>Class:</td>
                    <td>B.Tech Computer Science, 3rd Year</td>
                </tr>
                <tr>
                    <td>Qualifications:</td>
                    <td>12th Grade (Science), Diploma in Web Development</td>
                </tr>
                <tr>
                    <td>Photo:</td>
                    <td>
                        <img
                            src="student-photo.jpg"
                            alt="Student Photo"
                            width="120"
                        />
                    </td>
                </tr>
                <tr>
                    <td>Address:</td>
                    <td>123 College Street, Academic City, State - 560001</td>
                </tr>
            </table>
        </div>
    </body>
</html>

Style Sheet

style.css

		/* Requirement: Set college logo as background image */
body {
    background-image: url("college-logo.jpg");
    background-size: cover; /* Scales image to cover viewport */
    background-repeat: no-repeat;
    background-attachment: fixed; /* Keeps logo fixed while scrolling */
    background-position: center;
    margin: 0;
    padding: 40px 20px;
    font-family: sans-serif;
}
 
/* Requirement: Heading in Arial font, 18px size */
h1 {
    font-family: Arial, sans-serif;
    font-size: 18px;
    text-align: center;
    color: #222;
    background-color: rgba(
        255,
        255,
        255,
        0.85
    ); /* Semi-transparent for readability */
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 25px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
 
.info-container {
    max-width: 600px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
 
table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #aaa;
}
 
td {
    padding: 12px;
    border: 1px solid #aaa;
}
 
/* Requirements: Left cells yellow background + left-aligned text */
td:first-child {
    background-color: yellow;
    text-align: left;
    font-weight: bold;
    width: 35%;
}
 
td:last-child {
    text-align: left; /* Optional: keeps data aligned consistently */
}
 
img {
    border: 1px solid #888;
    padding: 2px;
    background: #fff;
}

Preview (Working)

Personal Information

Name:	John Doe
Class:	B.Tech Computer Science, 4th Year (Even Sem)
Qualifications:	12th Grade (PCM), Diploma in Full Stack Development
Photo:
Address:	123 University Road, Academic City, State - 560001

Session 2

HTML Forms

Session 4

JavaScript HTML DOM