Scribd
Upload
24 views7 pages

Exp 3

The document outlines an experiment to develop a webpage using CSS and HTML, with the learning objective being for students to implement CSS proficiently. It provides information on various CSS properties for text formatting and styling as well as font properties. Code examples are given to demonstrate how to create a webpage and apply CSS styles for text, fonts, and other elements.

Uploaded by

shashank rai
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
24 views7 pages

Exp 3

The document outlines an experiment to develop a webpage using CSS and HTML, with the learning objective being for students to implement CSS proficiently. It provides information on various CSS properties for text formatting and styling as well as font properties. Code examples are given to demonstrate how to create a webpage and apply CSS styles for text, fonts, and other elements.

Uploaded by

shashank rai
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/ 7

Experiment 03

Aim:- To develop a webpage using CSS and HTML


Learning Objective: Students should be able to implement CSS proficiently
Tools:-Any browser, Sublime, Notepad++, VSCode
Theory:
CSS:-

Cascading Style Sheets is a style sheet language used for describing the presentation of a document
written in a markup language such as HTML or XML. CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript.

Text Properties
Property Description Values

color Sets the color of a text RGB, hex, keyword

line-height Sets the distance between lines normal, number, length, %

letter-spacing Increase or decrease the space normal, length


between characters

text-align Aligns the text in an element left, right, center, justify

text Adds decoration to text none, underline, overline,


decoration line through

text-indent Indents the first line of text in an element length, %

text- Controls the letters in an element none, capitalize, uppercase,


transform lowercase
Font Properties
Property Description Values

font Sets all the font properties font-style, font-variant, font-weight, font-
in one declaration size/line height, font-family, caption, icon,
menu, message box, small-caption, status-bar,
inherit

font-family Specifies the font family family-name, generic-family, inherit


for text

font-size Specifies the font size of xx-small, x-small, small, medium, large, x-large,
text xx large, smaller, larger, length, %, inherit

font-style Specifies the font style normal, italic, oblique, inherit


for text

font-variant Specifies whether or not a normal, small-caps, inherit


text should be displayed
in a small-caps font

font-weight Specifies the weight of a normal, bold, bolder, lighter,


font 100, 200, 300, 400, 500, 600, 700, 800, 900,
inherit Careful, many of these are not
supported!

Result and discussion:

Code:-
 Create a webpage using CSS

<meta name="viewport" content="width=device-


