91 CSS Interview Question Sr.No Topic Number of Questions 1 | Basic CSS 10 2 | Selectors 4 3 | CSS Box Model 7 4| Layout 8 5 | Typography 7 6 | Colors and Backgrounds 9 7| CSS Transition 5 8 | CSS Animation 5 9 | CSS Transtorm {10 10 | CSS Flex 48. 11 | Grid Layout 10 12 | Responsive Design 8 Totat | 91Here are 99 CSS questions that cover a wide range of Q.5] What are the different ways to apply CSS. topics, including theory, concepts, and practical questions. These questions will help you prepare to a web page? effectively for an interview. SS can be applied in three ways: : 4 Intine styles: Direct within an HTML element. Basic CSS 2, Internal stylesheets: Within a element in the chesd> section ofan HTML document 3. External stylesheets: inked toan HTML document Q.1] What does CSS stand for? using the element. ‘+ 08S stands for Cascading Style Sheets. Q.6] What is an inline style? Q.2] What is the purpose of CSS? * Inline styles are ©SS styles applied directly to an individual HTML element using the style attribute ‘© C8Sis used to style and format the appearance of \web pages written in HTML and XML. 5 + allows web developers to control aspects like layout, colors, fonts, and spacing of HTML Q.7] What is an internal stylesheet? elements. + Aninternal stylesheet is CSS code written within a Q.3] How do you link a CSS file to an HTML element inthe section of an document? HTML document. rs * Itapplies styles to that particular HTML document ‘© Youcanlink a CSS file to an HTML document using Shi. the <1ink> element within the section of the HTML document. Q.8] What is an external stylesh + Anexternal stylesheet is a separate CSS file linked to an HTML document using the <1ink> + rel Itis used to indicate different relationships element. beter the eurrene documents and the Inked + ttallows styles to be applied across multiple resource. Some common values are HTML documents. co Q.9] How do you apply multiple styles to a = preload single element? = alternate + Multiple styles can be applied toa single element by separating each style declaration with a semicolon within the style attribute (forintine + type - The cyve attribute specifies the MIME type of the linked resource, Q.4] What is the syntax of a CSS rule? styles] or within the CSS rule: + A CSS tule consists of a selector and a eco declaration block, selector { property valuel;Q.11] What Q.10] What is the difference between a class selector and an ID selector? Class selector Defined using a dot () followed by a class name. Classes can be apptied to multiple elements, and ‘one element can have multiple classes. .classname { property: value; + ID selector ‘© Defined using a hash (#) followed by an ID name. ‘© 1Ds are unique within a document and should only bbe applied to one element. #idname { property: value; Selectors aCSS selector? ‘* ACS selectors a pattern that is used to select and style HTML elements based on various criteria such as element types, IDs, classes, tributes, and relationships with other elements Q.12] What are the types of CSS Selectors 1. Universal Selector (*) ¥ Selects all elements on the page Selects all elements of a specific type pt property: value; + 3. Class Selector (.) Selects elements with a specific class attribute «classname { property: value; } 4, IDSelector (#) Y Selects a single element with a specific ID attribute property: value; 5. Attribute Selector Selects elements based on the presence or value of an attribute, input[type="text"] 1 property: value; } 6. Pseudo-classes Selects elements based on their special state a:hover { property: value; }Descendant Selector (space) ¥ Selects elements that are descendants of another element div pt property: valu } Child Selector (>) ¥- Selects elements that are direct children of another element. div>p property: values + 10, Adjacent Sibling Selector (+) ¥ Selects the fist element that immediately follows a specitied element, ‘and both elements must have the same parent, ha+pd property: value; 411. General Sibling Selector (~) ¥ Solects elements that are siblings of a specified element, ha~ pt property: value; ¥ Q.13] What is a pseudo-class? + Apsoudo-class is away to style an elementin CSS based on its state or position without ending extra HTML code. wa) t + Itis@ keyword added to the selectors which will allow to style the specific parts of an element's content. * Psoudo classes - targets the entire element + Pseudo elements ~ targets the specific part of an element + Pseudo-elements are written with a double colon (ey Here are some common pseudo-elements font-style: first-line { color blue} font-weightCSS BOX MODEL Q.15] What is the CSS box model? ‘+The CSS box model is a fundamental concept that describes te rectangular bores generated or sloments a web pogo SAGEM tne element's content, padding, border, and margin Q.16] What are the components of the box model? © Content: The actual content of the box, where text and images appear. ‘+ Padding: The space between the content and the border. ‘+ Border: The border surrounding the padding (it any) and content. ‘+ Margin: The space outside the border, separating the element from other elements. Q.17] Whats the difference between margin and padding? ‘+ Margin: Space outside the element's border, creating space between elements. ‘+ Padding: Space inside the element's border, creating space between the content andthe erie Q.19] How do you center an element vertically? + Tocenter an element vertically, you can use Flexbox container { display: flex; align-items: center; + The box-sizing property defines how the total width and height of an element are calculated. + With box-sizing: border-box; the padding and border are included in the element's total width and height. element { box-sizing: border-box; + Q.20] How do you create a rounded border? + Use theborder-radius property to create rounded borders element { border-radius: 10px; + 0.221 How do vou create a border around an+ Use the border-radius property to create rounded borders element { border: 2px solid black; } LAYOUT Q.23] What is the position property in CSS? + The position property in CSS determines how an element is positioned in a document. + Itean take several values: static, relative, absolute, fixed, and sticky. Q.24] Different Values of the position Property static Ref Default positioning Elements are positioned according to the normal flow of the document. + We can’tuse offsets like top, right, bottom and 1 relative Refer a codepe: ‘+ Positioned relative to its normal position + We can use offsets lke like top, rignt, bottom, and Left Hereis the diagram which illustrates the static and relative position + If there is no positioned ancestor, the elemant is positioned relative tothe initial containing block (usually the element). + Theancestor can have relative, absolute, fixed, or sticky positioning # Itdoes not work with position statie fixed Refer a codepen + Positioned relative to the viewport. meaning it stays in the same place even when the page is scrolled Sticky © Acts like relative until the element reaches a specified scroll point, then it"sticks" in place. Q.25] What is the float property? + Used to position an element to the left or right within its container , allowing text and inline elements to wrap around it. Refer a codepe: Q.26] How do you clear floats in CSS? * Toclearflosts and ensure elements below a+ Block - Elements take up the full width available and start on a new line + Inline - Flements only take up as much width as necessary and do not start on a new line. + anline-block - Behaves like inline elements but can have a width and height. + Flex - Turns the element into a flex container + grid -Turs the element into a grid container Q.28] How do you create a flexbox layout? * Tocteate a flexbox layout, you set display: lex; onthe parent container and use various properties ike flex-direction, justify- content, align-items, etc.,on the child elements to control their layout. Q.29] What is the £1ex property? + The ¢1ex property is a shorthand for tex- grow, flex-shrink, and flex-basis combined, defining how a flex item will {grow or shrink to fit the available space. Q.30] How do you create a gi layout in CSS? © Tocreate a grid layout, you set display grid; on the container and define its columns and rows using grid-template~ columns, grid-tenplate-rows, and place items within the grid using grid-colunn and oz is-row properties. © Refer _codepen * Usingthe font-family property in CSS. selector { font-family: Artal, sans-serif ? Q.32] Whats the £ont-£ami ly property? + The font-family property specifies the font family fortext. + Itallows you to define a prioritized list of fonts to Use, separated by commas. # Ifthe first font is not available on the user's system, itfalls backto the next one in thelist. Q.33] Whats the font-family property? + You specify a fallback font by listing multiple fonts in the font-family property, separated by commas. selector { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } Q.34] What is the font-size property? * The font-size property in CSS specifies the size of the font. * Iteanbe set to various units like pixels (px), ems: (em), or percentages (%) Q.35] How do you change the color of the text? + Text color is changed using the color property. selector {+ Text alignment can be controlled using the text-align property cover-background { background- image: url('imagel. jpg! ); background-size: cover; ¥ ~eontain-background { background tnage: ur" tmage?. ja" )s background-size: 4 Colors & Backgrounds Q.37] How do you change the color of the text? + You can set the background color of an element using the background-color property. selector { background-color: #ffcc00; + You can set a background image using the background-image property. selector { background-image: url(inage. jpg" )3 r Q.39] How do you set the size of a background image? Q.38] How do you set a background image? 5. Q.40] How do you re! specific-stze-background { background-image: url("tmage3. jpq"); background-size: ; 9 100px 100px; Contain: Scales the background image to be fully visible within the element, maintaining its aspect ratio. Specific Size: You can set specific dimensions for the background image using unite like pixels, percentages, or any other CSS length units. ‘Auto: Maintains the original size of tho background image. -auto-size-background { background-image: url('image5. jpg' ); background-size: au’ + Multiple Background Sizes: If you have multiple background images, you can specily sizes for each one, -miltiple-backgrounds { background-image: UC" images. jpg! }, url “image? jpg"); background-size: 50% 58%, cover; } t a background image? ‘You can control the repetition of a background‘+ Other values include repeat, repeat-x, and repeat-y. selector { background-repeat: no-repeat; Q.41] What is the background-position property? ‘+ Is used to specity the initial position of a background image within its container ‘+ You can set the position using keywords, length values, or percentages ‘© This property helps in aligning the background image as desired within the element. Syntax background-position: x y; + x represents the horizontal position. ‘© yrepresents the vertical position. Common Values @ REMEMBER Q.42] How do you create a gradient background? * You can create a gradient background using the background property with gradient function. elector { background: Linear-pradtent(te ight, red, yettow)s } Q.43] How do you create a semi background’ {ransparent + You can craate a semi-transparent background Using the rgba() function in the background-color property. selector { background-color: rgba(®, 0, 0, 0.5)5 } Q.44] How do you create a shadow effect? + You can create a shadow effect using the don property for element shadows or vext-shadow for text shadows box: heottse v-offset: The vertical offset of the shadow . The horizontal offset of the shadow + blur (optional): The blur radius spread (optional): The spread radius Color (optional): The color of the shadow ector { ox shadows 29x 2px Spx robal®, 0, & 0.3) > Q.45] How do you change the opacity of an element?