CSS question

-

 

  1. What does CSS stand for?
    Answer: CSS stands for Cascading Style Sheets. It is used to describe the presentation of a document written in HTML or XML.

  2. What is the purpose of CSS?
    Answer: CSS is used to control the style and layout of web pages—including colors, fonts, spacing, positioning, and more—making them visually appealing and user-friendly.

  3. How can you add CSS to a web page?
    Answer: CSS can be added in three ways:

    • Inline CSS: Within the HTML elements using the style attribute.

    • <p style="color: red; font-size: 20px;">This is a red paragraph with inline CSS.</p>

    • Internal CSS: Within a <style> tag in the <head> section.

    •   <style>
          p {
            color: blue;
            font-size: 18px;
          }
        </style>
      </head>

    • External CSS: By linking an external .css file using <link> tag.

    • <head>
        <link rel="stylesheet" href="styles.css">
      </head>

  4. What is the basic syntax of a CSS rule?
    Answer: A CSS rule is written as:
    selector { property: value; } For example: p { color: red; } changes paragraph text to red.

  5. How do you change the text color of an element?
    Answer: Using the color property. Example: h1 { color: blue; }

  6. How do you change the background color of a web page or element?
    Answer: Use the background-color property. Example: body { background-color: lightgrey; }

  7. Which property controls the size of the text?
    Answer: The font-size property. Example: p { font-size: 16px; }

  8. What are some common units used in CSS?
    Answer:

    • Absolute units: px, cm, mm, in

    • Relative units: %, em, rem, vw, vh

  9. How can you make text bold using CSS?
    Answer: Use the font-weight property with value bold. Example: strong { font-weight: bold; }

  10. What is the default position value of an HTML element in CSS?
    Answer: The default value is static, which means the element is positioned according to the normal flow of the page.

  11. What does the display property do in CSS?
    Answer: The display property specifies the display behavior (block, inline, flex, etc.) of an element.

  12. What's the difference between a class and an ID in CSS?
    Answer:

  • Class (.): Can be used multiple times across a page. Class is reusable and starts with .

  • ID (#): Must be unique and used only once per page. ID starts with #

.my-class {
  color: red;
}
#my-id {
  color: blue;
}

  1. How do you define a class selector in CSS?
    Answer: With a dot before the class name: .classname { ... }

  2. How do you define an ID selector in CSS?
    Answer: With a hash symbol before the ID: #idname { ... }

  3. What is the difference between margin and padding?
    Answer:

  • Margin: Space outside the border.

  • Padding: Space inside the border, around the content.

  1. How can you center a block element horizontally?
    Answer: Set a width and use margin: 0 auto;.

  2. Which property changes the font style?
    Answer: Use font-family. Example: p { font-family: Arial, sans-serif; }

  3. What is the CSS box model?
    Answer: It consists of 4 parts: content, padding, border, and margin, which determine the total size of an element.

  4. What is the default display value of a <div> element?
    Answer: block

  5. What is the default display value of a <span> element?
    Answer: inline

  6. How do you add a border to an element?
    Answer: Use the border property. Example: div { border: 1px solid black; }

  7. How can you round the corners of a box in CSS?
    Answer: Use the border-radius property. Example: div { border-radius: 10px; }

  8. What does the z-index property do?
    Answer: It controls the vertical stacking order of elements. Higher values are shown in front.

  9. Difference between position: absolute and relative?
    Answer:

  • absolute: Positioned relative to the nearest positioned ancestor.

  • relative: Positioned relative to its original position.

  1. How do you hide an HTML element with CSS?
    Answer: Using display: none; or visibility: hidden;

  2. What is the :first-child pseudo-class used for?
    Answer: Selects the first child of a parent element.

  3. What is the :last-child pseudo-class used for?
    Answer: Selects the last child of a parent element.

  4. What are pseudo-elements in CSS?
    Answer: These allow you to style specific parts of elements. Example: ::before, ::after

  5. How do you apply a style when a user hovers over an element?
    Answer: Use the :hover pseudo-class. Example: a:hover { color: red; }

  6. What is CSS specificity?
    Answer: It's a system of scoring to determine which CSS rule is applied when multiple rules match the same element.

  1. What is inherit in CSS?
    Answer: The inherit keyword forces a property to inherit its value from the parent element.

  2. How do you apply styles to multiple selectors?
    Answer: Separate selectors with commas. Example: h1, h2, p { color: blue; }

  3. What is a media query in CSS?
    Answer: Media queries apply CSS rules based on screen/device conditions like width or resolution.

  4. How do you target screens smaller than 600px using a media query?
    Answer: @media (max-width: 600px) { ... }

  5. What's the difference between em and rem?
    Answer:

  • em: Relative to the font-size of the parent.

  • rem: Relative to the root (html) font-size.

  1. What are pseudo-classes in CSS?
    Answer: Special keywords used to define a special state of an element, like :hover, :focus, :active.

  2. How can you make an image responsive?
    Answer: By setting max-width: 100% and height: auto.

  3. What is Flexbox in CSS?
    Answer: A layout model that arranges elements efficiently in a container, even when their size is unknown or dynamic.

  4. How do you define a flex container?
    Answer: By setting display: flex; on the parent container.

  5. How do you center content with Flexbox?
    Answer: Use justify-content: center; and align-items: center;.

  6. What does flex-wrap do?
    Answer: It allows flex items to wrap onto multiple lines instead of overflowing.

  7. Difference between min-width and max-width?
    Answer:

  • min-width: Sets the minimum width of an element.

  • max-width: Sets the maximum width it can grow to.

  1. What does position: fixed do?
    Answer: It fixes the element relative to the viewport. It stays in place even when the page is scrolled.

  2. What is the overflow property used for?
    Answer: It controls what happens when content overflows its container. Values include visible, hidden, scroll, and auto.

  3. How to show text overflow as an ellipsis?
    Answer:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

  1. What does opacity control?
    Answer: It sets the transparency level of an element (0 is fully transparent, 1 is fully opaque).

  2. Why use transition in CSS?
    Answer: To animate changes in CSS properties smoothly over a duration.

  3. Write an example of a transition.
    Answer: transition: background-color 0.3s ease;

  4. What is box-shadow?
    Answer: It adds shadow around an element. Syntax: box-shadow: x-offset y-offset blur color;

  5. What is :nth-child(n) used for?
    Answer: To select elements based on their position among siblings.

  1. What is the difference between visibility: hidden; and display: none;?
    Answer: visibility: hidden; hides the element but it still takes up space in the layout. display: none; removes the element from the layout entirely.

  2. How do you make a div fill the height of its parent?
    Answer: Set the div's height to 100% and make sure the parent has a defined height.

  3. What does calc() do in CSS?
    Answer: It allows you to perform calculations for CSS property values. Example: width: calc(100% - 50px);

  4. How do you vertically center an element using Flexbox?
    Answer: Apply display: flex; align-items: center; to the container.

  5. What is the difference between relative and absolute units?
    Answer: Relative units (like %, em, rem) scale based on other elements. Absolute units (like px, cm) do not.

  6. What is a CSS Grid?
    Answer: CSS Grid is a layout system for creating complex web page layouts using rows and columns.

  7. How do you define a grid container?
    Answer: Apply display: grid; to the parent element.

  8. How do you define grid columns?
    Answer: Use grid-template-columns. Example: grid-template-columns: 1fr 2fr;

  9. What does fr mean in CSS Grid?
    Answer: fr stands for fraction and is used to distribute available space in the grid.

  10. How do you create space between grid items?
    Answer: Use the gap property. Example: gap: 10px;

  11. What is the difference between inline and block elements?
    Answer: Block elements take full width and start on a new line. Inline elements only take up as much width as necessary.

  12. How do you apply a linear gradient in CSS?
    Answer: Use the background property. Example: background: linear-gradient(to right, red, blue);

  13. How do you make a website mobile-friendly using CSS?
    Answer: Use responsive design principles including media queries, flexible grids, and relative units.

  14. What is the default value of position in CSS?
    Answer: The default is static.

  15. What is object-fit used for?
    Answer: It defines how media (like images or videos) should fit in their container. Example: object-fit: cover;

  16. What is pointer-events in CSS?
    Answer: It controls how an element responds to mouse/touch interactions. Example: pointer-events: none;

  17. How can you animate an element in CSS?
    Answer: Use the @keyframes rule and the animation property.

  18. What does transform do in CSS?
    Answer: It applies transformations like rotate, scale, translate, and skew. Example: transform: rotate(45deg);

  19. What is backface-visibility in CSS?
    Answer: It defines whether the back face of an element is visible when rotated.

  20. What is will-change in CSS?
    Answer: It hints to the browser which properties will change, optimizing performance for those changes.

  1. What is specificity hierarchy in CSS?
    Answer: Specificity hierarchy determines which rule is applied when multiple selectors target the same element. Inline styles > IDs > Classes/Pseudo-classes/Attributes > Elements/Pseudo-elements. 

