---
title: "Session 3"
description: "Cascading Styling Sheet (CSS)"
image: "https://syntax.theether.in/og.png"
---
> Documentation Index
> Fetch the complete documentation index at: https://syntax.theether.in/llms.txt
> Use this file to discover all available pages before exploring further.
# Session 3
import Question1HomePage from "../../../../components/demo/mcs-216/section-2/session-3/1-timetable/index.svelte";
import Question2 from "../../../../components/demo/mcs-216/section-2/session-3/2-personal/personal-info.svelte";
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 `` tag section using `
```
- 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**:
```html
This is a heading
This is a paragraph.
```
- **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 `` section.
- **Scope**: Can be attached to multiple HTML pages, ensuring a consistent look across an entire website.
- **Example**:
```html title="file.html"
```
```css title="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 `
` 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
```sh
📂 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
```html title="index.html" file=/public/code/mcs-216/section-2/session-3/B.Tech_Timetable/index.html
```
### Ist Year
```html title="year1.html" file=/public/code/mcs-216/section-2/session-3/B.Tech_Timetable/year1.html
```
### IInd Year
```html title="year2.html" file=/public/code/mcs-216/section-2/session-3/B.Tech_Timetable/year2.html
```
### IIIrd Year
```html title="year3.html" file=/public/code/mcs-216/section-2/session-3/B.Tech_Timetable/year3.html
```
### IVth Year
```html title="year4.html" file=/public/code/mcs-216/section-2/session-3/B.Tech_Timetable/year4.html
```
### Common Style Sheet
```css title="style.css" file=/public/code/mcs-216/section-2/session-3/B.Tech_Timetable/style.css
```
### Preview (Working)
## 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
```sh
📂 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
```html title="index.html" file=/public/code/mcs-216/section-2/session-3/personal-info/index.html
```
### Style Sheet
```css title="style.css" file=/public/code/mcs-216/section-2/session-3/personal-info/style.css
```
### Preview (Working)
Source: https://syntax.theether.in/mcs-216/section-2/session-3/index.mdx