Scribd
Upload
4 views

css

The document provides a comprehensive overview of CSS, covering fundamental concepts such as the CSS Box Model, selectors, specificity, and various properties like Flexbox, Grid, and animations. It explains how to apply CSS, create responsive designs, and utilize advanced features like media queries and preprocessors. Additionally, it highlights the differences between various CSS properties and units, along with practical applications for styling web pages.

Uploaded by

ymathsdoubt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

css

The document provides a comprehensive overview of CSS, covering fundamental concepts such as the CSS Box Model, selectors, specificity, and various properties like Flexbox, Grid, and animations. It explains how to apply CSS, create responsive designs, and utilize advanced features like media queries and preprocessors. Additionally, it highlights the differences between various CSS properties and units, along with practical applications for styling web pages.

Uploaded by

ymathsdoubt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

1. What is CSS?

Answer: CSS (Cascading Style Sheets) is a style sheet language used for describing the
presentation of a web page, including its layout, design, colors, fonts, and spacing.

2. What are the different ways to apply CSS to a web page?

Answer: CSS can be applied in three ways:

• Inline CSS (within the HTML element using the style attribute)
• Internal CSS (inside the <style> tag within the <head> section)
• External CSS (linked using the <link> tag to an external .css file)

3. What is the CSS Box Model?

Answer: The CSS box model defines the rectangular boxes generated for elements,
including:

• Content
• Padding
• Border
• Margin

4. What is the difference between class and id selectors in CSS?

Answer:

• A class selector (.) can be applied to multiple elements, and is reusable.


