Scribd
Upload
124 views

Practical Elements (CSS)

CSS is a language used to style and layout web pages. It allows control over the presentation of HTML elements including color, layout, fonts and more. There are different types of CSS including external, internal, and inline styles. CSS modules include selectors, box model, backgrounds/borders, text effects, transformations, animations and more. CSS3 introduced new graphics capabilities and properties not available in prior versions. Flexbox is a CSS module that allows flexible responsive layouts without floats or positioning.

Uploaded by

Malik Salman
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
124 views

Practical Elements (CSS)

CSS is a language used to style and layout web pages. It allows control over the presentation of HTML elements including color, layout, fonts and more. There are different types of CSS including external, internal, and inline styles. CSS modules include selectors, box model, backgrounds/borders, text effects, transformations, animations and more. CSS3 introduced new graphics capabilities and properties not available in prior versions. Flexbox is a CSS module that allows flexible responsive layouts without floats or positioning.

Uploaded by

Malik Salman
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Q #1) What is CSS?

Answer: CSS outline the style of an HTML webpage, it is a language by which we can set
the behavior of an HTML webpage. It describes how the HTML content will be shown on
screen.
CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading
Style Sheet.

Q #2) Name all the modules which are used in the current version of CSS.
Answer: There are several modules in CSS as stated below:
 Selectors
 Box Model
 Backgrounds and Borders
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface.
Q #3) Distinguish between CSS2 and CSS3.
Answer:
There are several differences between CSS2 and CSS3.
 CSS3 is divided into two various sections which are called a module. Whereas in
CSS2 everything accedes into a single document with all the information in it.
 CSS3 modules are supported almost on every browser and on the other hand
modules of CSS and CSS2 are not supported in every browser.
 In CSS3 we will find that many graphics related characteristics have been introduced
like “Border-radius or box-shadow, flexbox.
 In CSS3, a user can precise multiple background images on a webpage by using
properties like background-image, background-position, and background-repeat
styles.
Q #4) Cite different types of CSS.
Answer: There are three types of CSS as mentioned below.
 External – These are written in separate files.
 Internal – These are cited at the top of the web page code document.
 Inline – These are written right next to the text.
Q #5) Why is the external style sheet useful?
Answer: External style sheet is very useful as we write all the styling codes in a single file
and it can be used anywhere by just referencing the link of that external style sheet file.
So if we do any changes in that external file, then the changes can also be observed on the
webpage. So we can say that it is very useful and it makes your work easy while working on
larger files.

Q #6) What are the uses of an embedded style sheet?


Answer: Embedded style sheet gives us the privilege to define styles in one place in an
HTML document.
We can generate multiple classes using an embedded style sheet to use on multiple tag
types of a web page and also there is no extra downloading required for importing the
information.
Q #7) How to use CSS selector?
Answer: By using the CSS selector, we can choose the content which we want to style so
that we can say that it is a bridge between the style sheet and the HTML files.
The syntax for CSS selector is “select” HTML elements created on their id, class, type, etc.

Q #8) Explain the concept of Tweening.


Answer: Tweening is the process in which we create intermediate frames between two
images to get the appearance of the first image which develops into the second image.
It is mainly used for creating animation.

Q #9) Define CSS image scripts.


Answer: CSS image scripts are a group of images that are placed into one image.
It reduces the load time and request number to the server while projecting multiple images
into a single web page.

Q #10) Explain the term Responsive web design.


Answer: It is a method in which we design and develop a web page according to the user
activities and conditions which are based on various components like the size of the screen,
portability of the web page on the different devices, etc.
Hence it is done by using different flexible layouts and grids.

Q #11) How to align image vertically in a division that spans vertically on the whole
webpage?

Answer: It can be done by using the syntax verticle-align: middle in the <div1> element and
even we can bind the two text spans around with another span and after this, we have to
use verticle-align: middle in the content #icon.
Q #12) What is the difference between padding and margin?
Answer: In CSS, the margin is the property by which we can create space around
elements. We can even create space to the exterior defined borders.
In CSS we have margin property as follows:
 margin-top
 margin-right
 margin-bottom
 Margin-left
Margin property has some defined values as shown below.
 Auto – using this property browser calculates the margin.
 Length – It sets the margin values in px,pt,cm etc.
 % – It sets the width % of the element.
 Inherit – By this property we can inherit the margin property from the parent
element.
In CSS, padding is the property by which we can generate space around an element’s
content as well as inside any known border.

CSS padding also has properties like,


1. Padding-top
2. Padding-right
3. Padding-bottom
4. Padding-left
Negative values are not allowed in padding.

div {

padding-top: 60px;

padding-right: 40px;

padding-bottom: 50px;

padding-left: 70px;

Q #13) What is the use of the Box Model in CSS?


Answer: In CSS, the box model is a box that binds all the HTML elements and it includes
features like margins, border, padding, and the actual content.
By using a box model we will get the authority to add the borders all around the elements
and we can also define the space between the elements.

Q #14) How can we add icons to the web page?


Answer: We can add icons to the HTML webpage by using an icon library like font-
awesome.
We have to add the name of the given icon class to any inline HTML element. (<i> or
<span>) . Icons in the icon libraries are scalable vectors that can be customized with CSS.

Q #15) Write all the position states used in CSS.


Answer: In CSS, there are four position states as stated below:
 Static(default)
 Relative
 Fixed
 absolute
Q #16) What are navigation bars in CSS?
Answer: By using navigation bars we can make an ordinary HTML page into a user-specific
and more dynamic web page.
Basically, it is a list of links, hence use of <ul> and <li> elements makes the perfect sense.

ul {

list-style-type: none;

margin: 0;

padding: 0;

Q #17) What are the differences between relative and absolute in CSS?
Answer: The main difference between relative and absolute is that “relative” is used for the
same tag in CSS and it means that if we write the left:10px then the padding will shift to
10px in the left while absolute is totally relative to the non-static parent.
It means if we write left:10px then the result will be 10px far from the left edge of the parent
element.

Q #18) Differentiate between inline and block element.


Answer: Inline element does not have an element to set width and height and also it does
not have the line break.
Example: em, strong, etc.
Block element specification:
 They do have the line break.
 They define the width by setting a container and also allow setting height.
 It can also contain an element that occurs in the inline element.
Example:
width and height
max-width and max-height
min-width and min-height
hi (i=1-6)- heading element
p- Paragraph element.

Q #19) Differentiate between the ID and class.


Answer: Both id and class is been used in HTML and assigns the value from CSS.
Please find below the differences:

The ID is a kind of element which uniquely assigns a name to a particular element
whereas class has an element with a certain set of properties that can be used for
the complete block.
 The id can be used as an element because it can uniquely identify it whereas class
is also defined to block the elements and applies too many tags wherever it is used.
 Id provides the restriction to use its properties to one specific element whereas in
class the inheritance is applied to a specific block or group of the element.
 Q #20) What is CSS flexbox?
 Answer: It allows you to design a flexible responsive layout structure without using
any float or positioning property of CSS. To use CSS flexbox you need to define a
flex container initially.
<!DOCTYPE html>

<html>

<head>

<style>

.flex-container {

display: flex;

background-color: #f4b042;

.flex-container > div {

background-color: #d60a33;

margin: 10px;

padding: 20px;

font-size: 30px;

</style>

</head>

<body>

<div class="flex-container">
<div>1</div>

<div>2</div>

<div>3</div>

</div>

<p> Example of <em>flex</em>box.</p>

</body>

</html>

You might also like