CSS Answers
0:000:00
CSS Answers
Basic CSS Answers
| # | Question | Answer | Examples |
|---|---|---|---|
| 1 | What is CSS? | Cascading Style Sheets | A language used to describe the presentation of an HTML document |
| 2 | What is the purpose of CSS? | Controls the look and layout of HTML elements | Changing colors, fonts, sizes, spacing, positioning |
| 3 | What is a CSS selector? | A pattern used to select HTML elements to be styled | p, .my-class, #my-id, h1 |
| 4 | What is a CSS property? | A characteristic of an HTML element that can be styled | color, font-size, background-color, margin |
| 5 | What is a CSS value? | The specific setting assigned to a CSS property | red, 16px, blue, 10px |
| 6 | How do you link a CSS file to HTML? | Using the <link> tag in the <head> section | <link rel="stylesheet" href="styles.css"> |
| 7 | What is an inline style? | Styles applied directly to an HTML element using the style attribute | <p style="color: blue;">This text is blue.</p> |
| 8 | What is an internal stylesheet? | Styles defined within <style> tags in the <head> section | <head><style>p { color: red; }</style></head> |
| 9 | What is an external stylesheet? | Styles defined in a separate .css file linked to the HTML | A styles.css file linked via <link> |
| 10 | What is the color property? | Sets the text color of an element | p { color: green; } |
| 11 | What is the font-size property? | Sets the size of the text | h1 { font-size: 24px; } |
| 12 | What is the background-color property? | Sets the background color of an element | div { background-color: lightgray; } |
| 13 | What is the margin property? | Sets the space outside an element's border | p { margin: 10px; } |
| 14 | What is the padding property? | Sets the space inside an element's border, around the content | button { padding: 5px; } |
| 15 | What is the border property? | Sets the border around an element | img { border: 1px solid black; } |
Intermediate CSS Answers
| # | Question | Answer | Examples |
|---|---|---|---|
| 1 | What is a class selector? | Selects elements based on their class attribute | .my-class { font-weight: bold; } |
| 2 | What is an ID selector? | Selects a unique element based on its id attribute | #main-header { text-align: center; } |
| 3 | What is the difference between a class and an ID? | Classes can be applied to multiple elements; IDs must be unique on a page. | <p class="note">Important</p>, <div id="sidebar-nav">Menu</div> |
| 4 | What is a descendant selector? | Selects elements that are descendants of another element | div p { color: blue; } (selects <p> inside a <div>) |
| 5 | What is an attribute selector? | Selects elements based on an attribute name or value | [type="text"] { border: 1px solid gray; } |
| 6 | What is a pseudo-class? | Selects elements based on a specific state (e.g., :hover, :active) | a:hover { color: red; }, input:focus { border-color: blue; } |
| 7 | What is a pseudo-element? | Selects a specific part of an element (e.g., ::first-letter, ::before) | p::first-letter { font-size: 2em; }, h2::before { content: "--- "; } |
| 8 | Explain the CSS Box Model. | Content, Padding, Border, Margin | Each element is a box with these four components. |
| 9 | What is the display property? | Specifies how an element is rendered in the document flow (e.g., block, inline, flex) | span { display: block; }, li { display: inline; }, nav { display: flex; } |
| 10 | What is the difference between block and inline elements? | Block: Starts on a new line, takes full width; Inline: Doesn't start on a new line, takes necessary width | <div> is block, <span> is inline |
| 11 | What is the position property? | Specifies the positioning method for elements (e.g., static, relative, absolute, fixed) | div { position: relative; top: 20px; left: 30px; } |
| 12 | What is position: relative;? | Positions an element relative to its normal position in the document flow | p { position: relative; top: 10px; } |
| 13 | What is position: absolute;? | Positions an element relative to its nearest positioned ancestor (or initial containing block) | span { position: absolute; top: 0; right: 0; } |
| 14 | What is position: fixed;? | Positions an element relative to the viewport (browser window) | header { position: fixed; top: 0; width: 100%; } |
| 15 | What is the z-index property? | Specifies the stacking order of overlapping elements | .front { position: relative; z-index: 10; }, .back { position: relative; z-index: 5; } |
Advanced CSS Answers
| # | Question | Answer | Examples |
|---|---|---|---|
| 1 | What is Flexbox? | A one-dimensional layout model for arranging items in a row or column | .container { display: flex; justify-content: center; align-items: center; } |
| 2 | What is CSS Grid? | A two-dimensional layout model for arranging items in rows and columns | .container { display: grid; grid-template-columns: 1fr 2fr 1fr; } |
| 3 | What is the difference between Flexbox and Grid? | Flexbox is primarily 1D layout (row/column); Grid is 2D layout (rows & columns). | Use Flexbox for aligning items within a component; Use Grid for overall page layout. |
| 4 | Explain the concept of CSS specificity. | How the browser determines which CSS rule to apply when multiple rules target the same element | Inline styles > IDs > Classes/Attributes/Pseudo-classes > Elements. |
| 5 | What are Media Queries? | CSS rules used to apply different styles based on device characteristics (e.g., screen width, height) | @media (max-width: 600px) { body { font-size: 14px; } } |
| 6 | What is Responsive Web Design (RWD)? | Designing web pages to look and function well on various devices and screen sizes | Using Media Queries, flexible layouts (Flexbox/Grid), fluid images. |
| 7 | What is the calc() function? | Allows performing calculations within CSS values | div { width: calc(100% - 20px); } |
| 8 | What are CSS Variables (Custom Properties)? | Allows you to store values that can be reused throughout the stylesheet | :root { --main-color: blue; } h1 { color: var(--main-color); } |
| 9 | What is the transition property? | Creates smooth animations between styles when an element's state changes (e.g., on hover) | button { transition: transform 0.3s ease; } button:hover { transform: scale(1.1); } |
| 10 | What are CSS Animations? | Creates complex sequences of animated effects using keyframes | @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 1s ease; } |
| 11 | What is the transform property? | Applies 2D or 3D transformations to an element (e.g., translate, rotate, scale) | img { transform: rotate(45deg); }, div { transform: scale(1.2); } |
| 12 | What is the filter property? | Applies graphical effects to an element (e.g., blur, brightness, grayscale) | img { filter: grayscale(100%); }, div { filter: blur(5px); } |
| 13 | What is the box-sizing property? | Defines how the total width and height of an element are calculated (including padding and border) | * { box-sizing: border-box; } |
| 14 | What is the overflow property? | Specifies behavior when content overflows an element's box (e.g., hidden, scroll, auto) | .container { overflow: auto; } |
| 15 | What is the concept of CSS Stacking Contexts? | Determines how elements overlap based on certain properties (e.g., position value, z-index) | Elements with position: relative, absolute, fixed, or sticky and z-index (other than auto) create stacking contexts. |