CSS

Skill
CSS

Top 250 CSS Interview Questions and Answers 2024

250 questions found

Updated 11 Dec 2024

Q1. How do we link our stylesheet with the HTML?

Ans.

Linking stylesheet with HTML is done using the link tag in the head section of HTML.

  • Use the link tag with rel attribute set to stylesheet and href attribute set to the path of the stylesheet file.

  • Place the link tag inside the head section of the HTML document.

  • Example:

Add your answer
right arrow

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
right arrow

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
right arrow

Q4. 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
right arrow
Are these interview questions helpful?

Q5. 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
right arrow

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
right arrow
Share interview questions and help millions of jobseekers 🌟

Q7. Create a profile by using css and java script

Ans.

Create a profile using CSS and JavaScript

  • Use CSS to style the profile layout

  • Use JavaScript to add interactive elements like buttons or animations

  • Include a profile picture, name, bio, and contact information

  • Add hover effects or transitions for a polished look

Add your answer
right arrow
Frequently asked in

Q8. If we give both id and class to an element which one's style will apply first

Ans.

The style applied by the id selector will take precedence over the style applied by the class selector.

  • The id selector has a higher specificity than the class selector.

  • If both selectors have the same specificity, the style applied by the id selector will still take precedence.

  • It is generally recommended to avoid giving both id and class to the same element to prevent confusion and maintain a clear style hierarchy.

View 1 answer
right arrow

CSS Jobs

Application Developer 5-10 years
Accenture Solutions Pvt Ltd
3.9
Hyderabad / Secunderabad
UI Developer 2-8 years
CGI Information Systems and Management Consultants
4.0
Bangalore / Bengaluru
Angular Developer | Sr. Consultant 6-9 years
Deloitte
3.8
Pune

Q9. What is position: absolute vs position: relative in CSS?

Ans.

position: absolute takes element out of normal flow, position: relative keeps element in normal flow but allows for positioning

  • position: absolute removes element from normal flow and positions it relative to the nearest positioned ancestor

  • position: relative keeps element in normal flow but allows for positioning relative to its normal position

  • position: absolute elements are positioned relative to the nearest positioned ancestor, if none then relative to the initial containing...read more

Add your answer
right arrow

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
right arrow

Q11. What is Embedded Style Sheet?

Ans.

Embedded Style Sheet is a type of CSS that is written directly within the HTML file.

  • Embedded Style Sheet is used to define the style of a single HTML document.

  • It is written within the

View 1 answer
right arrow

Q12. What are the version of HTML and CSS ?

Ans.

HTML has versions like HTML4, HTML5. CSS has versions like CSS2, CSS3.

  • HTML versions include HTML4, HTML5

  • CSS versions include CSS2, CSS3

Add your answer
right arrow
Frequently asked in

Q13. What is HTML, PHP and CSS

Ans.

HTML is a markup language used for creating the structure of web pages. PHP is a server-side scripting language used for web development. CSS is a style sheet language used for designing the appearance of web pages.

  • HTML stands for HyperText Markup Language

  • HTML is used to create the structure and content of web pages

  • PHP stands for Hypertext Preprocessor

  • PHP is used for server-side scripting to generate dynamic web pages

  • CSS stands for Cascading Style Sheets

  • CSS is used to define ...read more

Add your answer
right arrow

Q14. how it differs from HTML ?

Ans.

HTML is a markup language used to create web pages, while CSS is used to style and layout those pages.

  • HTML is used to structure content on a web page

  • CSS is used to style and layout that content

  • HTML provides the basic structure of a web page, while CSS provides the visual design

  • HTML uses tags to define elements, while CSS uses selectors to target those elements

  • HTML is a markup language, while CSS is a style sheet language

Add your answer
right arrow
Frequently asked in

Q15. what is HTML5? Have you worked with CSS

Ans.