• An ID selector (#) is unique and should only be applied to one element per page.

5. What is specificity in CSS?

Answer: Specificity is a ranking system used to determine which CSS rule applies when
multiple rules target the same element. It’s calculated based on the type of selectors used
(ID, class, element).
6. What is the !important rule in CSS?

Answer: The !important rule is used to give a CSS declaration higher priority, overriding
any other styles, even if they have higher specificity.

7. What is the difference between padding and margin?

Answer:

• Padding is the space between the content and the border.


• Margin is the space outside the border, separating the element from other
elements.

8. What are pseudo-classes in CSS?

Answer: Pseudo-classes are keywords added to selectors that specify a special state of an
element, like :hover, :active, :focus, and :first-child.

9. What are pseudo-elements in CSS?

Answer: Pseudo-elements target parts of an element, such


as ::before, ::after, ::first-letter, and ::first-line.

10. What is the float property in CSS?

Answer: The float property is used to position an element to the left or right, allowing
other content to flow around it.

11. What is the difference between display: none and visibility:


hidden?

Answer:

• display: none removes the element from the document flow entirely.
• visibility: hidden hides the element but still takes up space in the layout.
12. What is Flexbox in CSS?

Answer: Flexbox is a layout model that allows you to design complex layouts with ease. It
distributes space within a container and aligns content in both horizontal and vertical
directions.

13. What is the difference between position: absolute and position:


relative?

Answer:

• absolute positions the element relative to its nearest positioned ancestor (non-
static).
• relative positions the element relative to its normal position in the document
flow.

14. What is CSS Grid?

Answer: CSS Grid is a two-dimensional layout system for the web, allowing you to create
complex grid-based layouts with rows and columns.

15. What is the z-index property in CSS?

Answer: The z-index property controls the stacking order of elements. Higher z-index
values are stacked above lower values.

16. Explain box-sizing: border-box.

Answer: box-sizing: border-box includes padding and border in the element’s total
width and height, making it easier to manage layouts.

17. What is the difference between inline, block, and inline-block?

Answer:

• inline elements do not start on a new line and only take up as much width as
necessary.
• block elements start on a new line and take up the full width available.
• inline-block elements behave like inline elements but can have width and
height properties.

18. What is the purpose of the @media rule in CSS?

Answer: The @media rule allows for applying styles based on different conditions like
screen size, resolution, or device orientation, making designs responsive.

19. What is a CSS preprocessor?

Answer: A CSS preprocessor (like Sass or LESS) allows you to write CSS more efficiently by
using variables, nested rules, mixins, functions, and more.

20. What is the transition property in CSS?

Answer: The transition property allows you to change property values smoothly (with
animation) over a given duration when a state change occurs.

21. What is the transform property in CSS?

Answer: The transform property allows you to manipulate an element by rotating,


scaling, skewing, or translating it.

22. What is a responsive design in CSS?

Answer: Responsive design involves creating web pages that adapt to different screen
sizes and devices using flexible layouts, media queries, and fluid grids.

23. What is the calc() function in CSS?

Answer: The calc() function allows you to perform mathematical calculations to


determine property values, such as width, height, and margin.

24. What is a CSS animation?

Answer: CSS animations allow elements to change properties over time, enabling
movement, transformations, and changes in appearance.
25. What is opacity in CSS?

Answer: The opacity property controls the transparency of an element, with a range from
0 (fully transparent) to 1 (fully opaque).

26. What are the different types of positioning in CSS?

Answer:

• static (default)
• relative
• absolute
• fixed
• sticky

27. How do you make a website mobile-friendly with CSS?

Answer: Use responsive design techniques like flexible layouts, fluid grids, and media
queries to adjust the layout for different screen sizes.

28. What is @font-face in CSS?

Answer: @font-face allows you to define custom fonts that can be loaded and used on a
web page, regardless of whether the font is installed on the user's device.

29. What are media queries in CSS?

Answer: Media queries are used to apply CSS rules based on specific conditions, such as
screen width, device orientation, or resolution.

30. What is the difference between em and rem units in CSS?

Answer:

• em is relative to the font size of the parent element.


• rem (root em) is relative to the font size of the root element (<html>).
31. What is the vh and vw unit in CSS?

Answer: vh stands for viewport height and vw stands for viewport width. 1 vh is 1% of the
viewport height, and 1 vw is 1% of the viewport width.

32. What is the box-shadow property in CSS?

Answer: The box-shadow property adds shadow effects around an element’s frame, with
options for offset, blur, spread, and color.

33. What is the text-shadow property in CSS?

Answer: The text-shadow property allows you to add shadow effects to text, with values
for horizontal and vertical offsets, blur radius, and color.

34. How can you make a circular image in CSS?

Answer: Set border-radius: 50% on the image, and ensure the width and height are
equal to create a circle.

35. What are border-radius and how is it used?

Answer: border-radius is used to create rounded corners on elements by defining the


radius of each corner.

36. What is a linear-gradient in CSS?

Answer: A linear-gradient is a CSS function used to create a gradient that transitions


from one color to another in a straight line.

37. How do you center an element using CSS?

Answer: To center an element horizontally, use margin: 0 auto; (with a specified


width). To center vertically, use Flexbox or Grid layout.

38. What is the visibility property in CSS?

Answer: The visibility property controls whether an element is visible or not, with
values like visible, hidden, or collapse.
39. What is the clip-path property in CSS?

Answer: The clip-path property defines a clipping region that determines which part of
an element is visible and which part is hidden.

40. How to create a sticky navbar in CSS?

Answer: Use position: sticky; along with top: 0; to keep a navbar at the top of the
viewport when scrolling.

41. What is the difference between inline and block elements?

Answer: inline elements do not start on a new line and only take up as much space as
their content, while block elements occupy the full width of their container.

42. How do you apply styles to a group of elements in CSS?

Answer: You can group multiple selectors by separating them with commas. For example:
h1, h2, p { color: blue; }

43. How do you make a responsive layout with Flexbox?

Answer: Use Flexbox properties like flex-wrap, justify-content, and align-items


along with media queries to adjust the layout for different screen sizes.

44. What are ::before and ::after in CSS?

Answer: ::before and ::after are pseudo-elements used to insert content before or
after an element's actual content.

45. What are position: fixed and position: sticky used for?

Answer: position: fixed keeps an element in a fixed position relative to the viewport,
while position: sticky toggles between relative and fixed, depending on scroll
position.
46. What is the opacity property in CSS?

Answer: The opacity property specifies the transparency level of an element, with values
from 0 (completely transparent) to 1 (completely opaque).

47. What is the use of text-transform in CSS?

Answer: The text-transform property controls the capitalization of text, with values like
uppercase, lowercase, and capitalize.

48. How do you apply a hover effect in CSS?

Answer: Use the :hover pseudo-class to apply styles when an element is hovered over,
for example: a:hover { color: red; }

49. What is the cursor property in CSS?

Answer: The cursor property specifies the type of cursor to be displayed when hovering
over an element, such as pointer, crosshair, or wait.

50. What is the transform property in CSS?

Answer: The transform property allows you to apply transformations to an element such
as rotating, scaling, or translating it in 2D or 3D space.

You might also like