Scribd
Upload
23 views9 pages

Exp 2

Uploaded by

dev606033
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views9 pages

Exp 2

Uploaded by

dev606033
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Experiment No.

– 2

Date of Performance: 12/08/2024

Date of Submission: 26/08/2024

Program Execution/
formation/ Timely
Viva Experiment Sign with
correction/ Submission
(03) Total (10) Date
ethical practices (01)
(06)

Experiment No. 2

2.1 Aim:- Write a program to demonstrate the appropriate CSS tags to format data on a
webpage(SyntaxInclusion,Color,Background,Fonts,Tables,lists,CSS3selectors,Pseudoclasses,
Pseudo Elements).

2.2 Course Outcome: Apply JavaScript to add functionality to web pages.

2.3 Learning Objectives: To learn the JavaScript functionality to web pages using CSS tags

2.4 Requirement: Code Editors with CSS Support.

2.5 Related Theory:

CSS Basics

1. Syntax and Inclusion:


○ Syntax: CSS is written as selector { property: value; }.
○ Inclusion: CSS can be included inline, internally (within <style> tags in the
<head>), or externally (via an external stylesheet).
2. Color:
○ Colors can be applied using properties like color for text and background-
color for backgrounds. Colors can be specified in various formats: named
colors, HEX, RGB, RGBA, HSL, HSLA.
3. Background:
○ The background property can be used to set background colors, images,
positions, and other related properties.
4. Fonts:
○ Font styles can be customized using properties like font-family, font-size,
font-weight, font-style, and font-variant.
5. Tables:
○ Tables can be styled with properties such as border, padding, text-align,
background-color, and more.
6. Lists:
○ List styles can be modified using properties like list-style-type, list-style-
position, and list-style-image.
7. CSS3 Selectors:
○ Advanced selectors allow for more precise selection of elements. Examples
include attribute selectors, pseudo-classes, and pseudo-elements.
8. Pseudo-classes:
○ Pseudo-classes target elements based on their state, such
as :hover, :focus, :nth-child(n), :first-child, etc.
9. Pseudo-elements:
○ Pseudo-elements target specific parts of elements, such
as ::before, ::after, ::first-line, and ::first-letter.

2.6 Procedure:

Procedure for Creating a Web Page with CSS Styling


Set Up Project Structure:

● Create a project folder.


● Inside the folder, create an index.html file and a styles.css file.

Write HTML Content:

● Open index.html.
● Add basic HTML structure including <!DOCTYPE html>, <html>, <head>, and
<body>.
● Include essential tags such as headings, paragraphs, lists, tables, and links.

Link CSS File:


Inside the <head> section of index.html, link the external CSS file using:
html
Copy code
<link rel="stylesheet" href="styles.css">
Add CSS Styling:

● Open styles.css.
● Write CSS rules to style different HTML elements, including setting colors,
backgrounds, fonts, tables, lists, and more.

Use CSS Selectors and Pseudo-classes:

● Apply CSS3 selectors to target specific elements or attributes.


● Use pseudo-classes to style elements based on their state (e.g., :hover).

Apply Pseudo-elements:

● Use pseudo-elements like:: before and ::after to add content or styles before or after
elements.
2.7 Program and Output:

Code of resume:
Output:
Code of hospital registration form:
Output:
2.8 Conclusion:

Hence, we have understood how to demonstrate the appropriate CSS tags to format data on a webpage through
a program.

2.9 Questions:

MCQ 1:What is the purpose of using media queries in responsive web design?

A. To apply different styles for different screen sizes

B. To embed videos in the web page

C. To enhance the performance of the website

D. To optimize images for faster loading

Correct answer: A

MCQ 2:Which unit is commonly used to create fluid layouts in responsive web design?

A. Pixels (px)

B. Inches (in)

C. Percentages (%)

D. Points (pt)

Correct answer: C

MCQ 3:Which of the following properties helps make images responsive?

A. width: 100%;

B. height: auto;

C. max-width: 100%;

D. All of the above

Correct answer: D

MCQ 4:What does the viewport meta tag do in responsive web design?

A. Sets the color of the viewport

B. Defines the width and scaling of the viewport

C. Embeds multimedia content

D. Sets the font size for mobile devices

Correct answer: B
MCQ 5: Which CSS framework is widely used for creating responsive web designs?

A. Django

B. Bootstrap

C. Flask

D. React

Correct answer: B

You might also like