/* Less specific */
p { color: red; }
/* More specific */
#main p { color: blue; }

  1. What is the !important declaration in CSS?
    Answer: !important forces a style to override any other rules, regardless of specificity. However, it's considered bad practice if overused. p { color: red !important; }

  2. What is the difference between em and rem?
    Answer: em is relative to the font-size of its parent, while rem is relative to the root element’s font-size.

html { font-size: 16px; }
p { font-size: 2em; } /* 2 times parent */
div { font-size: 2rem; } /* 2 times root */

  1. What is the difference between min-width, max-width, and width?
    Answer:

  • width: Sets a fixed or responsive width.

  • min-width: Ensures the element is not narrower than a certain size.

  • max-width: Prevents the element from growing beyond a size.

div {
  min-width: 200px;
  max-width: 800px;
  width: 100%;
}

  1. How do media queries work in CSS?
    Answer: Media queries apply styles conditionally based on screen size, resolution, or device features. Example: @media (max-width: 768px) { ... }

@media (max-width: 600px) {
  body { background-color: lightblue; }
}

  1. What is a CSS preprocessor?
    Answer: Tools like Sass or LESS extend CSS with variables, nesting, and functions, which are then compiled into regular CSS.

$main-color: #333;
body {
  color: $main-color;
}

  1. What is the difference between nth-child() and nth-of-type()?
    Answer:

  • nth-child(): Targets the nth child regardless of element type.

  • nth-of-type(): Targets the nth child of a specific type (e.g., p:nth-of-type(2)).

