Q1. What is Embedded Style Sheet?

Ans.
Embedded style sheet is CSS code written within the <style> tag in
the head section of an HTML document.
• Embedded style sheet is used to define styles for a single HTML
document.
• It is written within the <style> tag in the head section of the
HTML document.
• Styles defined in the embedded style sheet will only apply to the
HTML document it is written in.
View 1 answer

Q2. How to centre 3 div vertically and horizontally using css

Ans.
To center 3 divs vertically and horizontally, use flexbox and align-
items/justify-content properties.
• Wrap the 3 divs in a parent container
• Set the parent container's display property to flex
• Set the parent container's align-items and justify-content
properties to center
Add your answer

Q3. What are pseudo classes and pseudo elements in CSS?

Ans.
Pseudo classes and pseudo elements are CSS selectors that target
specific states or parts of an element.
 • Pseudo classes target specific states of an element, such as
:hover, :active, and :focus.
• Pseudo elements target specific parts of an element, such as
::before and ::after.
• Pseudo classes and pseudo elements are denoted by a colon (:)
or double colon (::) preceding the selector.
• They can be used to add special effects, such as changing the
color of a link when it is hovered ov...read more
Add your answer

Q4. Difference between display: inline, display: block and

display: inline-block in CSS?
Ans.
display: inline, block and inline-block are CSS properties that define
how an element is displayed on a webpage.
• display: inline - element is displayed inline with the text and
other inline elements. It does not start on a new line.
• display: block - element is displayed as a block-level element,
starting on a new line and taking up the full width available.
• display: inline-block - element is displayed inline with the text
and other inline elements, but can have a width and heigh...read
more
Add your answer

Are these interview questions helpful?

Yes
No
Q5. Create a responsive template using pure CSS(flex, grid,
media query) without using any library or framework!
Ans.
Creating a responsive template using pure CSS without any library or
framework.
• Start with a mobile-first approach
• Use media queries to adjust layout for different screen sizes
• Utilize flexbox and/or grid for layout and positioning
• Test on multiple devices and browsers
Add your answer

Q6. What is css felxbox and attributes

Ans.
CSS Flexbox is a layout module that helps in creating flexible and
responsive layouts.
• Flexbox is used to align and distribute space among items in a
container.
• It has properties like display, flex-direction, justify-content,
align-items, and flex-wrap.
• Flexbox is widely used in modern web development for creating
responsive designs.
• Example: display: flex; flex-direction: row; justify-content:
center; align-items: center;
View 1 answer
Share interview questions and help millions of jobseekers
Share interview questions

