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?
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:
Q2. How to centre 3 div vertically and horizontally using css
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
Q3. What are pseudo classes and pseudo elements in CSS?
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
Q4. Create a responsive template using pure CSS(flex, grid, media query) without using any library or framework!
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
Q5. What is box model? Center the input tag?
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.
Q6. What is css felxbox and attributes
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;
Q7. Create a profile by using css and java script
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
Q8. If we give both id and class to an element which one's style will apply first
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.
CSS Jobs
Q9. What is position: absolute vs position: relative in CSS?
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
Q10. What is the difference between display as flex and display as grid?
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.
Q11. What is Embedded Style Sheet?
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
Q12. What are the version of HTML and CSS ?
HTML has versions like HTML4, HTML5. CSS has versions like CSS2, CSS3.
HTML versions include HTML4, HTML5
CSS versions include CSS2, CSS3
Q13. What is HTML, PHP and CSS
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
Q14. how it differs from HTML ?
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
Q15. what is HTML5? Have you worked with CSS
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
Q16. Difference between display-block and inline-block
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
Q17. write the css box model?
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
Q18. What is CSS and How we can add with HTML?
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
Q19. how do you develop CSS without using bootstrap
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
Q20. difference between margin and padding?
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
Q21. Tell me about id selector in CSS
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; }
Q22. Difference between flex and grid
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.
Q23. How to center align a div in just one line in css.
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.
Q24. Why we use SCSS ?
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.
Q25. What is Z-index in CSS?
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
Q26. list the types of CSS
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.
Q27. write the xpath or CSS code for selected value in the amazon site
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
Q28. Explain the order of specifity in CSS classes, elements, ids, etc
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
Q29. What are pseudo classes
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
Q30. What happened if u not mentioned any font style in css?
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.
Q31. What are differences between SASS, SCSS
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.
Q32. What is the difference between internal style sheet and external css?
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
Q33. What is position property in CSS3
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
Q34. What are css elements?
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.
Q35. Name the CSS positions
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
Q36. what is pseudo element/pseudo child
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
Q37. What is the use of seudo class in css
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
Q38. how to convert rectangle to circlewith css
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%; }
Q39. What will happen if you set display as grid?
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
Q40. what is object fit in css
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
Q41. How to add background image
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; }
Q42. What is box sizing in css
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.
Q43. What is media queries?
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.
Q44. What do you mean by pseudo class
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
Q45. what is css and type of css?
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.
Q46. 1. Design a yin yang using css
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
Q47. How to optimize Css
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
Q48. Difference between css and bootstrap
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
Q49. What are types of CSS and which has more priority
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
Q50. What is the difference between rem and em in css? How to hide something in CSS?
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
Q51. Css visiblity none vs visiblity hidden
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
Q52. What is the full form css
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
Q53. What is pseudo code in css
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.
Q54. What are CSS accessibilities?
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
Q55. Which version of css used
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
Q56. Make a a spiral using css
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
Q57. difference between flexbox and grids
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
Q58. How is SASS complied?
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.
Q59. What is css compliler.
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
Q60. How to target even element using css?
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).
Q61. What is the use of Webkit in CSS3?
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.
Q62. How do use external CSS file in project?
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:
Q63. What is pseudo class in CSS?
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
Q64. what are all basic CSS properties
Basic CSS properties include color, font-size, margin, padding, and display.
color
font-size
margin
padding
display
Q65. What are the different position attributes in css
CSS has various position attributes to position elements on a web page.
position: static
position: relative
position: absolute
position: fixed
position: sticky
Q66. What are the css style specificities
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.
Q67. What is Mixin in SCSS ?
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.
Q68. How to adjust a box on left?
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.
Q69. What is position property in css?
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
Q70. How to use negative margin
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.
Q71. What is CSS box layout
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.
Q72. Difference between external and internal css.
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
Q73. what is position absolute
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.
Q74. how to center an item without flex and grid
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
Q75. Write a code for toggle switching with CSS.
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
Q76. What is box property in css?
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.
Q77. what is css ..css table layout
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
Q78. Difference in inline and inline-block property.
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.
Q79. How to implement external css in ibm baw?
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
Q80. Tell the five background properties in CSS
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
Q81. What is the difference between display flex and display grid
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
Q82. How to add a data in css
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
Q83. what is block scope in css
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
Q84. Tell about CSS3 Flexbox
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
Q85. What is linear gradient in Css?
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);
Q86. how stylesheet are loaded
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
Q87. What are css media queriee
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 */ }
Q88. Why scss over css
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.
Q89. Translation in Angular How we wil do ? CSS
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
Q90. Frameworks of CSS?
CSS frameworks are pre-written CSS code that can be used to speed up development time.
Bootstrap
Foundation
Materialize
Bulma
Semantic UI
Q91. 1. what is react 2.create a tab strcture like when u click add css and open that tab
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.
Q92. CSS Locators for website
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
Q93. Example css , js ,
Example CSS and JS code snippets for web development.
CSS example: body { background-color: lightblue; }
JS example: document.getElementById('demo').innerHTML = 'Hello World!';
Q94. Inline elements and block elements in CSS
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
Q95. Z-indexing in CSS
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
Q96. Use of .scss file
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; }
Q97. Absolute vs relative in css
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
Q98. Fullform of html and css
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)
Q99. Absolute in css
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;
Q100. CSS Full form . Why we use CSS in HTML page
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
Top Interview Questions for Related Skills
Interview Questions of CSS Related Designations
Interview experiences of popular companies
Reviews
Interviews
Salaries
Users/Month