Module 2 (CSS)
Uploaded by
Pranay BhattModule 2 (CSS)
Uploaded by
Pranay BhattModule-2 (CSS)
Q1: What are the benefits of using CSS?
Ans: CSS (Cascading style sheet) is used to presenting attractive web pages.
CSS is used to give various style element and functionalities in webpages like font,
color, image etc.
By using CSS style sheet, you give style once and give same style in other html page
With same elements.
It reduces the file transfer size.
Less use of coding will increase page efficiency and decrease the loading time.
Q2: What are the disadvantages of CSS?
Ans: CSS come in three different level (CSS, CSS1, CSS3) which has resulted confusion
among developers and web browsers.
CSS is compatibility for test because CSS is may not work properly in different
browsers.
CSS is less secure because it is an open text-based system.
Large CSS file can impact on performance of web pages because of large CSS file it
increases the load time and less responsive for user interface.
CSS works differently on different browsers.
Q3: What is the difference between CSS2 and CSS3?
Ans:
CSS2 CSS3
CSS2 have less selector. CSS3 have several new selectors.
For exp: nth-child () selector.
CSS2 have box layout model. CSS3 have flexible box layout model it is
support in different screen size.
CSS2 does not support animation and CSS3 includes support for animation and
transition. transition.
CSS2 have not any media queries. CSS3 introduce the media queries which
allows developers to create flexible layout.
CSS2 support Web-safe fonts. CSS3 support special fonts.
CSS2 launched in 1998. CSS3 launched in 1999.
Supports single blocks only. Supports multi column text blocks.
Q4: Name a few CSS style components?
Ans: Colors:
CSS allows to specify Colors using keywords, RGB/RGBA values. This allows for a
wide range of color choices to be used throughout a web page.
Fonts:
CSS provide a range of font properties, including font-family, font-size, font-weight
font-style etc.
Borders and background:
CSS provides properties for defining the borders and background. This includes
border-style, border-width, border-color, border-style, background color and
background-image.
Transition and animations:
CSS3 supports transition and animation which allows to create animations and
transition.
Examples of giving above CSS style components.
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
h1{
color: red;
}
#p{
background-color: aqua;
color: red;
font-size: 30px;
font-weight: bolder;
}
#border {
height: 150px;
width: 150px;
background-color: aqua;
margin: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div id="p">This is a division tag</div>
<div id="border"></div>
</body>
</html>
OUTPUT:
Q5: What do you understand by CSS opacity?
Ans: CSS opacity allows the level of transparency of an element.
CSS opacity level is between 0 to 1.
Opacity level 0 means fully transparent. and opacity level 1 means fully opaque.
Example of opacity:
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div{
display: flex;
}
.border{
height: 150px;
width: 150px;
background-color: red;
margin: 50px;
display: flex;
opacity: 1;
}
.border1{
height: 150px;
width: 150px;
background-color: red;
margin: 50px;
display: flex;
opacity: 0.5;
}
.border2{
height: 150px;
width: 150px;
background-color: red;
margin: 50px;
display: flex;
opacity: 0.1;
}
</style>
</head>
<body>
<div>
<div class="border"></div>
<div class="border1"></div>
<div class="border2"></div>
</div>
</body>
</html>
Output:
Q6: How can the background color of an element be changed?
Ans: Using ‘Background-color ‘property we can change the background color of an
element.
Example of change background color of an element.
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
.border{
height: 150px;
width: 150px;
background-color: red;
margin: 50px;
}
</style>
</head>
<body>
<div>
<div class="border"></div>
</div>
</body>
</html>
Output:
Q7: How can image repetition of the backup be controlled?
Ans: You can apply Background-repeat property to control the image repetitions.
In Background-repeat is a set of {repeat, repeat-x, repeat-y, no-repeat,}
INPUT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div{
display: flex;
margin: 50px;
}
#img1{
height: 500px;
width: 300px;
background-image: url(image/1_Transforming_Business.jpg);
background-size: 200px;
}
#img2{
height: 500px;
width: 300px;
background-image: url(image/1_Transforming_Business.jpg);
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<div id="img1"></div>
<div id="img2"></div>
</div>
</body>
</html>
OUTPUT:
Q8: What is the use of the background-position property?
Ans: Background-position in CSS is used to specify the starting position of back-ground
image.
It determines how the image positioned horizontally or vertically.
left, center, right (for horizontal positioning)
top, center, bottom (for vertical positioning)
Example of background-position.
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div{
display: flex;
margin: 50px;
}
#img1{
height: 500px;
width: 300px;
background-image: url(image/1_Transforming_Business.jpg);
background-size: 200px;
background-color: aqua;
background-repeat: no-repeat;
background-position: bottom;
}
</style>
</head>
<body>
<div>
<div id="img1"></div>
<div id="img2"></div>
</div>
</body>
</html>
Output:
Q9: Which property controls the image scroll in the background?
Ans: The property that controls the image scroll in back-ground called as
Background-attachment.
It determines whether a background image scroll with content or remains fixed in
place as the user scroll through the page.
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
margin: 50px;
}
#img1{
height: 200px;
width: 300px;
background-image: url(image/1_Transforming_Business.jpg);
background-size: cover;
background-attachment: local;
}
</style>
</head>
<body>
<div>
<div id="img1"></div>
<div id="img2"></div>
</div>
</body>
</html>
Output:
Q10: Why should background and color be used as separate
properties?
Ans: It increases the legibility of the style sheets. The background property is a complex
property in CSS. If it is combined with color, the complexity will further increase.
Color is inherited but background is not.
Background has many properties like background-color, background-repeat,
background-size etc.
Color property is used for giving color in font.
Example of declaring background and color
div {
background-image: linear-gradient (to right, red, blue);
color: red;
}
Q11: How to center block elements using CSS1?
Ans: Using many methods to center the block elements.
1.write code in <center> tag </center> to center element.
2.Text-align: using text-align center to center the block element.
Example of center block element.
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
#one1{
background-color: red;
text-align: center;
}
#one3{
background-color: aqua;
}
</style>
</head>
<body>
<h1 id="one1">Hello World</h1>
<center>
<h1 id="one2">This is a heading</h1>
</center>
</body>
</html>
Output:
Q12: How to maintain the CSS specifications?
Ans: World wide web consortium (w3c) maintain the CSS specification.
1.Use valid CSS: Ensure that your CSS code writing in the valid CSS format.
Validate your CSS code using the tool like the W3C validation service.
2.Browser compatibility: Test your code with different browser and platform to
ensure compatibility.
3.Test and debug: Regularly test your CSS code with different browsers and devices.
Q13: What are the ways to integrate CSS as a web page?
Ans: There are three ways to integrate CSS as a web page.
1. Inline CSS
2. Internal CSS
3. External CSS
(1) Inline CSS: Inline CSS placing CSS directly within an html element’s ‘style’
attributes.
Example:
<p style=” color: red; font-size: 20px;”>This is a paragraph</p>
(2) Internal CSS: Internal CSS defined within the ‘<style> tags in the head section of
an html document.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
#one1{
background-color: red;
text-align: center;
}
#one3{
background-color: aqua;
}
</style>
</head>
<body>
<h1 id="one1">Hello World</h1>
<h1 id="one2">This is a heading</h1>
</body>
</html>
(3) External CSS: External CSS defining with the separate CSS file. And linking it to
an html document using the ‘<link>’ tag.
Example:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="one1">Hello World</h1>
<h1 id="one2">This is a heading</h1>
</body>
</html>
CSS:
#one1{
background-color: red;
text-align: center;
}
#one3{
background-color: aqua;
}
OUTPUT:
Q14: What is embedded style sheet?
Ans: Embedded style sheet also known as internal CSS.
It defining CSS rules directly within the ‘<style>’ tags in the
‘<head>’ section of an HTML file.
With an embedded style sheet, you define the styles that apply to
specific HTML elements or class within the same document.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
#one1{
background-color: red;
text-align: center;
}
#one3{
background-color: aqua;
}
</style>
</head>
<body>
<h1 id="one1">Hello World</h1>
<h1 id="one2">This is a heading</h1>
</body>
</html>
Q15: What are the external style sheets?
Ans: External CSS defining with the separate CSS file. And linking it to an html document
using the ‘<link>’ tag.
Example:
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="one1">Hello World</h1>
<h1 id="one2">This is a heading</h1>
</body>
</html>
CSS:
#one1{
background-color: red;
text-align: center;
}
#one3{
background-color: aqua;
OUTPUT:
Q16: What are the advantages and disadvantages of using external
style sheets?
Ans: Advantages of external stylesheets:
1. Separation of concerns: External stylesheet promote a clear separation between
the html and CSS of a web page.
2. Reusability: External style sheets can be used across multiple html pages.by
linking the same CSS file to different documents.
3. Collaboration and maintenance: Using external style sheets allow multiple
developers to work on the HTML and CSS separately.
Disadvantages of external stylesheets:
1.Additional HTTP Request: When using external stylesheet, the browser needs to
make an additional HTTP request to retrieve the CSS file. This can increase the initial
page load time.
2.Dependency on file: External style sheet require a separate CSS file to be present
and accessible .if the file is missing and the link is incorrect, the style will not be
applied correctly.
Q17: What is the meaning of the CSS selector?
Ans: CSS selector is used to target specific html element that you want to style or apply.
Selector can target element in various types like class, id, tags.
Example to declare the selector in CSS.
1.Element selector: it targets all element in html.
2.Class selector: it targets all the class of elements and apply same style on all class
given by you. Class selector is declared with ‘.’ Dot.
3.Id selector: it targets element based on their unique id attribute. it is declared with
‘#’ hash.
4.Universal selector: it targets all html code. And apply style in all html code.
5.group selector: it targets two or more id and class and elements.
Declaration of selectors
#one-1{
Background-color: aqua;
Font-size: 20px;
}
.one {
Height: 200px;
Background-color: red;
}
a{
text-decoration: none;
}
Q18: What are the media types allowed by CSS?
Ans: CSS allows you to specify different types of media using media types.
Media types represent different output device or media types.
The following media types allowed by CSS.
1. All: This is the default media type it is applies to all devices.
2. Screen: This media type is used for computer screen, tablet and smart phones.
Example of media types
@media screen and width(480px) {
body {
Font-size: 20px;
Color: aqua;
}
}
Screen sizes for CSS media
1. 320-480 (smaller smartphones)
2. 481-768 (Tablet and larger smartphones)
3. 769-1279 (Laptop and desktops)
4. 1280+ (Larger desktops)
Q19: What is the rule set?
Ans: Rule set contains selector and declaration of one or more property and value.
The rule set is main building block of CSS style sheet.
Rule set consists of a set of rules that determine how elements in a document should
be displayed.
The rule set is also known as Css-rule or style-rule.
Rule set structure
Selector {
Property: value;
}
Q20: Create Layouts
Ans: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
/* this is a box */
.one {
height: 300px;
width: 350px;
border: 2px solid gray;
background-color: aqua;
margin-left: 50px;
}
/* this is a main div of all box */
#m1 {
margin-top: 50px;
display: flex;
justify-content: center;
}
/* this is a grey thumbnail */
.two {
height: 170px;
background-color: rgb(93, 93, 93);
font-size: 25px;
color: white;
box-sizing: border-box;
text-align: center;
padding-top: 70px;
.three {
height: 130px;
background-color: white;
text-align: justify;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
box-sizing: border-box;
}
/* this is a button */
button {
margin-top: 20px;
width: 60px;
}
</style>
</head>
<body>
<div id="m1">
<!-- box 1 -->
<div class="one">
<div class="two">Thumbnail</div>
<div class="three">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Fugiat quis vel enim possimus
ea laudantium dolorem nulla quibusdam sunt.
<button>View</button><button>Edit</button> </div>
</div>
<!-- box 2 -->
<div class="one">
<div class="two">Thumbnail</div>
<div class="three">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Fugiat quis vel enim possimus
ea laudantium dolorem nulla quibusdam sunt.
<button>View</button><button>Edit</button></div>
</div>
<!-- box 3 -->
<div class="one">
<div class="two">Thumbnail</div>
<div class="three">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Fugiat quis vel enim possimus
ea laudantium dolorem nulla quibusdam sunt.
<button>View</button><button>Edit</button></div>
</div>
</div>
<div id="m1">
<!-- box 4 -->
<div class="one">
<div class="two">Thumbnail</div>
<div class="three">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Fugiat quis vel enim possimus
ea laudantium dolorem nulla quibusdam sunt.
<button>View</button><button>Edit</button></div>
</div>
<!-- box 5 -->
<div class="one">
<div class="two">Thumbnail</div>
<div class="three">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Fugiat quis vel enim possimus
ea laudantium dolorem nulla quibusdam sunt.
<button>View</button><button>Edit</button></div>
</div>
<!-- box 6 -->
<div class="one">
<div class="two">Thumbnail</div>
<div class="three">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Fugiat quis vel enim possimus
ea laudantium dolorem nulla quibusdam sunt.
<button>View</button><button>Edit</button></div>
</div>
</div>
</body>
</html>
OUTPUT:
You might also like
- Css Stands For Cascading Style Sheets: Styling Can Be Added To HTML Elements in 3 WaysNo ratings yetCss Stands For Cascading Style Sheets: Styling Can Be Added To HTML Elements in 3 Ways24 pages
- Computer Programming Module 2 (.Net Technology) 2No ratings yetComputer Programming Module 2 (.Net Technology) 24 pages
- 1) What Is CSS?: Backward Skip 10splay Videoforward Skip 10S O O O O ONo ratings yet1) What Is CSS?: Backward Skip 10splay Videoforward Skip 10S O O O O O14 pages
- Unit 3 - Internet and Web Technology - UnlockedNo ratings yetUnit 3 - Internet and Web Technology - Unlocked18 pages
- css_97c32e61-16c3-44c8-8fd9-ef994cdfde6cNo ratings yetcss_97c32e61-16c3-44c8-8fd9-ef994cdfde6c109 pages
- Notes Internet and Web Technology Iwt Unit 3No ratings yetNotes Internet and Web Technology Iwt Unit 316 pages
- Css Stands For Cascading Style Sheets: Styling Can Be Added To HTML Elements in 3 WaysCss Stands For Cascading Style Sheets: Styling Can Be Added To HTML Elements in 3 Ways
- 1) What Is CSS?: Backward Skip 10splay Videoforward Skip 10S O O O O O1) What Is CSS?: Backward Skip 10splay Videoforward Skip 10S O O O O O