1. What is CSS?
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation and
visual styling of an HTML document. It controls the layout, formatting, colors, fonts, and
other visual aspects of a web page.
2. What are the different ways to include CSS styles in an HTML document?
There are three main ways to include CSS styles in an HTML document:
Inline CSS: Using the style attribute within HTML tags to define individual styles.
Internal CSS: Placing CSS code within <style> tags in the <head> section of an HTML document.
External CSS: Linking an external CSS file using the <link> tag within the <head> section of an HTML
document.
3. What are the different CSS selectors?
CSS selectors are used to select and target specific HTML elements. Some commonly used
CSS selectors include:
Element selector: Selects elements based on their tag name (e.g., p, h1, div).
Class selector: Selects elements with a specific class name (e.g., .my-class).
ID selector: Selects an element with a specific ID (e.g., #my-id).
Attribute selector: Selects elements based on their attribute values (e.g., [type="text"]).
4. What is the box model in CSS?
The box model is a fundamental concept in CSS that describes how elements are displayed
and structured. It consists of the content area, padding, border, and margin. Understanding
the box model is essential for controlling and manipulating the layout and spacing of
elements on a web page.
5. What is the difference between margin and padding?
Margin and padding are both CSS properties that affect the spacing around an element, but
they have different behaviors:
Margin: Specifies the space outside the border of an element, creating space between elements.
Padding: Specifies the space between the content of an element and its border.
6. What is the difference between classes and IDs in CSS?
Classes: Classes are used to target multiple elements on a page. Multiple elements can share the
same class, and one element can have multiple classes assigned to it.
IDs: IDs are used to target a specific element uniquely. Each ID on a page must be unique, and an ID
can only be assigned to one element.
7. What is a pseudo-class in CSS?
A pseudo-class is a keyword added to a selector that specifies a special state or condition of
an element. Some examples of pseudo-classes include :hover, :active, :focus, and :nth-child.
8. What is CSS specificity?
CSS specificity is a set of rules that determines which CSS styles are applied to an element
when multiple conflicting styles are defined. It follows a specificity hierarchy based on
selectors, IDs, classes, and elements. The more specific a selector, the higher its specificity.
9. What is the difference between display: block, display: inline, and display: inline-block?
display: block: This value makes an element a block-level element, meaning it takes up the full width
available and starts on a new line.
display: inline: This value makes an element an inline element, meaning it takes up only as much
width as necessary and does not start on a new line.
display: inline-block: This value combines characteristics of block and inline elements. It takes up only
as much width as necessary and allows other elements to be placed next to it. However, it still
respects block-level properties like width and height.
10. What is the CSS "box-sizing" property used for?
The box-sizing property is used to control how the total width and height of an element are
calculated. By default, the box-sizing property is set to content-box, which includes only the
content area. However, by setting it to border-box, the element's width and height will
include the padding and border in the total calculation.
11. What is the purpose of the float property in CSS?
The float property is used to specify whether an element should float to the left or right of its
container. When an element is floated, other elements can wrap around it. The commonly
used values are left and right.
12. What is the CSS "clearfix" technique used for?
The "clearfix" technique is used to clear or fix the floating elements within a container. It prevents the
container from collapsing and ensures that subsequent elements are properly displayed below the
floated elements. It typically involves adding a CSS class with the ::after pseudo-element to the
container and applying appropriate styles.
13. How can you center an element horizontally and vertically in CSS?
To center an element horizontally, you can use margin: 0 auto; along with a specified width. To
center an element vertically, you can use the CSS Flexbox or CSS Grid layout techniques. For Flexbox,
you can use display: flex; on the container along with align-items: center; and justify-content: center;.
For Grid, you can use display: grid; on the container along with align-items: center; and justify-items:
center;.
14. What is the CSS "z-index" property used for?
The z-index property is used to control the stacking order of positioned elements on a web page. It
specifies the element's position along the z-axis (depth). Elements with a higher z-index value appear
on top of elements with a lower value. A higher z-index can be achieved by assigning a greater value
or using position: relative or position: absolute on the element.
15. What are CSS vendor prefixes?
CSS vendor prefixes are prefixes added to CSS properties to specify different versions or
implementations of a CSS feature by various browser vendors. They were historically used to ensure
cross-browser compatibility during the implementation of new CSS features. However, with
improved browser support, vendor prefixes are becoming less necessary.
What is the purpose of the CSS "media queries"?
16. Media queries are used in CSS to apply different styles based on different device
characteristics, such as screen size, resolution, orientation, or device capabilities. They allow
for responsive web design by adapting the layout and styling of a page based on the user's
device or viewport.
What is the CSS "flexbox" layout and how does it work?
17. Flexbox is a CSS layout model that provides a flexible way to distribute and align elements
within a container. It consists of a parent container (flex container) and child elements (flex
items). By applying various flex properties to the container and items, you can control their
size, order, alignment, and spacing.
18. What is the CSS "grid" layout and how does it work?
CSS Grid Layout is a two-dimensional layout system that allows you to create complex grid structures
for web pages. It involves defining a grid container and dividing it into rows and columns. By
specifying grid areas and using grid properties, you can control the placement and alignment of
elements within the grid.
19. What is the CSS "transform" property used for?
The transform property in CSS is used to apply transformations to elements, such as rotating, scaling,
skewing, or translating (moving) them. It allows you to modify the visual appearance and position of
an element without affecting the layout or flow of other elements.
20. What is the CSS "transition" property used for?
The transition property is used to create smooth transitions between different property values over a
specified duration. It allows you to control the timing and animation of CSS property changes, such
as color, size, or position.
21. What is the CSS "pseudo-element" and "pseudo-class"?
Pseudo-elements: Pseudo-elements are used to style specific parts of an element. They are indicated
by the double colons (::) notation and can be used to add content before or after an element
(::before, ::after) or select a specific part of an element (::first-line, ::first-letter).
Pseudo-classes: Pseudo-classes are used to select elements based on specific states or conditions.
They are indicated by a single colon (:) notation and are used for styling elements in different states
like :hover, :active, :focus, or selecting elements based on position (:first-child, :nth-child()).
22. What is the CSS "box-shadow" property used for?
The box-shadow property is used to add a shadow effect to an element. It allows you to control the
color, size, blur radius, spread distance, and position of the shadow. It is commonly used to add
depth and visual effects to elements.
What is the CSS "inheritance" property?
23. CSS inheritance is the process by which styles are passed from parent elements to their child
elements. Inheritance allows you to define styles at higher levels in the document tree and
have them apply to nested elements. Some properties, like font styles and text properties, are
inherited by default, while others, like padding and margin, are not.
24. What is the purpose of the CSS "clearfix" technique?
The "clearfix" technique is used to contain floated elements within a parent container. It prevents the
container from collapsing when all its child elements are floated. The clearfix technique typically
involves adding a CSS class or pseudo-element to the container with specific clearing styles to
establish a new block formatting context.