HTML5 is the latest version of HTML used for creating web pages. CSS is used for styling the web pages.

  • HTML5 is the fifth version of HTML

  • It includes new features like video, audio, and canvas elements

  • CSS is used for styling the web pages

  • CSS stands for Cascading Style Sheets

  • CSS can be used to change the font, color, layout, and more

Add your answer
right arrow

Q16. Difference between display-block and inline-block

Ans.

display-block makes an element a block-level element, taking up the full width of its container. inline-block allows other elements to sit beside it.

  • display-block makes an element a block-level element

  • display-block takes up the full width of its container

  • inline-block allows other elements to sit beside it

Add your answer
right arrow

Q17. 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
right arrow

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

Ans.

CSS is a styling language used to add design and layout to HTML web pages.

  • CSS stands for Cascading Style Sheets.

  • It is used to separate the presentation of a web page from its content.

  • CSS can be added to HTML using the tag or the

Add your answer
right arrow

Q19. 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
right arrow

Q20. 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
right arrow

Q21. 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
right arrow

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
right arrow

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
right arrow
Frequently asked in

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
right arrow

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
right arrow

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
right arrow

Q27. 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
right arrow

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
right arrow

Q29. 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
right arrow

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
right arrow

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
right arrow

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
right arrow

Q33. 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
right arrow
Frequently asked in

Q34. 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
right arrow

Q35. Name the CSS positions

Ans.

CSS positions include static, relative, absolute, fixed, and sticky.

  • 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

  • Sticky - acts like a combination of relative and fixed positioning

Add your answer
right arrow

Q36. 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
right arrow
Frequently asked in

Q37. 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
right arrow

Q38. 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
right arrow

Q39. 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
right arrow

Q40. 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
right arrow

Q41. 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
right arrow

Q42. What is box sizing in css

Ans.

Box sizing in CSS is a property that allows you to control how the total width and height of an element is calculated.

  • Box sizing can be set to 'content-box' (default) or 'border-box'.

  • When set to 'border-box', padding and border are included in the element's total width and height.

  • This can help prevent layout issues when adding padding or borders to elements.

Add your answer
right arrow

Q43. 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
right arrow

Q44. 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
right arrow

Q45. 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
right arrow

Q46. 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
right arrow

Q47. 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
right arrow

Q48. 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
right arrow

Q49. 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
right arrow

Q50. 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
right arrow

Q51. 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
right arrow

Q52. 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
right arrow

Q53. 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
right arrow

Q54. 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
right arrow
Frequently asked in

Q55. 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
right arrow

Q56. 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
right arrow

Q57. 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
right arrow

Q58. 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
right arrow

Q59. 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
right arrow

Q60. 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
right arrow

Q61. 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
right arrow

Q62. 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
right arrow

Q63. 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
right arrow

Q64. 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
right arrow

Q65. 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
right arrow
Frequently asked in

Q66. 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
right arrow
Frequently asked in

Q67. 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
right arrow

Q68. 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
right arrow
Frequently asked in

Q69. What is position property in css?

Ans.

Position property in CSS specifies the positioning method of an element.

  • It is used to set the position of an element relative to its parent or to the browser window.

  • It can take values like static, relative, absolute, fixed, sticky.

  • Static is the default value which means the element is 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....read more

Add your answer
right arrow

Q70. 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
right arrow

Q71. 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
right arrow

Q72. 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
right arrow

Q73. 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
right arrow

Q74. 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
right arrow

Q75. 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
right arrow

Q76. 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
right arrow

Q77. 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
right arrow

Q78. 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
right arrow

Q79. 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
right arrow
Frequently asked in

Q80. 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
right arrow

Q81. 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
right arrow

Q82. 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
right arrow

Q83. 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
right arrow

Q84. 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
right arrow
Frequently asked in

Q85. 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
right arrow

Q86. 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
right arrow

Q87. 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
right arrow
Frequently asked in

Q88. 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
right arrow

Q89. 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
right arrow

Q90. 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
right arrow

Q91. 1. what is react 2.create a tab strcture like when u click add css and open that tab