<!DOCTYPE html> width, initial-scale=1.0">
<html lang="en"> <title>Faq JavaScript</title>
<head> <link rel="stylesheet" href="main.css">
<meta charset="UTF-8"> <link rel="stylesheet"
<meta http-equiv="X-UA-Compatible" href="https://cdnjs.cloudflare.com/ajax/libs/font-
content="IE=edge"> awesome/6.0.0-beta2/css/all.min.css">
<style> text-align: center;
@import }
url('https://fonts.googleapis.com/css2?family=Baloo+ .content-accordion {
Da+2:wght@600&family=Noto+Sans:wght@400;500& margin-top: 35px;
family=Oswald&family=Poppins&family=Roboto+Slab: margin-right: 50px;
wght@300&family=Source+Code+Pro:wght@300&dis
play=swap'); }
*, .question-answer {
*::before, width: 100%;
*::after { border-bottom: 1px solid #e8e8e8;
margin: 0; }
padding: 0; .question {
box-sizing: border-box; display: flex;
justify-content: space-between;
}
html { }
font-size: 12px; .accordion-img{
position: relative;
} width: 320px;
body {
min-height: 100vh; }
font-family: 'Poppins',sans-serif; .title-question {
background: #efefef; margin: 1.4rem 0rem;
display: flex; font-size: 1.2rem;
justify-content: center; font-weight: 500;
color: #000;

} }
.container{ .question-btn {
position: relative; font-size: 1.5rem;
background: #fff; background: transparent;
margin-top: 50px; border-color: transparent;
margin-bottom: 30px; cursor: pointer;
border-radius: 10px; }
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); .up-icon {
display: none;
}
.accordion{ }
position: relative; .answer {
width: 350px; font-size: 1.2rem;
margin-left: 40px; line-height: 1.8rem;
} display: none;
.title{ }
margin-top: 20px; .show-text .answer {
font-size: 2rem; display: block;
<div class="Question-answer">
<div class="Question">
} <h3 class="title-question">
.show-text .up-icon{ What URLs can be used to access
display: inline; DigiSafe?
</h3>
} <button class="question-btn">
@media screen and (min-width:992px) { <span class="up-icon">
.accordion { <i class="fas fa-chevron-up">
width: 920px;
height: 0; </i>
display: flex; </span>
} <span class="down-icon">
.accordion-img { <i class="fas fa-chevron-down">
position: relative;
width: 420px; </i>
top: 88px; </span>
</button>
} </div>
.question-answer { <div class="answer">
width: 380px; <p>DigiSafe can be accessed at
} https://www.digilocker.gov.in/</p>
</div>
.container-accordion {
margin-top: 85px; </div>
<div class="Question-answer">
} <div class="Question">
.title { <h3 class="title-question">
margin-top: 50px; What security features are
font-size: 1.5rem; implemented in DigiLocker? Is it safe to put my data
on DigiSafe platform? ?
} </h3>
} <button class="question-btn">
</style> <span class="up-icon">
</head> <i class="fas fa-chevron-up">
<body>
<div class="container"> </i>
<h1 class="title"> </span>
Frequently Asked Question <span class="down-icon">
</h1> <i class="fas fa-chevron-down">
<main class="accordion">
<div class="faq-img"> </i>
<img src="images/faq.png"> </span>
</div> </button>
<div class="content-accordion"> </div>
<div class="answer"> </i>
<p>DigiSafe is completely safe and easy </span>
to use.We do care about your privacy and take all </button>
precautionary measures to protect your data</p> </div>
</div> <div class="Question-answer">
<div class="Question-answer"> <div class="Question">
<div class="Question"> <h3 class="title-question">
<h3 class="title-question"> What is an OTP?
<div class="Question-answer">
<div class="Question"> </h3>
<h3 class="title-question"> <button class="question-btn">
How can I sign up for <span class="up-icon">
Digisafe? <i class="fas fa-chevron-up">
</h3>
<button class="question-btn"> </i>
<span class="up-icon"> </span>
<i class="fas fa-chevron- <span class="down-icon">
up"> <i class="fas fa-chevron-down">

</i> </i>
</span> </span>
<span class="down-icon"> </button>
<i class="fas fa-chevron- </div>
down"> </div>
<p>OTP is an one time password which
</i> is generated by digisafe and sent to your registered
</span> mobile number.It is only valid for 10 minutes</p>
</button> </div>
</div> <div class="Question-answer">
<div class="answer"> <div class="Question">
<p>DigiSafe sign in is very easy. <h3 class="title-question">
You have to enter your mobile or aadhar number then <div class="Question-answer">
you will receive OTP via sms followed by setting of <div class="Question">
authentication pin then your digi safe account will be <h3 class="title-question">
created</p> What are issued documents
</div> and what are uploaded documents?
</h3> </h3>
<button class="question-btn"> <button class="question-
<span class="up-icon"> btn">
<i class="fas fa-chevron-up"> <span class="up-icon">
<i class="fas fa-chevron-
</i> up">
</span>
<span class="down-icon"> </i>
<i class="fas fa-chevron-down"> </span>
<span class="down-icon">
<i class="fas fa-chevron- const questions =
down"> document.querySelectorAll('.question-answer');

</i> questions.forEach(function(question) {
</span> const btn = question.querySelector('.question-btn');
</button> btn.addEventListener("click", function() {
</div> questions.forEach(function(item) {
<div class="answer"> if (item !== question) {
<p>Issued documents are E- item.classList.remove("show-text");
documents which is issued electronically by }
government and URI of the document is available in })
digisafe section</p> question.classList.toggle("show-text");
</div> })
</div> })
</div> </script>
</main>
</div> </body>
<script> </html>
OUTPUT

Output:

Learning Outcomes: Students should have the ability to


LO1: Understand basic CSS code
LO2: Implement multiple CSS properties into their code
Course Outcomes: Upon completion of the course students will be able to understand how to
use CSS and also use various different CSS properties.
Conclusion:

We understood how to use CSS and implemented it to make a basic working site using
variousdifferent CSS properties.

For Faculty Use


Correction Formative Timely Attendance /
Parameters Assessment completion Learning
of Practical Attitude

Marks
Obtained

You might also like