CSS Interview Questions - Aspire Techsoft
1. What is CSS and what is its purpose?
ANS: CSS (Cascading Style Sheets) is used to control the presentation and styling of HTML elements on web pages.
2. What are the different types of CSS?
ANS:
1. Inline CSS: Applied directly within an HTML tag
<p style="color: red;">Hello World</p>
2.Internal CSS: Defined within a <style> block in the HTML <head>
<style> p { color: red; } </style>
3. External CSS: Linked via an external file.
<link rel="stylesheet" href="styles.css">
3. What is the difference between ID and class selectors?
ANS: id: Unique, used once per page (#id).
class: Can be reused (.class).
Ex: #header { color: blue; }
.box { color: red; }
4. What is Flexbox?
ANS: Flexbox is a layout model for arranging elements in a flexible way.
Ex. .container {
display: flex;
justify-content: space-between;
}
5. Difference between visibility: hidden and display: none?
ANS: visibility: hidden: Hides the element but keeps its space.
display: none: Removes the element and its space.
6. What is the difference between inline, block, and inline-block elements?
ANS: inline: No line breaks, no width/height control.
block: Starts on a new line, and takes full width.
inline-block: Inline but allows width and height control.
7. What is the box model in CSS?
ANS: The CSS box model describes how elements are structured and how their size is calculated. It consists
Content: The actual content of the element (e.g., text, images).
Padding: The space around the content, inside the border.
Border: The border surrounding the padding (if any).
Margin: The space outside the border, separating elements.
8. Explain CSS Flexbox.
ANS: Flexbox is a layout model that allows elements to be arranged flexibly and responsively. It provides a way to distribute space within a container and flexibly align-items. It consists
display: flex: Activates flexbox on the container.
justify-content: Aligns items horizontally (left, right, center).
align-items: Aligns items vertically (top, bottom, center).
flex-direction: Defines the direction of items (row, column, etc.).
9. Why background and color are separate properties if they should always be set together?
ANS: background is a more complex property because it can include multiple settings (like color, image, position, size, etc.). If background and color were combined, it would make things more complicated and harder to read.
10. What is an Embedded Style Sheet?
ANS: An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire stylesheet in an HTML document by using the STYLE element.
Ex. <style>
body {
background-color: Black;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
Browse our course links: Full Stack Development Training in Pune
To Join our FREE DEMO Session: Click Here
11. What is a CSS selector?
ANS: It is a string that identifies the elements to which a particular declaration applies. It is also referred to as a link between the HTML document and the style sheet. There are several different types of selectors in CSS: -
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
12. Explain the universal selector.
ANS: The universal selector matches the name of any of the element types instead of selecting elements of a specific type.
Ex. <style>
* {
color: green;
font-size: 20px;
}
</style>
13. Name the property for controlling the image position in the background.
ANS: The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage. You can set the following positions:
Center, top, bottom, left, right
14. What are the advantages of External Style Sheets?
ANS. You can create classes for reusing it in many documents.
2.1 By using it, you can control the styles of multiple documents from one file.
3 .In complex situations, you can use selectors and grouping methods to apply styles.
15. What are CSS backgrounds, list the properties?
ANS: The CSS background properties are used to define the background effects for elements. CSS background properties are as follows:
background-color: This property specifies the background color of an element.
background-image: This property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
background-repeat: By default, the background image property repeats the image both horizontally and vertically.
background-attachment: This property is used to fix the background ground image. The image will not scroll with the page.
background-position: This property is used to set the image to a particular position.
16. What are the different CSS border properties?
ANS: CSS border properties allow us to set the style, color, and width of the border.
Border Style: The border-style property specifies the type of border. None of the other border properties will work without setting the border style.
Border Width: Border width sets the width of the border. The width of the border can be in px, pt, cm, or thin, medium, and thick.
Border Color: This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.
17. What is the difference between CSS border and outline?
ANS: CSS border properties allow us to set the style, color, and width of the border.
CSS outline property allows us to draw a line around the element, outside the border.
18 . What are the different CSS link states?
ANS: A link is a connection from one web page to another web page. CSS property can be used to style the links in various different ways.
There are four states of links given below:
a:link: This is a normal, unvisited link.
a:visited: This is a link visited by a user at least once
a:hover: This is a link when the mouse hovers over it
a:active: This is a link that is just clicked.
19. How can we hide an element in CSS?
ANS: The style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery.
To hide an element, set the style display property to “none”.
Ex. display: "none";
20. What are CSS Combinators?
CSS combinators explain the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purposes. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators.
There are four types of combinators available in CSS which are discussed below:
1. General Sibling selector (~)
2 .Adjacent Sibling selector (+)
3 .Child selector (>)
4. Descendant selector (space)
General Sibling selector: The general sibling selector is used to select the element that follows the first selector element and also shares the same parent as the first selector element. This can be used to select a group of elements that share the same parent element.
Adjacent Sibling selector: The Adjacent sibling selector is used to select the element that is adjacent or the element that is next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.
Child Selector: This selector is used to select the element that is the immediate child of the specified tag. This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent.
Descendant selector: This selector is used to select all the child elements of the specified tag. The tags can be the direct child of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.
Browse our course links: Full Stack Development Training in Pune
To Join our FREE DEMO Session: Click Here
Get More Information