Ans.

React is a JavaScript library for building user interfaces.

  • React is a popular JavaScript library for building user interfaces.

  • To create a tab structure in React, you can use components like Tabs and TabPanels.

  • When a tab is clicked, you can use state to show or hide the content of that tab.

Add your answer
right arrow

Q92. 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
right arrow

Q93. 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
right arrow

Q94. 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

Add your answer
right arrow

Q95. 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

Add your answer
right arrow

Q96. Use of .scss file

Ans.

Using .scss file for styling in web development

  • SCSS is a preprocessor for CSS

  • Allows for variables, nesting, mixins, functions, and more

  • Helps organize and streamline styling code

  • Example: $primary-color: #333; body { color: $primary-color; }

Add your answer
right arrow

Q97. Absolute vs relative in css

Ans.

Absolute positioning in CSS is based on the exact coordinates of an element, while relative positioning is based on the element's normal position in the document flow.

  • Absolute positioning removes the element from the normal document flow and positions it relative to its closest positioned ancestor.

  • Relative positioning moves the element relative to its normal position in the document flow.

  • Absolute positioning is often used for elements that need to be precisely placed on the p...read more

Add your answer
right arrow

Q98. Fullform of html and css

Ans.

HTML stands for Hypertext Markup Language and CSS stands for Cascading Style Sheets.

  • HTML is used for creating the structure of a webpage, while CSS is used for styling and formatting the webpage.

  • HTML uses tags to define elements on a webpage, while CSS uses selectors to apply styles to those elements.

  • Example:

    This is a heading

    (HTML) and h1 { color: blue; } (CSS)

View 1 answer
right arrow

Q99. Absolute in css

Ans.

Absolute in CSS is a positioning property that positions an element relative to its closest positioned ancestor.

  • Absolute positioning removes the element from the normal flow of the document.

  • The element is positioned based on the nearest positioned ancestor.

  • Use top, bottom, left, and right properties to position the element.

  • Example: position: absolute; top: 50px; left: 30px;

Add your answer
right arrow

Q100. CSS Full form . Why we use CSS in HTML page

Ans.

CSS stands for Cascading Style Sheets. We use CSS in HTML pages to control the appearance and layout of web content.

  • CSS is used to style HTML elements and define their presentation.

  • It allows us to separate the content and structure of a webpage from its design.

  • CSS provides a wide range of styling options, including colors, fonts, margins, and positioning.

  • By using CSS, we can create consistent and visually appealing web pages.

  • It enables us to easily make changes to the design ...read more

View 1 answer
right arrow
1
2
3
Next
Interview Tips & Stories
Ace your next interview with expert advice and inspiring stories

Interview experiences of popular companies

3.7
 • 10k Interviews
3.9
 • 7.8k Interviews
3.7
 • 7.3k Interviews
3.8
 • 5.4k Interviews
3.7
 • 5.2k Interviews
3.8
 • 4.7k Interviews
4.0
 • 751 Interviews
3.4
 • 257 Interviews
4.0
 • 248 Interviews
View all
CSS Interview Questions
Share an Interview
Stay ahead in your career. Get AmbitionBox app
qr-code
Helping over 1 Crore job seekers every month in choosing their right fit company
70 Lakh+

Reviews

5 Lakh+

Interviews

4 Crore+

Salaries

1 Cr+

Users/Month

Contribute to help millions
Get AmbitionBox app

Made with ❤️ in India. Trademarks belong to their respective owners. All rights reserved © 2024 Info Edge (India) Ltd.

Follow us
  • Youtube
  • Instagram
  • LinkedIn
  • Facebook
  • Twitter
Profile Image
Hello, Guest
Awards 2025
Contribute to help millions!
Write a review
Write a review
Share interview
Share interview
Contribute salary
Contribute salary
Add office photos
Add office photos
Add office benefits
Add office benefits
Stay ahead in your career with AmbitionBox app