li:nth-child(2) { color: red; }
li:nth-of-type(2) { color: blue; }

  1. How do you create a sticky header using CSS?
    Answer: Use position: sticky; top: 0; on the header element.

  2. What is stacking context in CSS?
    Answer: A stacking context is a 3D space where elements are stacked according to z-index. It's created by properties like position, opacity, transform, and z-index.

div {
  position: relative;
  z-index: 10;
}

  1. How do you apply different styles for print media?
    Answer: Use @media print to define styles that apply only when printing a webpage.

@media print {
  body { color: black; background: white; }
}

  1. What is the difference between inline-block and block?
    Answer: inline-block behaves like inline in terms of flow but accepts box model properties like width, height, margin. block breaks the line before and after the element.

span { display: inline-block; width: 100px; }
div { display: block; }

  1. What are keyframes in CSS?
    Answer: Keyframes define the intermediate steps of a CSS animation. Example:  @keyframes move { 0% { left: 0; } 100% { left: 100px; } }

@keyframes slidein {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

  1. What is the difference between transition and animation in CSS?
    Answer:

  • transition animates between two states.

  • animation allows more complex and multi-step animations using keyframes.

div {
  transition: background 0.3s;
  animation: slidein 2s infinite;
}

  1. What are pseudo-classes and how do they differ from pseudo-elements?
    Answer:

  • Pseudo-classes (:hover, :nth-child) select elements in a certain state.

  • Pseudo-elements (::before, ::after) style specific parts of elements.

a:hover { color: red; }
p::first-line { font-weight: bold; }

Comments

Post a Comment

Popular posts from this blog

Basic Web Design with HTML and CSS

-
Image
Webpage A  web page  or  webpage  is a document, commonly written in  HTML , that is viewed in an Internet  browser . A web page can be accessed by entering a  URL  address into a browser's  address bar . A web page may contain text, graphics, and  hyperlinks  to other web pages and files.   WebSite : A website is a collection of several web pages. These pages are linked together with hyperlinks. A website has a unique domain name, and we can access it by entering that domain name in the URL. A domain name is a string of characters that identifies a website. It is what users type in their browser to visit your site.   Web hosting is a service that provides space on a server for your website files, allowing it to be available on the internet. When visitors access your domain name, the hosting provider will transfer those files to their web browsers.   Two types of website Static website ...
Read more

Project Web Design Assignment

-
Image
  Assignment-3 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Employee Information Form</title> </head> <body>     <div style="width:30%; margin: auto;">         <form action="#" method="POST">             <fieldset>                 <legend>Employee Details</legend>                                 <!-- Name Field -->                 <label for="name">Name:</label>                 <input type="text" id="name" name="name" required><br><br>           ...
Read more