Q7. how do you display different color in atable using css for odd
even rows
Ans.
To display different colors in a table using CSS for odd and even
rows, you can use the :nth-child() selector.
• Use the :nth-child(odd) selector to target odd rows and apply a
specific color using the background-color property.
• Use the :nth-child(even) selector to target even rows and apply a
different color using the background-color property.
• For example, you can use CSS code like this: tr:nth-child(odd) {
background-color: #f2f2f2; } tr:nth-child(even) { background-
color: #fff...read more
Add your answer

Q8. Create dumic website

Ans.
Creating a dummy website involves designing and developing a basic
website for testing purposes.
• Choose a simple layout and design for the website
• Include placeholder content and images
• Ensure basic functionality like navigation and links work
• Use dummy data for testing purposes
 • Consider using a website builder or coding from scratch
Add your answer

Q9. What is the difference between absolute and fixed positioning

in CSS?
Ans.
Absolute positioning is relative to the nearest positioned ancestor,
while fixed positioning is relative to the viewport.
• Absolute positioning is relative to the nearest positioned
ancestor.
• Fixed positioning is relative to the viewport.
• Absolute positioned elements are removed from the normal
document flow.
• Fixed positioned elements stay in the same position even when
the page is scrolled.
Add your answer

Frequently asked in
Housing.com
Q10. What is the difference between display as flex and display as
grid?
Ans.
Flexbox is a one-dimensional layout model, while Grid is a two-
dimensional layout model.
• Flexbox is best suited for arranging items in a single row or
column.
 • Grid is ideal for creating complex layouts with rows and
columns.
• Flexbox provides flexibility in distributing space among items.
• Grid allows precise control over the placement and sizing of
items.
• Flexbox is simpler and easier to understand, while Grid offers
more advanced features.
View 1 answer

Q11. If we give both id and class to an element which one's style

will apply first
Ans.
The style of the id will apply first before the style of the class.
• IDs have higher specificity than classes, so the style of the id
will take precedence over the style of the class.
• If both id and class have conflicting styles, the style of the id
will be applied.
• Example: <div id='uniqueId' class='commonClass'>...</div> -
the style of 'uniqueId' will be applied.
View 1 answer

Q12. What are the version of HTML and CSS ?

Ans.
HTML has versions like HTML4, HTML5, XHTML. CSS has
versions like CSS1, CSS2, CSS3.
• HTML versions include HTML4, HTML5, and XHTML
• CSS versions include CSS1, CSS2, and CSS3
 • HTML5 is the latest version with new features like semantic
elements and multimedia support
• CSS3 introduced new features like animations, transitions, and
media queries
Add your answer

Frequently asked in
IDC Technologies
Q13. What is HTML, PHP and CSS
Ans.
HTML, PHP, and CSS are programming languages used for creating
and designing websites.
• HTML (Hypertext Markup Language) is used for creating the
structure and content of web pages.
• PHP (Hypertext Preprocessor) is a server-side scripting
language used for creating dynamic web pages.
• CSS (Cascading Style Sheets) is used for styling and formatting
the layout of web pages.
• Example: HTML is used to create headings, paragraphs, and
lists on a webpage.
• Example: PHP is used to interact wi...read more
Add your answer

Q14. how it differs from HTML ?

Ans.
CSS is used to style the appearance of HTML elements on a webpage.
• CSS is used to control the layout and design of HTML elements.
 • HTML is used to structure the content of a webpage, while CSS
is used to style it.
• CSS allows for more advanced styling options such as
animations, transitions, and responsive design.
• HTML uses tags to define the structure of a webpage, while
CSS uses selectors to target specific elements for styling.
• CSS can be applied internally within an HTML documen...read
more
Add your answer

Frequently asked in
TCS
Q15. Difference between display-block and inline-block
Ans.
display-block takes up full width, while inline-block only takes up
necessary width.
• display-block elements start on a new line and take up the full
width available, like <div>
• inline-block elements do not start on a new line and only take up
as much width as necessary, like <span>
• display-block elements can have margin and padding applied on
all sides, while inline-block elements only have margin and
padding applied horizontally
Add your answer

Q16. write the css box model?

Ans.
The CSS box model describes the layout and sizing of elements on a
web page.
• The box model consists of content, padding, border, and margin.
• Content refers to the actual content of the element, such as text
or images.
• Padding is the space between the content and the border.
• Border is a line that surrounds the padding and content.
• Margin is the space outside the border, separating the element
from other elements.
• The width and height of an element are calculated by adding the
conten...read more
Add your answer

Q17. What is CSS and How we can add with HTML?

Ans.
CSS is a styling language used to control the look and feel of a
website. It can be added to HTML using the <style> tag or external
CSS files.
• CSS stands for Cascading Style Sheets
• It is used to define the layout, colors, fonts, and other visual
aspects of a website
• CSS can be added to HTML using the <style> tag within the
<head> section or by linking an external CSS file using the
<link> tag
• Inline CSS can also be added directly to HTML elements using
the style attribute
• Example:...read more
Add your answer
Q18. difference between margin and padding?
Ans.
Margin is the space outside an element, while padding is the space
inside an element.
• Margin is used to create space between elements, while padding
is used to create space within an element.
• Margin affects the positioning of an element in relation to other
elements, while padding affects the content inside an element.
• Negative margin can be used to overlap elements, while
negative padding is not possible.
• Margin is transparent, while padding inherits the background
color of the ...read more
View 2 more answers

Q19. Tell me about id selector in CSS

Ans.
ID selector is used to select an element with a specific ID attribute in
CSS.
• ID selector is denoted by '#' followed by the ID name.
• ID should be unique on a page.
• ID selector has higher specificity than class selector.
• Example: #header { color: blue; }
Add your answer

Q20. What are the different attributes of the CSS position property?
Ans.
The CSS position property defines the positioning method of an
element.
• Static: Default position, elements are positioned according to the
normal flow of the document.
• Relative: Positioned relative to its normal position.
• Absolute: Positioned relative to the nearest positioned ancestor.
• Fixed: Positioned relative to the viewport, does not move when
the page is scrolled.
• Sticky: Acts like a combination of relative and fixed positioning.
Add your answer

Frequently asked in
Housing.com
Q21. What are pseudo classes
Ans.
Pseudo classes are keywords used in CSS to select and style elements
based on their state or position in the document.
• Pseudo classes start with a colon (:) followed by the keyword
• They are used to style elements based on their state, such as
:hover, :active, :focus
• They can also be used to select elements based on their position
in the document, such as :first-child, :last-child
• Pseudo classes can be combined with other selectors to create
more specific styles
Add your answer
Q22. Difference between flex and grid
Ans.
Flex is one-dimensional layout while Grid is two-dimensional layout.
• Flex is used for creating flexible and responsive layouts.
• Grid is used for creating complex and structured layouts.
• Flex is best suited for small-scale layouts while Grid is best
suited for large-scale layouts.
• Flex is easier to learn and implement while Grid requires more
advanced knowledge.
• Flex is supported by older browsers while Grid has limited
support in older browsers.
Add your answer

Q23. How to center align a div in just one line in css.

Ans.
Use flexbox to center align a div in just one line in CSS.
• Set the parent container's display property to flex.
• Use the justify-content property with the value 'center' to
horizontally center the div.
• Use the align-items property with the value 'center' to vertically
center the div.
View 3 more answers

Frequently asked in
Accenture
Q24. Why we use SCSS ?
Ans.
SCSS is used to write more maintainable and scalable CSS code.
• SCSS allows for nesting of CSS rules, making it easier to read
and organize code.
• Variables and mixins in SCSS can be reused throughout the
codebase, reducing redundancy.
• SCSS also supports inheritance, allowing for more efficient and
modular code.
• It compiles to regular CSS, so it can be used in any web project.
• SCSS is widely used in modern web development frameworks
like React and Angular.
Add your answer

Q25. What is Z-index in CSS?

Ans.
Z-index is a CSS property that controls the stacking order of elements
on a web page.
• Higher z-index values place elements on top of lower ones
• Z-index only works on positioned elements (position: absolute,
position: relative, position: fixed)
• Negative z-index values place elements behind the default
stacking order
• Z-index can be used to create layered effects on a web page
Add your answer

Q26. list the types of CSS

Ans.
There are three types of CSS: inline, internal, and external.
• Inline CSS is applied directly to an HTML element using the
style attribute.
• Internal CSS is defined within the head section of an HTML
document using the style tag.
• External CSS is defined in a separate file and linked to the
HTML document using the link tag.
Add your answer

Q27. Explain more about xpath css?

Ans.
XPath and CSS are both locator strategies used in web testing to
identify elements on a webpage.
• XPath is a language used to navigate XML documents and is
commonly used in web testing to locate elements based on their
attributes or structure.
• CSS selectors are used to select elements based on their
attributes, classes, or IDs.
• XPath is more powerful and flexible than CSS selectors, but can
be slower.
• CSS selectors are generally faster and easier to read and write.
• XPath can traver...read more
Add your answer

Frequently asked in
Cognizant
Q28. Explain the order of specifity in CSS classes, elements, ids,
etc
Ans.
Explanation of CSS specificity hierarchy
• Inline styles have the highest specificity
• IDs have higher specificity than classes and elements
• Multiple selectors with the same specificity are resolved by the
order in which they appear in the stylesheet
• The universal selector (*) has the lowest specificity
Add your answer

Q29. What is selector method?

Ans.
Selector method is used to select and manipulate elements in a web
page using CSS selectors.
• Selector method is a part of CSS (Cascading Style Sheets).
• It is used to select and manipulate HTML elements based on
their attributes, classes, and IDs.
• Examples of selector methods include getElementById(),
getElementsByClassName(), and querySelectorAll().
Add your answer

Frequently asked in
Cybage
Q30. What happened if u not mentioned any font style in css?
Ans.
If no font style is mentioned in CSS, the browser will use its default
font style.
• The browser will use its default font style if not specified in
CSS.
• The default font style may vary depending on the browser and
operating system.
• It is recommended to always specify a font style in CSS to
ensure consistent rendering across different platforms.
View 2 more answers

Q31. What are differences between SASS, SCSS

Ans.
SASS is an older syntax of SCSS, which is a newer and more popular
syntax of Sass.
• SASS uses indentation for nesting, while SCSS uses braces.
• SCSS is more similar to CSS syntax, making it easier for
beginners to learn.
• SCSS supports inline comments, while SASS does not.
• SCSS files have a .scss extension, while SASS files have a .sass
extension.
Add your answer

Q32. What is the difference between internal style sheet and

external css?
Ans.
Internal style sheet is defined within the HTML document while
external CSS is defined in a separate file.
 • Internal style sheet is defined within the
View 1 answer

Q33. What is media queries?

Ans.
Media queries are CSS rules that apply different styles based on the
device's screen size, orientation, and resolution.
• Media queries are used to create responsive web designs.
• They allow developers to target specific devices and adjust the
layout accordingly.
• Media queries use the @media rule in CSS.
• Examples of media queries include adjusting font sizes, hiding
or showing elements, and changing the layout.
• Media queries can be used for print styles as well.
Add your answer

Q34. how do you develop CSS without using bootstrap

Ans.
Developing CSS without using bootstrap involves writing custom
CSS code to style web pages.
• Write CSS code to define styles for HTML elements
• Use CSS selectors to target specific elements
• Apply CSS properties to modify the appearance of elements
• Create media queries for responsive design
• Implement CSS animations and transitions
• Optimize CSS code for performance
Add your answer

Q35. You were given CSS code and asked to debug it to make the
functionality work. Can you describe the process you followed and
the issues you encountered?
Ans.
I followed a systematic process to debug CSS code and resolve
functionality issues.
• Reviewed the CSS code to identify any syntax errors or typos
• Checked for any conflicting styles that may be overriding the
desired functionality
• Used browser developer tools to inspect elements and
troubleshoot layout issues
• Tested different scenarios to pinpoint the exact cause of the
problem
• Made necessary adjustments to the CSS code to fix the
functionality
Add your answer

Q36. What is position property in CSS3

Ans.
Position property in CSS3 is used to set the position of an element
relative to its parent or the viewport.
• The position property can take values like static, relative,
absolute, fixed, and sticky.
• Static is the default value and elements are positioned according
to the normal flow of the document.
 • Relative positions the element relative to its normal position.
• Absolute positions the element relative to its nearest positioned
ancestor.
• Fixed positions the element relative to the v...read more
Add your answer

Frequently asked in
Tata Communications
Q37. What are css elements?
Ans.
CSS elements are the building blocks of Cascading Style Sheets that
define the appearance of HTML elements.
• CSS elements are used to style HTML elements
• They include selectors, properties, and values
• Selectors target specific HTML elements, while properties
define their appearance
• Values determine the specific style of the property
• Examples of CSS elements include color, font-size, margin,
padding, etc.
Add your answer

Q38. define css positions and and difference in between absute

and relative
Ans.
CSS positions define how an element is positioned on a webpage.
Absolute positioning is relative to the nearest positioned ancestor,
while relative positioning is relative to the element's normal position.
 • CSS positions determine how an element is placed on a
webpage
• Absolute positioning positions an element relative to its nearest
positioned ancestor
• Relative positioning positions an element relative to its normal
position
• Absolute positioning removes the element from the
normal...read more
Add your answer

Q39. what is pseudo element/pseudo child

Ans.
Pseudo elements/children are CSS selectors that target specific parts
of an element.
• Pseudo elements are denoted by a double colon (::) and are used
to style a specific part of an element, such as the first letter or
line of text.
• Pseudo children are denoted by a single colon (:), and are used
to select a specific state of an element, such as when it is being
hovered over or clicked.
• Examples of pseudo elements include ::before and ::after, which
add content before or after an e...read more
Add your answer

Frequently asked in
Siemens
Q40. What is the use of seudo class in css
Ans.
Pseudo classes are used to define a special state of an element.
• Pseudo classes are preceded by a colon (:)
• They are used to style elements based on their state or position
• Examples include :hover, :active, :first-child, :nth-child
Add your answer

Q41. how to convert rectangle to circlewith css

Ans.
Use border-radius property in CSS to convert rectangle to circle.
• Set the border-radius property to 50% to make a rectangle into a
circle.
• Make sure the width and height of the element are equal for a
perfect circle.
• Example: .circle { width: 100px; height: 100px; border-radius:
50%; }
Add your answer

Q42. How do you center a div using CSS?

Ans.
To center a div using CSS, set the left and right margins to auto and
specify a width for the div.
• Set margin-left and margin-right to auto
• Specify a width for the div
• Use display: block to ensure the div takes up the full width
Add your answer
Frequently asked in
Info Edge
Q43. What will happen if you set display as grid?
Ans.
Setting display as grid will create a grid container for the selected
element.
• The element will become a grid container
• Child elements can be placed in grid cells using grid-template-
rows and grid-template-columns
• Grid properties like grid-gap, justify-items, align-items can be
used to style the grid
Add your answer

Q44. what is object fit in css

Ans.
Object fit in CSS is a property that specifies how an image or video
should be resized to fit its container.
• Specifies how the content of an element should be resized to fit
its container
• Values include 'fill', 'contain', 'cover', 'none', 'scale-down'
• Example: object-fit: cover; will make the image fill the
container while maintaining aspect ratio
Add your answer

Q45. How to add background image

Ans.
To add a background image, use CSS background-image property.
• Create a CSS class or ID for the element you want to add the
background image to.
• Use the background-image property to specify the URL of the
image.
• Set the background-size property to cover or contain the
element.
• Example: .container { background-image: url('image.jpg');
background-size: cover; }
Add your answer

Q46. What is box-sizing: border-box?

Ans.
box-sizing: border-box is a CSS property that includes padding and
border in the element's total width and height.
• It changes the box model so that padding and border are
included in the element's total width and height
• Helps in easier layout design as the total width and height of the
element remains consistent
• Example: div { box-sizing: border-box; width: 100px; padding:
10px; border: 1px solid black; }
Add your answer

Q47. Media query in details

Ans.
Media queries are used in CSS to apply different styles based on the
device's characteristics like screen size, resolution, etc.
• Media queries are written using the @media rule in CSS
• They allow for the creation of responsive web designs
• Common media query features include min-width, max-width,
orientation, etc.
• Example: @media only screen and (max-width: 600px) { /*
styles here */ }
Add your answer

Q48. What are the different position property values in CSS?

Ans.
The position property values in CSS determine how an element is
positioned in a document.
• static: default value, elements are positioned according to the
normal flow of the document
• relative: positioned relative to its normal position
• absolute: positioned relative to the nearest positioned ancestor
• fixed: positioned relative to the viewport, does not move when
scrolled
• sticky: acts like a combination of relative and fixed positioning
Add your answer

Frequently asked in
CitiusTech
Q49. What are the specificity rules in CSS?
Ans.
Specificity rules in CSS determine which styles are applied to an
element when multiple conflicting styles are present.
• Specificity is calculated based on the type of selector used (ID,
class, element) and the number of each type of selector.
• ID selectors have the highest specificity, followed by class
selectors, and then element selectors.
• Inline styles have the highest specificity and will always
override external stylesheets.
• Specificity is represented by a four-part value (a,...read more
Add your answer

Frequently asked in
CitiusTech
Q50. In how many ways can you display HTML elements?
Ans.
There are multiple ways to display HTML elements, including inline,
block, inline-block, and flex.
• Inline elements flow in a line with other elements and do not
start on a new line. Example: <span>
• Block elements start on a new line and take up the full width
available. Example: <div>
• Inline-block elements are similar to inline elements but can have
block-level properties. Example: <img>
• Flex elements use the flexbox layout model for more advanced
control over layout. Example: <d...read more
Add your answer
Frequently asked in
Practo
Q51. what is css and type of css?
Ans.
CSS stands for Cascading Style Sheets. It is used to style and layout
web pages.
• CSS is used to add colors, fonts, and layouts to web pages.
• There are three types of CSS: inline, internal, and external.
• Inline CSS is used to style a single element.
• Internal CSS is used to style a single web page.
• External CSS is used to style multiple web pages.
• CSS can be used to create responsive designs that adapt to
different screen sizes.
Add your answer

Q52. 1. Design a yin yang using css

Ans.
Design a yin yang using css
• Create a circle using border-radius property
• Use background-color to fill the circle with black and white
• Create two smaller circles inside the main circle using absolute
positioning
• Use transform property to rotate the smaller circles
• Add box-shadow to create the 3D effect
Add your answer

Q53. How to optimize Css

Ans.
Optimizing CSS involves reducing file size, minimizing HTTP
requests, and using efficient selectors.
• Minimize use of unnecessary CSS rules
• Combine and minify CSS files
• Use efficient selectors
• Reduce file size by removing comments and whitespace
• Avoid using @import
• Use CSS sprites for images
• Use media queries to load appropriate styles for different
devices
Add your answer

Q54. Difference between css and bootstrap

Ans.
CSS is a styling language used to design web pages, while Bootstrap
is a front-end framework that helps in building responsive and
mobile-first websites.
• CSS is a styling language used to control the look and feel of a
website.
• Bootstrap is a front-end framework that provides pre-designed
templates and components for building responsive websites.
• CSS requires manual coding for styling elements, while
Bootstrap offers ready-to-use classes for styling.
 • Bootstrap also includes JavaS...read more
Add your answer

Q55. What are types of CSS and which has more priority
Ans.
Types of CSS include inline, internal, external, and imported. Inline
has the highest priority.
• Types of CSS: inline, internal, external, imported
• Inline CSS has the highest priority
• Internal CSS is defined within the HTML document
• External CSS is linked to the HTML document using a tag
• Imported CSS is used to import an external style sheet within
another style sheet
Add your answer

Q56. What is the difference between rem and em in css? How to

hide something in CSS?
Ans.
rem and em are both units in CSS for defining font sizes, with rem
being relative to the root element and em being relative to the parent
element.
• rem stands for 'root em' and is relative to the font size of the root
element (usually the tag)
• em stands for 'element em' and is relative to the font size of the
parent element
 • To hide something in CSS, you can use the display property
with a value of 'none' or the visibility property with a value of
'hidden'
• Example: To hide an eleme...read more
Add your answer

Q57. Css visiblity none vs visiblity hidden

Ans.
visibility: hidden hides an element but still takes up space, visibility:
none hides an element and removes it from the layout
• visibility: hidden hides the element but it still occupies space on
the page
• visibility: none hides the element and removes it from the layout
• visibility: hidden can be used to hide an element while keeping
its space reserved, useful for animations
• visibility: none is useful when you want to completely remove
an element from the layout
Add your answer

Q58. What is the full form css

Ans.
CSS stands for Cascading Style Sheets.
• CSS is a stylesheet language used to describe the presentation of
a document written in HTML or XML.
• It allows developers to separate the content of a web page from
its presentation.
 • CSS is used to control the layout, colors, fonts, and other visual
aspects of a web page.
• It uses selectors to target specific HTML elements and apply
styles to them.
• CSS can be written inline, embedded in the HTML document, or
in an external file.
• CSS3 is the lat...read more
Add your answer

Q59. What is pseudo code in css

Ans.
Pseudo code in CSS is a way to plan out the structure and logic of
your CSS code without actually writing any CSS syntax.
• Pseudo code helps in organizing and visualizing the layout of
your CSS styles before implementation.
• It can include comments, placeholders, and simplified logic to
outline the structure of the CSS code.
• For example, using comments like /* Header Styles */ to
indicate where header styles will be written.
Add your answer

Q60. What are CSS accessibilities?

Ans.
CSS accessibilities refer to making web content accessible to users
with disabilities.
• Using proper color contrast for text and background
• Providing alternative text for images using the 'alt' attribute
 • Using semantic HTML elements for better screen reader
compatibility
Add your answer

Frequently asked in
Accenture
Q61. Which version of css used
Ans.
CSS has multiple versions, the latest being CSS3.
• CSS1 was released in 1996
• CSS2 was released in 1998
• CSS3 is the latest version
• CSS3 has many new features like animations, transitions, and
flexbox
Add your answer

Q62. Make a a spiral using css

Ans.
Use CSS to create a spiral design
• Use CSS properties like transform, rotate, and scale to create the
spiral effect
• Consider using keyframes for animation effects
• Experiment with different shapes and sizes to achieve the
desired spiral design
Add your answer
Q63. difference between flexbox and grids
Ans.
Flexbox is a one-dimensional layout while Grid is a two-dimensional
layout.
• Flexbox is best for arranging items in a single row or column
• Grid is best for arranging items in rows and columns
• Flexbox has a main axis and a cross axis
• Grid has rows and columns that intersect to create cells
• Flexbox is great for responsive design
• Grid allows for more complex layouts
• Flexbox is supported by older browsers
• Grid has better browser support in modern browsers
Add your answer

Q64. What are the different ways to link css? Which has the
highest priority?
Ans.
There are three ways to link CSS: inline, internal, and external. Inline
has the highest priority.
• Inline CSS is applied directly to an HTML element using the
'style' attribute.
• Internal CSS is defined within the 'style' tags in the head section
of an HTML document.
• External CSS is linked to an HTML document using the 'link'
tag with the 'rel' attribute set to 'stylesheet'.
 • Inline CSS has the highest priority, followed by internal CSS,
and then external CSS.
Add your answer

Q65. How is SASS complied?

Ans.
SASS is compiled using a command line tool or a build system.
• SASS is compiled into CSS using a preprocessor.
• The compilation process involves converting SASS code into
CSS code.
• There are several ways to compile SASS, such as using the
command line tool 'sass' or build systems like Gulp or Webpack.
• The compiled CSS can then be included in the HTML file.
Add your answer

Q66. What is css compliler.

Ans.
A CSS compiler is a tool that converts CSS code into a more efficient
format, such as minified or optimized CSS.
• CSS compilers help streamline the development process by
automatically processing and optimizing CSS code.
• Popular CSS compilers include Sass, Less, and Stylus.
• They can be used to nest CSS rules, create variables, and use
functions to generate CSS styles.
• CSS compilers can also help with vendor prefixing and browser
compatibility.
• The output of a CSS compiler is typica...read more
Add your answer

Q67. How to target even element using css?

Ans.
Use the :nth-child() pseudo-class in CSS to target even elements.
• Use :nth-child(2n) to target every even element in a list.
• For example, to target even
• elements in a
, use ul li:nth-child(2n).
Add your answer

Q68. What is the use of Webkit in CSS3?

Ans.
Webkit is a rendering engine used by browsers to display web pages
and is used for CSS3 animations and transitions.
• Webkit is a layout engine used by Safari, Chrome, and other
browsers.
• It is used for CSS3 animations and transitions.
• Webkit is responsible for rendering web pages in the browser.
• It supports various CSS3 features like gradients, shadows, and
reflections.
• Webkit prefixes are used to target specific browsers for CSS3
properties.
Add your answer
Q69. How do use external CSS file in project?
Ans.
External CSS files can be linked to HTML using the link tag in the
head section.
• Create a separate CSS file with .css extension
• Add link tag in the head section of HTML file
• Specify the path of the CSS file in the href attribute of the link
tag
• Example:
Add your answer

Q70. What is pseudo class in CSS?

Ans.
Pseudo classes are keywords used to define a special state of an
element.
• Pseudo classes start with a colon (:)
• They are used to style elements based on their state or position
• Examples include :hover, :active, :first-child, :nth-child
• Pseudo classes can be combined with selectors to target specific
elements
Add your answer

Q71. what are all basic CSS properties

Ans.
Basic CSS properties include color, font-size, margin, padding, and
display.
 • color
• font-size
• margin
• padding
• display
Add your answer

Q72. What are the different position attributes in css

Ans.
CSS has various position attributes to position elements on a web
page.
• position: static
• position: relative
• position: absolute
• position: fixed
• position: sticky
Add your answer

Frequently asked in
CitiusTech
Q73. What are the css style specificities
Ans.
CSS specificity determines which style rules are applied to an
element.
 • Specificity is calculated based on the number of selectors and
their types.
• Inline styles have the highest specificity.
• IDs have higher specificity than classes and attributes.
• The universal selector (*) has zero specificity.
• The !important keyword overrides specificity.
• Selectors with equal specificity are applied in the order they
appear in the stylesheet.
Add your answer

Frequently asked in
CitiusTech
Q74. What is Mixin in SCSS ?
Ans.
Mixin is a reusable block of code in SCSS that can be included in
other stylesheets.
• Mixin allows developers to define a set of CSS declarations that
can be reused throughout the stylesheet.
• It helps in reducing code duplication and makes the code more
maintainable.
• Mixin can take arguments and can be used to generate different
styles based on the arguments passed.
• Mixin can be defined using the @mixin directive and included
using the @include directive.
Add your answer

Q75. How to adjust a box on left?

Ans.
To adjust a box on the left, use CSS properties like margin-left or left.
• Use margin-left property to adjust the box's position to the right.
• Use left property with position: absolute or position: relative to
adjust the box's position relative to its containing element.
• Consider using flexbox or grid layout for more control over the
box's positioning.
Add your answer

Frequently asked in
Accenture
Q76. How to use negative margin
Ans.
Negative margin is used to shift an element outside its container. It
can be used for layout and positioning.
• Negative margin can be used to create overlapping elements.
• It can be used to center an element horizontally or vertically.
• Negative margin can also be used to create a sticky footer.
• It should be used with caution as it can cause layout issues.
• Example: margin-top: -10px; will move the element 10 pixels
above its original position.
Add your answer

Q77. What is CSS box layout

Ans.
CSS box layout is a way to control the size and position of elements
on a web page using CSS properties.
• CSS box layout allows developers to control the layout of
elements on a web page.
• It includes properties like display, position, float, and clear.
• Developers can use CSS box layout to create responsive designs
that adapt to different screen sizes.
• Examples include using display: flex; for creating flexible
layouts, and position: absolute; for positioning elements
precisely.
Add your answer

Q78. Difference between external and internal css.

Ans.
External CSS is stored in separate files while internal CSS is included
within the HTML file.
• External CSS is linked to HTML using tag.
• Internal CSS is defined within
Add your answer

Q79. what is position absolute

Ans.
Position absolute is a CSS property that positions an element relative
to its closest positioned ancestor.
• Position absolute removes the element from the normal flow of
the document.
• It is positioned based on the nearest positioned ancestor.
 • The element's position is specified using the top, right, bottom,
and left properties.
• Commonly used for creating overlays, tooltips, and pop-up
menus.
Add your answer

Q80. how to center an item without flex and grid

Ans.
To center an item without flex and grid, use text-align center for inline
elements and margin auto for block elements.
• For inline elements, use text-align: center on the parent element
• For block elements, use margin: 0 auto on the element you want
to center
• For inline-block elements, set text-align: center on the parent
and display: inline-block on the child
Add your answer

Q81. Write a code for toggle switching with CSS.

Ans.
Toggle switching with CSS code example
• Use a checkbox input and label elements
• Apply CSS styles to hide the checkbox and style the label as a
button
• Use the :checked pseudo-class to toggle styles based on
checkbox state
Add your answer
Q82. What is box property in css?
Ans.
The box property in CSS is used to control the layout and dimensions
of an element, including padding, border, and margin.
• The box property includes properties like padding, border,
margin, width, and height.
• It allows developers to control the spacing around an element,
its border, and its overall size.
• Example: box-sizing: border-box; sets the box model to include
padding and border in the element's total width and height.
Add your answer

Q83. what is css ..css table layout

Ans.
CSS is a styling language used to control the look and feel of a
website. CSS table layout is a way to control the layout of tables
using CSS properties.
• CSS stands for Cascading Style Sheets
• CSS is used to style the visual presentation of web pages
• CSS table layout allows for more control over the appearance of
tables, such as setting column widths, row heights, and cell
spacing
Add your answer

Q84. Difference in inline and inline-block property.

Ans.
Inline elements are displayed in a line, while inline-block elements
are displayed in a line but can have a width and height.
• Inline elements do not have a width or height property.
• Inline elements cannot have margins or padding applied to them.
• Inline-block elements can have margins and padding applied to
them.
• Inline-block elements can have a width and height property set.
• Examples of inline elements include and tags.

• Examples of inline-block elements include and tags.

Add your answer

Q85. How to implement external css in ibm baw?

Ans.
External CSS can be implemented in IBM BAW by linking the CSS
file in the HTML code of the coach view.
• Create a CSS file with the desired styles
• Upload the CSS file to a location accessible by IBM BAW
• In the coach view, add a link to the external CSS file using
the tag
Add your answer

Frequently asked in
Capgemini
Q86. Tell the five background properties in CSS
Ans.
Background properties in CSS are used to control the background of
an element.
• background-color: sets the background color of an element
• background-image: sets an image as the background of an
element
• background-repeat: specifies how a background image should
repeat
• background-position: sets the starting position of a background
image
• background-size: specifies the size of the background image
Add your answer

Q87. What is the difference between display flex and display grid
Ans.
Display flex is for one-dimensional layouts, while display grid is for
two-dimensional layouts.
• Display flex is used for creating layouts in one direction (either
row or column)
• Display grid is used for creating layouts in two dimensions
(rows and columns)
• Flexbox is more suitable for small-scale layouts, while Grid is
better for larger layouts with more complex structures
Add your answer

Q88. How to add a data in css

Ans.
Data cannot be added in CSS directly, but can be added through
HTML or JavaScript.
• Data can be added through HTML attributes like data-*
• Data can also be added through JavaScript using DOM
manipulation
• CSS variables can be used to store and access data within CSS
Add your answer

Q89. what is block scope in css

Ans.
Block scope in CSS refers to the scope of variables declared within a
block of code, such as within curly braces {}.
• Variables declared within a block are only accessible within that
block
• Block scope helps prevent naming conflicts and keeps code
organized
• Example: .container { color: red; } .container { color: blue; } -
the second declaration will not affect the first due to block scope
Add your answer

Q90. Tell about CSS3 Flexbox

Ans.
CSS3 Flexbox is a layout module that provides a more efficient way
to design and align elements in a container.
• Flexbox allows for flexible and responsive layouts without the
need for complex CSS hacks.
 • It uses a parent-child relationship where the parent element is
the flex container and the child elements are flex items.
• Flexbox provides properties such as flex-direction, justify-
content, align-items, and align-self to control the layout and
alignment of flex items.
• It also all...read more
Add your answer

Frequently asked in
Standard Chartered
Q91. What is linear gradient in Css?
Ans.
Linear gradient in CSS is a gradual transition between two or more
colors along a straight line.
• Linear gradient is created using the linear-gradient() function in
CSS.
• It allows for a smooth transition of colors from one point to
another along a straight line.
• You can specify the direction, angle, and color stops for the
gradient.
• Example: background: linear-gradient(to right, red, blue);
Add your answer

Q92. how stylesheet are loaded

Ans.
Stylesheets are loaded in a specific order based on their location and
type.
 • Stylesheets can be loaded externally using tag in HTML.
• Inline styles can be added using the style attribute in HTML
elements.
• Styles can also be included within the
Add your answer

Q93. Why scss over css

Ans.
SCSS offers more features and flexibility compared to CSS.
• SCSS allows for variables, nesting, and mixins which make
code more organized and maintainable.
• SCSS supports mathematical operations, making it easier to
create responsive designs.
• SCSS can be compiled into regular CSS, so it is compatible with
existing workflows and tools.
Add your answer

Q94. Translation in Angular How we wil do ? CSS

Ans.
Translation in Angular can be done using ng-translate or ngx-translate
libraries. CSS can be applied using Angular's built-in styles or
external stylesheets.
• Use ng-translate or ngx-translate libraries for translation in
Angular
• Apply CSS using Angular's built-in styles or external stylesheets
• Utilize Angular's ngClass directive for dynamic CSS classes
Add your answer
Q95. Frameworks of CSS?
Ans.
CSS frameworks are pre-written CSS code that can be used to speed
up development time.
• Bootstrap
• Foundation
• Materialize
• Bulma
• Semantic UI
Add your answer

Q96. How to add internal and external css in html code Difference
between HTML5 &amp; HTML
Ans.
Internal CSS is added within the <style> tag in the <head> section of
HTML, while external CSS is linked using the <link> tag.
• Internal CSS is added within the <style> tag in the <head>
section of HTML
• External CSS is linked using the <link> tag with the 'rel'
attribute set to 'stylesheet' and the 'href' attribute pointing to the
CSS file
• Example: <style> body { background-color: lightblue; }
</style> <link rel='stylesheet' href='styles.css'>
Add your answer
Q97. CSS Locators for website
Ans.
CSS Locators are used to target specific elements on a website for
styling or interaction.
• Use ID selector: #elementID
• Use class selector: .elementClass
• Use attribute selector: [attribute=value]
• Use descendant selector: parentElement childElement
• Use pseudo-class selector: element:hover
Add your answer

Q98. Example css , js ,

Ans.
Example CSS and JS code snippets for web development.
• CSS example: body { background-color: lightblue; }
• JS example: document.getElementById('demo').innerHTML =
'Hello World!';
Add your answer

Q99. Inline elements and block elements in CSS

Ans.
Inline elements are displayed inline with text while block elements
take up the full width available.
• Inline elements do not start on a new line
• Block elements start on a new line and take up the full width
available
 • Inline elements can have padding and margin applied
horizontally but not vertically
• Block elements can have padding and margin applied in all
directions
• Examples of inline elements include and , while examples of
block elements include
and
Add your answer

Q100. Z-indexing in CSS

Ans.
Z-indexing in CSS determines the stacking order of elements on a
webpage.
• Z-index is a CSS property that controls the vertical stacking
order of elements.
• Elements with a higher z-index value will appear on top of
elements with a lower value.
• Z-index only works on positioned elements (position: absolute,
position: relative, or position: fixed).
• Negative z-index values can be used to position elements behind
others.
• Z-index can be used to create overlays, dropdown menus, and
contro...read more

Q101. Specificity in CSS, pseudo selectors

Ans.
Specificity in CSS refers to the priority given to different CSS rules
when multiple rules apply to the same element.
 • Specificity is determined by the number of ID, class, and
element selectors in a rule
• Pseudo selectors like :hover and :active can also affect
specificity
• Using !important can override specificity, but should be used
sparingly
• Understanding specificity is important for avoiding unexpected
styling conflicts
Add your answer

Q102. Vendor prefix in css

Ans.
Vendor prefixes are used in CSS to add experimental features that are
not yet standardized.
• Vendor prefixes are added to CSS properties to support
experimental features.
• They are used to test new features before they are standardized.
• Examples of vendor prefixes include -webkit-, -moz-, -ms-, and
-o-.
• Vendor prefixes should be used sparingly and with caution, as
they can cause compatibility issues.
• It is important to include the standard version of the property
after the vendor-pr...read more
Add your answer

Frequently asked in
CitiusTech
Q103. Pseudo class vs Pseudo element
Ans.
Pseudo class selects elements based on their state, while pseudo
element selects parts of an element.
• Pseudo class is used to style elements based on their state, such
as :hover, :active, :focus.
• Pseudo element is used to style specific parts of an element,
such as ::before, ::after, ::first-line.
• Pseudo class starts with a single colon (:), while pseudo element
starts with a double colon (::).
Add your answer

Q104. Types of css framework

Ans.
CSS frameworks are pre-prepared libraries that are meant to allow for
easier, more standards-compliant styling of web pages.
• Bootstrap
• Foundation
• Semantic UI
• Materialize
• Bulma
Add your answer

Are these interview questions helpful?

Yes
No
Q105. Sudo selectors in css
Ans.
Sudo selectors in CSS are special selectors that allow you to target
elements based on their state or position in the document.
• Sudo selectors start with a colon (:), such as :hover, :active,
:focus, etc.
• They can be used to style elements based on user interaction,
like hovering over a button.
• Sudo selectors can also be used to target specific child elements,
like :first-child or :nth-child.
Add your answer

Q106. difference between display block and inline

Ans.
display block takes up full width, display inline only takes up as much
width as necessary
• display block elements start on a new line and take up the full
width available
• display inline elements do not start on a new line and only take
up as much width as necessary
• display block elements can have margin and padding applied to
all four sides, while display inline elements only have left and
right margin and padding by default
View 1 answer
Share interview questions and help millions of jobseekers
Share interview questions

Q107. What is box model? Center the input tag?

Ans.
Box model is a way of representing HTML elements as rectangular
boxes with content, padding, border, and margin.
• The box model consists of content, padding, border, and margin.
• Content is the actual content of the element.
• Padding is the space between the content and the border.
• Border is the line that surrounds the padding and content.
• Margin is the space between the border and other elements.
• To center an input tag, set margin-left and margin-right to auto
and display to block.
Add your answer

Q108. what is html, difference between html and css

Ans.
HTML is a markup language used for creating the structure of web
pages. CSS is a styling language used for designing the appearance of
web pages.
• HTML stands for HyperText Markup Language
• HTML is used to create the structure of web pages by using
elements like headings, paragraphs, images, links, etc.
• CSS stands for Cascading Style Sheets
 • CSS is used to style the appearance of web pages by defining
colors, fonts, layout, etc.
• HTML is responsible for the content and structure of a ...read
more
View 1 answer

Q109. Describe CSS Box model

Ans.
CSS Box model is a design concept that describes how elements are
displayed on a webpage.
• Every HTML element is a rectangular box
• The box has content, padding, border, and margin
• Width and height of the box are determined by content, padding,
and border
• Margin is the space outside the border
• Box-sizing property can be used to change the box model
Add your answer

Q110. How to change CSS through JavaScript code?

Ans.
CSS can be changed through JavaScript by accessing the style
property of an element and modifying its CSS properties.
• Access the element using document.querySelector() or
document.getElementById()
• Use element.style.propertyName to modify the CSS property
• Alternatively, add or remove CSS classes using
element.classList.add() and element.classList.remove()
 • Use CSS variables to dynamically change multiple properties at
once
Add your answer

Q111. What is flexbox

Ans.
Flexbox is a CSS layout module that allows for flexible and
responsive web design.
• Flexbox allows for easy alignment and positioning of elements
within a container.
• It uses a set of properties to define the layout, such as display:
flex and flex-direction.
• Flexbox is particularly useful for creating responsive designs
that adapt to different screen sizes.
• It can also be used in combination with other CSS layout
modules, such as Grid.
• Example: justify-content: center; align-items: ...read more
Add your answer

Frequently asked in
Capgemini
Q112. how do you develop CSS for different devices
Ans.
To develop CSS for different devices, use media queries, responsive
design principles, and testing on various devices.
• Use media queries to apply different CSS styles based on the
device's screen size
 • Follow responsive design principles to ensure the layout adapts
to different devices
• Test the CSS on various devices to ensure compatibility and
responsiveness
Add your answer

Q113. Create a web page with Given description

Ans.
A web page showcasing a collection of recipes with images and
ingredients
• Create a grid layout to display recipe cards
• Include images of each recipe
• List out ingredients for each recipe
• Add a search bar for easy navigation
Add your answer

Q114. How can you applied a certain css on three div element?
Ans.
You can apply a certain CSS on three div elements by using a
common class or ID for all three divs.
• Add a common class or ID to all three div elements
• Define the CSS properties for that class or ID in your stylesheet
• Apply the class or ID to each of the three div elements in your
HTML markup
Add your answer
Q115. What is difference between position relative and absolute
Ans.
Position relative is relative to its normal position, while position
absolute is relative to its nearest positioned ancestor.
• Position relative moves an element relative to its normal
position.
• Position absolute moves an element relative to its nearest
positioned ancestor.
• Position absolute elements are taken out of the normal flow of
the document.
Add your answer

Q116. Difference between display flex and display inline block.

Ans.
display flex is used for creating flexible layouts, while display inline-
block is used for creating inline elements with block-level properties.
• display flex is used to create flexible layouts that can adapt to
different screen sizes and orientations
• display inline-block is used to create inline elements that can
have block-level properties like width and height
• display flex allows for easy alignment and distribution of
elements within a container
• display inline-block allows for ...read more
View 1 answer

Q117. What are css version

Ans.
CSS has different versions like CSS1, CSS2, CSS3, and CSS4.
• CSS1 was released in 1996
• CSS2 was released in 1998
• CSS3 introduced new features like animations, transitions, and
media queries
• CSS4 is still in development
Add your answer

Q118. What is a css box model

Ans.
CSS box model is a design concept that describes how elements are
rendered on a web page.
• It consists of content, padding, border, and margin.
• Content is the actual element content.
• Padding is the space between the content and the border.
• Border is the line that surrounds the content and padding.
• Margin is the space between the border and the next element.
• The box model can be adjusted using CSS properties such as
padding, border, and margin.
• Understanding the box model is important...read more
Add your answer

Frequently asked in
Amdocs
Q119. What is use of margin-left and margin-top in css of fixed
layout
Ans.
margin-left and margin-top in CSS of fixed layout are used to define
the distance between the left and top edges of an element and its
containing element.
• margin-left sets the left margin of an element
• margin-top sets the top margin of an element
• These properties are commonly used in fixed layout to position
elements within a container
• They can be specified in pixels, percentages, or other length
units
• Example: margin-left: 20px; margin-top: 10px; will move the
element 20 pixels t...read more
View 1 answer

Frequently asked in
Aptara
Q120. What are the various selector in CSS.
Ans.
CSS selectors are used to target HTML elements and apply styles to
them.
• Type selectors target elements based on their tag name (e.g. h1,
p, div)
• Class selectors target elements with a specific class attribute
(e.g. .my-class)
• ID selectors target elements with a specific ID attribute (e.g.
#my-id)
• Attribute selectors target elements with a specific attribute value
(e.g. [href='https://www.example.com'])
 • Pseudo-class selectors target elements based on their state or
position (e.g. ...read more
Add your answer

Q121. What do you mean by pseudo class

Ans.
Pseudo classes are used to define styles for specific states of an
element.
• Pseudo classes start with a colon (:)
• They are used to style elements based on user interaction (hover,
active, focus)
• They can also be used to select and style elements based on their
position in the document (first-child, nth-child)
• Examples: :hover, :active, :focus, :first-child, :nth-child
Add your answer

Q122. what is flex and grid

Ans.
Flex and Grid are CSS layout systems used for creating responsive
web designs.
• Flexbox is a one-dimensional layout system that allows you to
align and distribute space among items in a container.
• Grid is a two-dimensional layout system that allows you to
create complex layouts with rows and columns.
• Flexbox is best suited for arranging items in a single direction,
while Grid is ideal for creating grid-based layouts.
• Flexbox example: justify-content: center; align-items: center;
 • Gr...read more
Add your answer

Q123. What are the key features of SCSS

Ans.
SCSS is a preprocessor scripting language that is a superset of CSS,
adding features like variables, nesting, and mixins.
• Variables allow for reusable values throughout a stylesheet
• Nesting helps to keep styles organized and easier to read
• Mixins allow for reusable blocks of styles to be included in
other selectors
• SCSS supports operations like math calculations and functions
• SCSS can be compiled into regular CSS for use in web
development
Add your answer

Q124. What is a z-index in CSS?

Ans.
z-index is a CSS property that controls the stacking order of elements
on a webpage.
• z-index only works on positioned elements (position: absolute,
position: relative, position: fixed, or position: sticky)
• Higher z-index values stack on top of lower ones
• Negative z-index values can be used to place elements behind
other elements
• z-index can be used to create layered effects on a webpage
Add your answer

Q125. write the xpath or CSS code for selected value in the
amazon site
Ans.
XPath code for selected value in Amazon site
• Use the 'contains' function to locate the selected value
• Identify the unique attributes of the selected value to create a
specific XPath
• Consider using the 'text()' function to locate text within an
element
Add your answer

Q126. What is css specificity?

Ans.
CSS specificity determines which style rule is applied to an element
when multiple rules have conflicting selectors.
• Specificity is calculated based on the type of selector used in a
CSS rule.
• Inline styles have the highest specificity, followed by IDs,
classes, and elements.
• Using !important in a rule increases its specificity, but should be
used sparingly.
• Specificity is important to understand when troubleshooting
CSS styling issues.
Add your answer
Q127. Difference between Css &amp; SAAS
Ans.
CSS is a styling language used to style web pages, while SASS is a
preprocessor scripting language that is interpreted into CSS.
• CSS is a styling language used to describe the look and
formatting of a document written in HTML.
• SASS is a preprocessor scripting language that is interpreted
into CSS.
• SASS allows for variables, nesting, and mixins to be used in the
stylesheet, making it more efficient and maintainable.
• CSS is the standard styling language for web development,
while S...read more
Add your answer

Q128. What are css media queriee

Ans.
CSS media queries are used to apply different styles based on the
characteristics of the device or browser viewing the page.
• CSS media queries allow for responsive design by targeting
specific device characteristics such as screen width, height,
orientation, and resolution.
• They are written using the @media rule in CSS.
• Example: @media only screen and (max-width: 600px) { /*
styles here */ }
Add your answer

Frequently asked in
Wipro
Q129. What is CSS3 flexbox
Ans.
CSS3 flexbox is a layout module that provides a more efficient way to
align and distribute space among items in a container.
• Flexbox allows for flexible and responsive layouts without using
floats or positioning.
• It uses a parent container and child elements with flexible
properties to create the layout.
• Properties include justify-content, align-items, and flex-wrap.
• Flexbox is supported by all modern browsers.
• Example:
Item 1
Item 2
Add your answer

Frequently asked in
Tata Communications
Q130. Different between inline elements and block elements in css
Ans.
Inline elements flow in the same line, while block elements take up
the full width available.
• Inline elements do not start on a new line and only take up as
much width as necessary.
• Block elements start on a new line and take up the full width
available.
 • Examples of inline elements include span, a, and strong.
• Examples of block elements include div, p, and h1.
Add your answer

Q131. define css positions and and difference in between absute

and relative
Ans.
CSS positions define how an element is positioned on a webpage.
Absolute positioning is relative to the nearest positioned ancestor,
while relative positioning is relative to the element's normal position.
• CSS positions determine how an element is placed on a
webpage
• Absolute positioning positions an element relative to its nearest
positioned ancestor
• Relative positioning positions an element relative to its normal
position
• Absolute positioning removes the element from the
normal...read more
Add your answer

Q132. what are the pseudo elements?

Ans.
Pseudo elements are used in CSS to style specific parts of an element.
• Pseudo elements are denoted by double colons (::) in CSS.
• They allow styling of specific parts of an element, like the first
letter or line.
 • Common pseudo elements include ::before, ::after, ::first-line,
and ::first-letter.
Add your answer

Q133. Pseudo-classes in css

Ans.
Pseudo-classes are used in CSS to select and style elements based on
their state or position in the document.
• Pseudo-classes start with a colon (:)
• Common pseudo-classes include :hover, :active, :focus, :first-
child, :last-child
• Pseudo-classes can be combined with selectors to target specific
elements
• Pseudo-classes can also be used to style links based on their
state
Add your answer

Q134. CSS: Create a triangle using only CSS

Ans.
Use CSS to create a triangle shape
• Use border properties to create a triangle shape
• Set the width and height of the element to 0
• Use borders of different colors to create the triangle shape
Add your answer

Frequently asked in
Infogain
Q135. Different between Grid Flex box layout
Ans.
Grid layout is a two-dimensional layout system while Flexbox is a
one-dimensional layout system.
• Grid layout is best for overall page layout, while Flexbox is best
for aligning items within a container.
• Grid layout allows for precise placement of elements in rows
and columns, while Flexbox is more flexible in arranging items
in a single row or column.
• Grid layout is better suited for complex layouts with multiple
rows and columns, while Flexbox is ideal for simpler layouts
with ...read more
Add your answer

Q136. what is object fit in css

Ans.
Object fit in CSS is a property that specifies how an image or video
should be resized to fit its container.
• Specifies how the content of an element should be resized to fit
its container
• Values include 'fill', 'contain', 'cover', 'none', 'scale-down'
• Example: object-fit: cover; will make the image fill the
container while maintaining aspect ratio
Add your answer

Q137. What is box-sizing: border-box?

Ans.
box-sizing: border-box is a CSS property that includes padding and
border in the element's total width and height.
• It changes the box model so that padding and border are
included in the element's total width and height
• Helps in easier layout design as the total width and height of the
element remains consistent
• Example: div { box-sizing: border-box; width: 100px; padding:
10px; border: 1px solid black; }
Add your answer

Q138. Css full form and html full form

Ans.
CSS stands for Cascading Style Sheets and HTML stands for
HyperText Markup Language.
• CSS - Cascading Style Sheets is used for styling web pages
• HTML - HyperText Markup Language is used for creating the
structure of web pages
Add your answer

Frequently asked in
TCS
Q139. Pseudo class in CSS
Ans.
Pseudo classes in CSS are used to define the special states of an
element.
• Pseudo classes start with a colon (:)
 • They are used to style elements based on user interaction or
element state
• Common pseudo classes include :hover, :active, :focus
Add your answer

Q140. Write a script for an ready-made html and css code.

Ans.
Script for a ready-made HTML and CSS code
• Create a new HTML file and link it to a CSS file
• Add HTML elements and structure the layout
• Style the elements using CSS properties
• Test the code in a browser to ensure it displays correctly
Add your answer

Q141. What is css media queries and difference between min and
max
Ans.
CSS media queries are used to apply different styles based on device
characteristics. Min and max define the range of values.
• Media queries allow for responsive design by adapting to
different screen sizes and orientations
• Min-width and max-width are commonly used to define the
range of screen sizes
• Min-device-width and max-device-width are used to target
specific device characteristics
• Other media query features include min-height, max-height,
orientation, and resolution
Add your answer

Q142. 2] Why we use flex instead of float ? What was lagging in

float ?
Ans.
Flex provides more control over layout and responsiveness compared
to float.
• Flex allows for easier centering and alignment of elements
• Flex provides more control over the order of elements
• Flex allows for responsive design without media queries
• Float can cause issues with clearing and collapsing parent
containers
Add your answer

Q143. Are you comfortable writing your own CSS?

Ans.
Yes, I am comfortable writing my own CSS.
• I have experience in writing CSS for various projects.
• I am familiar with CSS preprocessors like Sass and Less.
• I am comfortable using CSS frameworks like Bootstrap and
Foundation.
• I am proficient in writing responsive CSS for different screen
sizes.
• I am aware of CSS best practices and maintainable code
standards.
Add your answer
Frequently asked in
Nirvana Solutions
Q144. What is the box model in css
Ans.
The box model is a concept in CSS that defines how elements are
displayed as rectangular boxes with content, padding, borders, and
margins.
• The box model consists of four parts: content, padding, border,
and margin.
• Content is the actual content of the box, such as text or an
image.
• Padding is the space between the content and the border.
• Border is the line that surrounds the padding and content.
• Margin is the space between the border and other elements.
• The box model can be adjust...read more
Add your answer

Q145. What is flexbox and how it work.

Ans.
Flexbox is a CSS layout module that allows for flexible and
responsive web design.
• Flexbox is short for 'Flexible Box Layout'.
• It allows for easy alignment and distribution of elements within
a container.
• Flexbox uses a set of properties to define the layout, such as
'display: flex', 'flex-direction', 'justify-content', and 'align-items'.
 • It is commonly used for creating responsive navigation menus,
grids, and card layouts.
• Flexbox is supported by all modern browsers, including
IE...read more
Add your answer

Q146. How to manage bootstrap default css with your code

Ans.
To manage bootstrap default CSS with your code, you can override or
customize the default styles using your own CSS.
• Use custom CSS classes to override specific styles
• Modify the Bootstrap variables to customize the default styles
• Create a separate CSS file to add your own styles and include it
after the Bootstrap CSS file
• Use !important to prioritize your custom styles over Bootstrap
styles
Add your answer

Q147. Create dumic website

Ans.
Creating a dummy website involves designing and developing a basic
website for testing purposes.
• Choose a simple layout and design for the website
• Include placeholder content and images
• Ensure basic functionality like navigation and links work
• Use dummy data for testing purposes
 • Consider using a website builder or coding from scratch
Add your answer

Frequently asked in
Oracle
Q148. How to use positions in css
Ans.
CSS positions are used to control the layout of elements on a
webpage.
• Use 'static', 'relative', 'absolute', or 'fixed' to position elements.
• Elements with 'position: relative' are positioned relative to their
normal position.
• Elements with 'position: absolute' are positioned relative to the
nearest positioned ancestor.
• Elements with 'position: fixed' are positioned relative to the
viewport.
• Use 'top', 'bottom', 'left', and 'right' properties to further adjust
the position of elem...read more
Add your answer

Q149. What is display property

Ans.
Display property is used to define the type of box used for an HTML
element.
• It specifies how an element should be displayed on the web
page.
• It can be set to values like block, inline, inline-block, none, etc.
 • It affects the layout and positioning of the element.
• It can also be used to control the visibility and accessibility of an
element.
• Example: display: block; will make the element a block-level
box.
Add your answer

Q150. 3] What is Css Boxmodel?

Ans.
CSS Box Model is a design concept that describes the layout and
sizing of HTML elements.
• It consists of content, padding, border, and margin.
• Content is the actual content of the element.
• Padding is the space between the content and the border.
• Border is the line that surrounds the padding and content.
• Margin is the space between the border and other elements.
• The box model can be adjusted using CSS properties like
padding, border, and margin.
Add your answer

Q151. Difference b/w full and partial selectors

Ans.
Full selectors select all descendants of a specified element, while
partial selectors select only direct children.
• Full selectors use a space between the parent and child elements,
while partial selectors use the > symbol.
 • Full selectors are more general and can target multiple levels of
descendants, while partial selectors are more specific and target
only direct children.
• Example of full selector: div p selects all
elements inside
elements.
• Example of partial selector: div > ...read more
Add your answer

Q152. what is grid in css

Ans.
Grid in CSS is a layout system that allows for more complex and
responsive designs by dividing a webpage into rows and columns.
• Grid in CSS is used to create a two-dimensional layout system.
• It allows for easy alignment and positioning of elements on a
webpage.
• Grid properties include grid-template-columns, grid-template-
rows, grid-gap, and more.
• Example: .container { display: grid; grid-template-columns: 1fr
1fr 1fr; }
Add your answer

Q153. What do you understand by z index

Ans.
z index determines the stacking order of elements on a webpage.
• z index is a CSS property that specifies the stack order of an
element
 • Elements with a higher z index value will be displayed on top of
elements with a lower value
• Default z index value is 0, negative values are allowed
• z index only works on positioned elements (position: relative,
absolute, fixed)
Add your answer

Q154. Identify locators using xpath and css

Ans.
Locators can be identified using xpath and css for web element
identification in Selenium automation testing.
• XPath can be used to locate elements based on their XML path
in the DOM.
• CSS selectors can be used to locate elements based on their
attributes, classes, or IDs.
• XPath is more powerful but slower than CSS selectors.
• Example: XPath - //input[@id='username']
• Example: CSS - input#username
Add your answer

Frequently asked in
G4S
Q155. CSS specificity.
Ans.
CSS specificity determines which CSS rule applies when multiple
rules target the same element.
 • CSS specificity is calculated based on the number of ID
selectors, class selectors, and element selectors in a rule.
• ID selectors have the highest specificity, followed by class
selectors, and then element selectors.
• Inline styles have the highest specificity and override all other
styles.
• The !important keyword can be used to override all other styles,
but should be used sparingly.
• Spec...read more
Add your answer

Q156. What is the difference between CSS and SASS? what is the
use of Sass
Ans.
SASS is a preprocessor scripting language that is interpreted into
CSS, offering more features and flexibility.
• SASS is a preprocessor for CSS, allowing for variables, nesting,
and mixins to be used in stylesheets.
• SASS code needs to be compiled into CSS before being used in
a web project.
• SASS helps in writing cleaner and more organized CSS code,
making it easier to maintain and update styles.
• CSS is the styling language used for web development, while
SASS is a tool that extend...read more
Add your answer

Frequently asked in
LTIMindtree
Q157. elements of css
Ans.
Elements of CSS include selectors, properties, values, and units.
• Selectors are used to target specific HTML elements for styling.
• Properties define the style to be applied, such as color or font-
size.
• Values are the specific settings for the properties, like 'red' or
'20px'.
• Units specify the measurement type, such as pixels or
percentages.
Add your answer

Q158. Pseudo element in css

Ans.
Pseudo elements in CSS are used to style specific parts of an element,
like the first letter or line.
• Pseudo elements are denoted by :: before the element name, like
::before or ::after.
• They can be used to add decorative elements, like inserting
content before or after an element.
• Common pseudo elements include ::first-line, ::first-letter, and
::selection.
Add your answer

Q159. Psuedo classes in css?

Ans.
Pseudo classes in CSS are used to select and style elements based on
their state or position in the document.
• Pseudo classes start with a colon (:) followed by the name of the
pseudo class
• Common pseudo classes include :hover, :active, :focus, :first-
child, :last-child
• Pseudo classes can be used to style links, form elements, and
other interactive elements
• Pseudo classes can also be combined with other selectors to
create more specific styles
Add your answer

Q160. Box sizing difference and scenario

Ans.
Box sizing property in CSS determines how the total width and height
of an element is calculated.
• Content-box: width and height only include the content, padding
and border are added on top.
• Border-box: width and height include content, padding, and
border.
• Use content-box when you want to specify the width and height
of the content area only.
• Use border-box when you want to specify the width and height
of the entire box including padding and border.
Add your answer

Q161. Full form of css

Ans.
CSS stands for Cascading Style Sheets.
• CSS is a style sheet language used for describing the look and
formatting of a document written in HTML or XML.
• It is used to control the layout, colors, fonts, and other visual
aspects of a web page.
• CSS works by selecting HTML elements and applying styles to
them.
• It allows for separation of content and presentation, making it
easier to maintain and update websites.
• Example:
View 1 answer

Q162. What is html? What is css? Tell me about css and types
Ans.
HTML is a markup language used for creating the structure of web
pages. CSS is a styling language used for designing the appearance of
web pages.
• HTML stands for HyperText Markup Language
• HTML is used to create the structure of web pages using
elements like <div>, <p>, <h1>, etc.
• CSS stands for Cascading Style Sheets
• CSS is used to style the appearance of web pages by defining
properties like color, font size, layout, etc.
• Types of CSS include inline, internal, and external styles...read
more
Add your answer
Frequently asked in
ICICI Bank
Q163. Explain about CSS positions?
Ans.
CSS positions determine the layout of an element on a web page.
• There are four types of CSS positions: static, relative, absolute,
and fixed.
• Static is the default position and elements are positioned
according to the normal flow of the page.
• Relative positions elements relative to their normal position.
• Absolute positions elements relative to the nearest positioned
ancestor.
• Fixed positions elements relative to the viewport and remains in
the same position even when the page is s...read more
View 1 answer

Q164. What is css and types of css.

Ans.
CSS stands for Cascading Style Sheets. It is used to style and layout
web pages.
• CSS is used to add styles to HTML elements.
• There are three types of CSS: inline, internal, and external.
• Inline CSS is applied directly to an HTML element using the
style attribute.
• Internal CSS is defined in the head section of an HTML
document using the style tag.
 • External CSS is defined in a separate file and linked to the
HTML document using the link tag.
Add your answer

Q165. What is use of Css Padding Margin?

Ans.
CSS padding and margin are used to create space around elements
and control their positioning.
• Padding is used to create space inside an element, between the
content and the border.
• Margin is used to create space outside an element, between the
element and other elements.
• Padding and margin can be specified in different units like
pixels, percentages, or em.
• Negative values can be used to overlap elements or reduce
space.
• CSS shorthand properties like 'padding' and 'margin' can
be...read more
View 2 more answers

Q166. Explain Flexbox and CSS grid?

Ans.
Flexbox and CSS grid are layout modules in CSS that allow for
responsive and flexible web design.
• Flexbox is a one-dimensional layout system that allows for easy
alignment and distribution of elements within a container.
 • CSS grid is a two-dimensional layout system that allows for
more complex and flexible layouts.
• Flexbox is best for arranging items in a single row or column,
while CSS grid is best for creating more complex layouts with
multiple rows and columns.
• Both Flexbox and...read more
Add your answer

Q167. What are the flexbox properties

Ans.
Flexbox properties are used for creating flexible and responsive
layouts in CSS.
• display: flex - defines a flex container
• flex-direction - defines the direction of the main axis
• justify-content - aligns items along the main axis
• align-items - aligns items along the cross axis
• flex-wrap - defines whether items should wrap or not
• flex-grow - defines how much a flex item should grow
• flex-shrink - defines how much a flex item should shrink
• flex-basis - defines the initial size of a flex ...read more
Add your answer

Q168. What is media queries and how can we mangane with

bootstrap css
Ans.
Media queries are CSS techniques used to apply different styles based
on the characteristics of the device or viewport.
• Media queries allow us to create responsive designs that adapt to
different screen sizes and devices.
• Bootstrap CSS provides a responsive grid system and predefined
media queries to make it easier to create responsive web
designs.
• We can use Bootstrap's CSS classes like 'col-md-6' to define
different layouts for different screen sizes.
• Media queries can be writt...read more
Add your answer

Q169. What is position absolute and position relative?

Ans.
Position absolute and position relative are CSS properties used to
position elements on a webpage.
• Position absolute positions an element relative to its closest
positioned ancestor.
• Position relative positions an element relative to its normal
position on the webpage.
• Position absolute elements are taken out of the normal flow of
the document.
• Position relative elements are still in the normal flow but can be
moved from their original position.
Add your answer

Frequently asked in
Accenture
Q170. Difference between display flex and display block
Ans.
display flex allows for flexible layouts with items displayed in a row
or column, while display block stacks items vertically.
• display flex allows for items to be displayed in a row or column,
with the ability to adjust spacing, alignment, and order
• display block stacks items vertically, taking up the full width
available
Add your answer

Q171. What do you understand by CSS box model?

Ans.
CSS box model is a design concept that describes how elements are
rendered on a web page.
• The CSS box model consists of four main components: content,
padding, border, and margin.
• The content area is where the actual content of the element is
displayed.
• Padding is the space between the content and the border.
• Border is a line that surrounds the padding and content.
• Margin is the space between the border and other elements on
the page.
• The width and height of an element are calculat...read more
Add your answer

Q172. difference between pseudo elements and pseudo classes

Ans.
Pseudo elements are used to style specific parts of an element, while
pseudo classes are used to style an element based on its state or
position.
• Pseudo elements are denoted by :: before the element name, like
::before or ::after
• Pseudo classes are denoted by a single colon before the class
name, like :hover or :active
• Pseudo elements are used to style parts of an element that do not
exist in the DOM, like adding content before or after an element
• Pseudo classes are used to style...read more
Add your answer

Q173. Grid vs Flexbox CSS

Ans.
Grid is best for layout design, Flexbox is best for aligning items
within a container.
• Grid is best for creating complex layouts with rows and
columns.
• Flexbox is best for aligning items within a container in a single
direction.
• Grid is two-dimensional, while Flexbox is one-dimensional.
• Use Grid for overall layout structure, use Flexbox for aligning
items within a layout.
• Example: Use Grid for creating a website layout with header,
sidebar, and main content sections. Use Flexbox t...read more
Add your answer
Q174. what is z index and why we use
Ans.
z-index is a CSS property that controls the stacking order of elements
on a webpage.
• z-index determines which elements appear on top of others
• Higher z-index values bring elements to the front
• Use z-index to control the layering of elements, especially in
complex layouts
Add your answer

Q175. Xpath and css for web elements

Ans.
Xpath and CSS are used to locate web elements on a webpage.
• Xpath is a language used to navigate through the XML structure
of a webpage.
• CSS selectors are used to target specific HTML elements on a
webpage.
• Xpath can be used to locate elements based on their attributes,
text content, or position on the page.
• CSS selectors can be used to locate elements based on their tag
name, class, ID, or attributes.
• Both Xpath and CSS can be used in automated testing
frameworks like Selenium to...read more
Add your answer
Frequently asked in
Oracle
Q176. Specificity in CSS and how does it works?
Ans.
Specificity in CSS determines which style rule is applied to an
element when multiple rules have conflicting selectors.
• Specificity is calculated based on the selector types and values.
• Inline styles have the highest specificity, followed by IDs,
classes, and elements.
• Specificity is represented by a four-part value (a,b,c,d) where a
is the most significant and d is the least significant.
• Example: div p .class has a specificity of (0,0,1,1) while #id has
a specificity of (0,1,0,0...read more
Add your answer

Q177. box sizing in css

Ans.
Box sizing in CSS determines how the total width and height of an
element is calculated.
• Box-sizing property can have values of content-box (default) or
border-box
• content-box includes only the content, border, and padding in
the width and height calculations
• border-box includes the content, padding, and border in the
width and height calculations
Add your answer
Q178. Tell me full form of html and CSS and types
Ans.
HTML stands for Hypertext Markup Language and CSS stands for
Cascading Style Sheets. There are different types of HTML and CSS.
• HTML - Hypertext Markup Language (types: HTML, HTML5)
• CSS - Cascading Style Sheets (types: CSS, CSS3)
View 1 answer

Frequently asked in
ICICI Bank
Q179. different between grid and flex box
Ans.
Grid is a 2D layout system while Flexbox is a 1D layout system.
• Grid is used for complex layouts while Flexbox is used for
simpler layouts.
• Grid allows for precise placement of elements while Flexbox is
more flexible.
• Grid is better for aligning items in both rows and columns while
Flexbox is better for aligning items in a single row or column.
• Grid is supported in modern browsers while Flexbox has wider
browser support.
Add your answer

Q180. Can you replicate a product listing design in CSS?

Ans.
Yes, I can replicate a product listing design in CSS.
 • I would first analyze the design and break it down into its
components.
• Then, I would use CSS to create the necessary HTML structure
and apply styles to each component.
• I would ensure that the design is responsive and works well on
different screen sizes.
• I would also pay attention to accessibility and ensure that the
design is usable for all users.
• Examples of components include product images, titles,
descriptions, prices, an...read more
View 1 answer

Q181. What is Cass cading style sheet

Ans.
CSS is a style sheet language used for describing the presentation of a
document written in HTML or XML.
• CSS stands for Cascading Style Sheets
• It is used to define styles for web pages, including design,
layout, and variations in display for different devices and screen
sizes
• CSS can be applied to HTML documents in three ways: inline,
internal, and external
• CSS selectors are used to target the HTML elements to which
the styles should be applied
• CSS properties are used to define th...read more
Add your answer
Q182. Why we use CSS
Ans.
CSS is used to style and format web pages, making them visually
appealing and user-friendly.
• CSS is used to control the layout, colors, fonts, and overall
appearance of a website.
• It allows for consistent styling across multiple pages of a
website.
• CSS can be used to create responsive designs that adapt to
different screen sizes.
• It helps improve the user experience by making the website
visually appealing and easy to navigate.
• CSS can also be used to create animations and transit...read
more
Add your answer

Q183. What is flex in CSS?

Ans.
Flex in CSS is a layout module that allows elements to align and
distribute space within a container.
• Flexbox is used for creating flexible and responsive layouts.
• It allows for easy alignment and distribution of elements within
a container.
• Flex properties include flex-direction, justify-content, align-
items, and flex-grow.
Add your answer
Q184. What is uses of CSS
Ans.
CSS is used for styling and formatting web pages, making them
visually appealing and user-friendly.
• Styling HTML elements
• Formatting text, images, and layout
• Creating responsive design for different screen sizes
• Adding animations and transitions
• Customizing colors, fonts, and spacing
Add your answer

Q185. What is about position in css.

Ans.
Position in CSS determines the placement of an element on a web
page.
• Position property can be set to static, relative, absolute, fixed, or
sticky.
• Static is the default position and elements are placed in the
normal flow of the page.
• Relative position is relative to its normal position and can be
adjusted using top, bottom, left, and right properties.
• Absolute position is relative to its nearest positioned ancestor
and can also be adjusted using top, bottom, left, and right
prop...read more
Add your answer
Q186. What is the difference between display: None and
visibiliy:0;
Ans.
display: None removes the element from the flow of the document,
while visibility: 0 hides the element but still takes up space.
• display: None removes the element from the document flow,
making it invisible and not taking up any space.
• visibility: 0 hides the element visually, but it still occupies space
in the layout.
• display: None is commonly used to hide elements completely,
while visibility: 0 is used to hide elements while preserving the
layout.
Add your answer

Frequently asked in
Exterro
Q187. From CSS - What is box model?
Ans.
Box model is a fundamental concept in CSS which defines the
spacing and dimensions of an element.
• The box model consists of content, padding, border, and margin.
• Content area is where the actual content of the element is
displayed.
• Padding is the space between the content and the border.
• Border surrounds the padding and content.
• Margin is the space outside the border, separating the element
from other elements.
 • Example: div { width: 200px; padding: 20px; border: 1px solid
black; ma...read more
Add your answer

Frequently asked in
TCS
Q188. Difference in CSS Selectors like class, id
Ans.
Classes can be used multiple times, IDs are unique. Classes are
denoted by a dot, IDs by a hash.
• Classes can be used multiple times in a document, IDs can only
be used once
• Classes are denoted by a dot (.), IDs are denoted by a hash (#)
• Example: .class1 { color: red; } #id1 { font-size: 16px; }
Add your answer

Frequently asked in
TCS
Q189. xpath and CSS difference
Ans.
XPath is used to navigate through XML documents, while CSS is
used to style HTML elements.
• XPath is more powerful and flexible for navigating XML
documents
• CSS is more commonly used for styling HTML elements
 • XPath uses path expressions to select nodes in an XML
document
• CSS uses selectors to target specific HTML elements
Add your answer

Q190. What is the Difference between Block and inline

elements.Can you give some example of inline Elements.
Ans.
Block elements take up the full width available, while inline elements
only take up as much width as necessary.
• Block elements start on a new line and take up the full width
available (e.g. <div>, <p>, <h1>).
• Inline elements do not start on a new line and only take up as
much width as necessary (e.g. <span>, <a>, <strong>).
Add your answer

Q191. What are the benefits of CSS file for Web Designers?
Ans.
CSS files provide numerous benefits for web designers.
• CSS files separate the design and layout of a website from its
content, making it easier to update and maintain.
• They allow for consistent styling across multiple web pages,
saving time and effort.
• CSS files enable the use of responsive design techniques,
ensuring that websites look good on different devices and screen
sizes.
 • They provide flexibility in terms of customization and allow for
easy experimentation with different ...read more
View 1 answer

Q192. Tell about Saas( Syntactically Awesome Style Sheets)

Ans.
Saas is a CSS preprocessor that extends the functionality of CSS with
variables, mixins, and more.
• Saas stands for Syntactically Awesome Style Sheets
• It allows for the use of variables, mixins, and functions in CSS
• Saas code must be compiled into CSS before it can be used in a
web page
• Saas is often used in conjunction with build tools like Gulp or
Webpack
Add your answer

Frequently asked in
Snapdeal
Q193. What is the difference between inline block and a normal
block in CSS
Ans.
Inline block is similar to inline but can have width and height
properties. Normal block takes up full width and creates a new line.
• Inline block elements can be aligned horizontally and vertically
within a line
• Normal block elements take up full width and create a new line
• Inline block elements can have width and height properties
 • Examples of inline block elements are images and buttons
• Examples of normal block elements are paragraphs and
headings
Add your answer

Q194. How was the importance of css.

Ans.
CSS is crucial for styling and formatting web pages, enhancing user
experience and creating visually appealing designs.
• CSS is used to control the layout, colors, fonts, and overall
appearance of a website.
• It allows for responsive design, making websites adapt to
different screen sizes and devices.
• CSS can be used to create animations, transitions, and
interactive elements on a webpage.
• Without CSS, web pages would be plain and lack visual appeal,
making it harder for users to n...read more
View 1 answer

Frequently asked in
AmbitionBox
Q195. What is justify content
Ans.
justify-content is a CSS property that defines how flex items are
aligned along the main axis of a flex container.
• It is used in CSS flexbox layout.
• It controls the alignment of flex items horizontally.
 • Possible values include: flex-start, flex-end, center, space-
between, space-around, and space-evenly.
• Default value is flex-start.
Add your answer

Q196. What is external css

Ans.
External CSS is a separate file containing styles that can be linked to
an HTML document.
• External CSS helps in separating the style of a website from its
content.
• It allows for easier maintenance and organization of styles.
• External CSS files are linked to HTML documents using the tag.
Add your answer

Q197. Difference between position absolute and relative in css

Ans.
Position absolute removes element from normal flow, relative keeps
element in flow but can be positioned.
• Position absolute removes element from normal flow, allowing
it to be positioned relative to its closest positioned ancestor.
• Position relative keeps element in normal flow but allows it to
be positioned relative to its normal position.
• Position absolute elements are not affected by other elements
and can overlap, while relative elements still affect layout of
other elements...read more
Add your answer
Q198. What is difference between flex and block in display
property css
Ans.
Flex allows items to grow or shrink to fit the container, while block
takes up the full width available.
• Flex items can be resized to fit the container using flex-grow
and flex-shrink properties.
• Block elements take up the full width available and stack
vertically by default.
• Flex items can be aligned horizontally or vertically using
justify-content and align-items properties.
• Block elements can be styled using margin and padding
properties to create space around them.
Add your answer

Q199. diff. bet padding and margin

Ans.
Padding is the space inside an element, while margin is the space
outside an element.
• Padding is used to create space inside an element, while margin
is used to create space outside an element.
• Padding affects the content inside the element, while margin
affects the space around the element.
• Padding is transparent and reveals the background of the
element, while margin is not transparent and does not reveal the
background.
• Example:
Content
Add your answer

Q200. Types of Css selectors

Ans.
CSS selectors are used to target specific elements on a webpage for
styling purposes.
• Type selectors target elements based on their tag name, such as
'div' or 'p'.
• Class selectors target elements with a specific class attribute,
denoted by a period (.), such as '.example'.
• ID selectors target elements with a specific ID attribute, denoted
by a hash (#), such as '#header'.
• Attribute selectors target elements based on their attributes, such
as '[type='text']'.
• Pseudo-class selectors...read more