Unit 3: Introduction to CSS
1) What is CSS? Describe the different types of CSS with suitable examples.
CSS (Cascading Style Sheets) is used to style and layout web pages - for example, to
change the font, color, size, and spacing of content.
Types of CSS:
-----------------
a) Inline CSS:
- Used within an HTML tag using the 'style' attribute.
- Example:
<p style="color: red;">This is a red paragraph.</p>
b) Internal CSS:
- Defined within a <style> tag in the HTML <head> section.
- Example:
<head>
<style>
p { color: blue; }
</style>
</head>
c) External CSS:
- Written in a separate .css file and linked to the HTML.
- Example:
File: style.css
p { color: green; }
HTML:
<link rel="stylesheet" href="style.css">
<p>This is green text.</p>
2) Explain different ways to specify colors in CSS. Provide example using:
- Named colors
- RGB and RGBA
- Hexadecimal values
- HSL and HSLA
a) Named Color:
p { color: red; }
b) RGB (Red, Green, Blue):
p { color: rgb(255, 0, 0); }
c) RGBA (RGB with Alpha for transparency):
p { color: rgba(255, 0, 0, 0.5); }
d) Hexadecimal:
p { color: #ff0000; }
e) HSL (Hue, Saturation, Lightness):
p { color: hsl(0, 100%, 50%); }
f) HSLA (HSL with Alpha):
p { color: hsla(0, 100%, 50%, 0.3); }
3) Explain CSS properties used for background, text formatting, and font control.
a) Background properties:
background-color: lightblue;
background-image: url("bg.png");
background-repeat: no-repeat;
background-position: center;
b) Text formatting:
text-align: center;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
c) Font control:
font-family: Arial, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
4) What is the Box Model in CSS? Explain margin, padding, border, and content.
The Box Model:
+-----------------------------+
| Margin |
| +-----------------------+ |
| | Border | |
| | +-----------------+ | |
| | | Padding | | |
| | | +-----------+ | | |
| | | | Content | | | |
| | | +-----------+ | | |
| | +-----------------+ | |
| +-----------------------+ |
+-----------------------------+
- Content: The actual text/image inside the box.
- Padding: Space between content and border.
- Border: The line surrounding padding.
- Margin: Space outside the border.
Example:
div {
margin: 10px;
padding: 15px;
border: 2px solid black;
width: 200px;
height: 100px;
}
Unit 4: Web Publishing, Multimedia, and Hosting
1) What are the steps involved in creating and publishing a website?
Steps:
--------
1. Plan the website structure and content.
2. Design wireframes and mockups.
3. Write HTML, CSS, JavaScript code.
4. Test the website locally.
5. Register a domain name.
6. Select a hosting provider.
7. Upload files via FTP or Control Panel.
8. Launch and maintain the site.
2) Describe the structure and themes used in designing a website.
Website Structure:
-------------------
- Header: Title, navigation links.
- Main Content: Articles, media, products, etc.
- Sidebar: Ads, links, widgets.
- Footer: Contact, copyright.
Themes:
--------
- Color schemes (light/dark)
- Layout types (fixed, fluid, grid)
- Typography styles
- Consistent branding and user experience
3) How are audio and video files inserted into a webpage? Mention supported formats.
Audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
Video:
<video controls width="320" height="240">
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
Supported Formats:
--------------------
Audio: MP3, OGG, WAV
Video: MP4, WebM, OGG
4) What is web hosting? Explain types of hosting with examples.
Web Hosting:
-------------
A service that allows individuals and organizations to post a website on the Internet.
Types:
-------
1. Shared Hosting:
- Multiple websites on a single server.
- Example: Bluehost Shared Plan
2. VPS Hosting:
- Virtualized private server with more control.
- Example: Hostinger VPS Plan
3. Dedicated Hosting:
- Full server dedicated to one site.
- Example: GoDaddy Dedicated Server
4. Cloud Hosting:
- Resources from multiple servers.
- Example: AWS, Google Cloud
5. Managed Hosting:
- Hosting provider handles all technical tasks.
- Example: WP Engine for WordPress
5) Write short notes on:
a) Digital Image Representation:
- Images are made of pixels.
- Each pixel has RGB values.
- Formats: JPEG, PNG, GIF, SVG.
b) Hosting Basics:
- Hosting = server space + domain + internet access.
- Requires FTP, control panel, DNS setup.
c) Web File Formats:
- HTML (.html): Content structure
- CSS (.css): Styling
- JS (.js): Behavior
- Media: .jpg, .png, .mp4, .mp3
UPDATED SHORT NOTES (Each approx. 300 words)
a) Digital Image Representation:
Digital images are a visual representation of data using a grid of pixels (picture
elements). Each pixel stores color information, typically using RGB values-red, green,
and blue channels with values ranging from 0 to 255. When combined, these create over 16
million possible colors. The resolution of an image (measured in pixels) defines its
clarity and sharpness-higher resolutions yield more detailed images.
There are two main types of digital images: raster and vector. Raster images (like JPEG,
PNG, and GIF) are composed of pixels and are resolution-dependent. JPEG (Joint
Photographic Experts Group) is a lossy format, ideal for photographs, offering good
compression at the cost of some quality loss. PNG (Portable Network Graphics) supports
lossless compression and transparency, making it suitable for web graphics and logos.
GIF (Graphics Interchange Format) supports basic animations and a limited color palette
(256 colors). SVG (Scalable Vector Graphics), on the other hand, is a vector
format-using XML-based markup to describe shapes and paths-allowing infinite scaling
without quality loss.
Image representation also includes color depth (number of bits used per pixel) and
metadata (EXIF info like camera settings). Compression (lossy or lossless) reduces file
size for faster loading and optimized web performance. Web developers often balance
quality and size by choosing the right format and compression level.
b) Hosting Basics:
Web hosting is the process of storing and serving website files (HTML, CSS, JavaScript,
media) on a server connected to the internet, so that they are accessible via a domain
name. Hosting essentially involves three components: server space (for storing site
files), a domain name (the website's address), and internet connectivity.
To set up hosting, a user typically registers a domain through a registrar and then
selects a hosting provider. The provider offers a control panel (like cPanel or Plesk)
for managing files, emails, databases, and security settings. Files are uploaded to the
server using an FTP (File Transfer Protocol) client like FileZilla or through the web
interface.
Another crucial component is DNS (Domain Name System) configuration, which maps domain
names to server IP addresses, allowing browsers to locate the site. Web hosting plans
come in various forms: shared hosting (affordable, suitable for beginners), VPS (more
control), dedicated (high performance), and cloud hosting (scalable resources).
Reliable hosting also includes uptime guarantees, bandwidth limits, data backups, SSL
certificates for secure HTTPS connections, and technical support. For modern developers,
managed hosting platforms (like Netlify, Vercel, or WP Engine) streamline deployment
with CI/CD, version control, and performance optimization.
c) Web File Formats:
Web file formats refer to the different types of files used to build and operate
websites. These formats fall into several categories: markup files, style sheets,
scripts, multimedia, documents, and fonts.
1. HTML (.html or .htm): HyperText Markup Language forms the backbone of any website. It
structures content using elements like headings, paragraphs, lists, links, tables,
forms, and semantic tags like <article> and <section>.
2. CSS (.css): Cascading Style Sheets define the visual presentation of HTML elements,
including layout, fonts, colors, spacing, and responsive behavior via media queries.
3. JavaScript (.js, .mjs): Used to add interactivity, animations, DOM manipulation, and
dynamic data handling. JavaScript enables client-side functionality like sliders, forms,
and API calls.
4. Images (.jpg, .png, .gif, .svg, .webp): Used for visual content. JPEG is suitable for
photos, PNG for transparency, GIF for animations, SVG for vectors, and WebP for
optimized performance.
5. Audio/Video (.mp3, .ogg, .wav, .mp4, .webm): Embedded using <audio> and <video> tags.
Proper formats ensure cross-browser compatibility.
6. Fonts (.woff, .woff2, .ttf, .otf): Web-safe fonts enhance typography. WOFF and WOFF2
are preferred due to compression and browser support.
7. Documents (.pdf, .docx): Often used for downloads or embedded viewing.
These formats together enable a full-featured web experience. Developers optimize them
to balance quality, compatibility, and performance. Choosing the right format ensures
fast load times and responsive design.
------------------------------------------------------
HOSTING NOTES (Extra Reference)
1. What is Hosting?
Hosting is a service that allows websites to be stored and accessed via the Internet. It
provides storage space, bandwidth, and the necessary technologies to make a site live.
2. Key Components of Hosting:
- Server Space: The physical or cloud-based storage for website files.
- Domain Name: A readable address (like www.example.com) linked to the site.
- IP Address: The actual address of the server.
- DNS: Maps domain names to IP addresses.
- Control Panel: A GUI to manage hosting (e.g., cPanel, Plesk).
3. Types of Hosting:
- Shared Hosting: Affordable and beginner-friendly. Many sites share one server.
- VPS Hosting: Offers virtualized private space with more control.
- Dedicated Hosting: Entire server for one user/site; expensive but powerful.
- Cloud Hosting: Scalable and reliable; pay as you use.
- Managed Hosting: Hosting provider handles technical details (e.g., WordPress hosting).
4. Hosting Services in India:
- Hostinger
- Bluehost India
- GoDaddy India
- BigRock
- HostGator
5. Protocols Used:
- HTTP/HTTPS: Web access protocol.
- FTP/SFTP: File transfer protocols.
- SSH: Secure server access for advanced users.
6. Hosting Considerations:
- Bandwidth: Affects how much data can be transferred.
- Uptime: Reliability of the server (aim for 99.9% or above).
- Storage: Determines how much content can be uploaded.
- Support: Technical help when needed.
- Security: Includes SSL certificates, backups, and firewalls.
7. Deployment Tools:
- FileZilla: Popular FTP client.
- GitHub + Netlify/Vercel: For modern cloud-based deployment.
- cPanel: Common hosting dashboard for managing services.
------------------------------------------------------
