Scribd
Upload
12 views

CSS Interview Questionnaire

Uploaded by

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

CSS Interview Questionnaire

Uploaded by

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

1. What is CSS?

 CSS (Cascading style sheet) is a style sheet language which is used to do formatting
and adding beauty to HTML elements.
Its primary purpose is to make the appearance of application presentable.more about CSS
is it also help us to control the styles for multiple pages
As we add whole CSS into a single file it makes easier to manage and update styles.

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

 Inline CSS – Adding style directly to an HTML element using style attribute

Example = <h4 style = “color: red; background-color: green ;”> Hello Sahil</h4>

 Internal CSS – Adding style tag in head section of HTML and apply style logic in this
tag.

Example =

<DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
P
{
Color: red;
Background-color: green;
}
</style>

</head>

<body>

<p>This is a paragraph</p?

</body>

</html>
 External CSS – In this type we create a separate CSS file and link the CSS file using
link tag .Add the logics of styling in the CSS file.

Example =

p <DOCTYPE html>
<html>
{ <head>
<title>Internal CSS</title>
color: red;
<link rel=”stylesheet”
background-color: green; href=”style.css”>

} </head>

<body>

<p>This is a paragraph</p?

</body>

</html>

index.html
style.css

3. How do you select an element with a specific class in CSS?

 In CSS we are always use dot + class_name for selecting an element having specific
class
Example = Suppose we have a div having a class box
.box
{
Color: red;
Background-color: black;
}
4. What is the box model in CSS?

 Box model is a structure of an element .It contains the width , height , border, margin
, padding of an element

MARGIN
padding BORDER

ELEMENT

width x height

5. How to target elements in CSS?

 We have total 6 ways to target the elements in CSS.


a. Universal selector
b. Tag targeting
c. Id targeting
d. Class targeting
e. Specific target
f. Pseudo selectors

6. What is the precedence order of CSS while applying style by inline , internal and
external CSS?

 The CSS will apply to an element as below:


a. The inline style given to the element will override the internal and external CSS.
b. The internal style given to element will override only external CSS
c. External css have last precedence in this.
7. Explain the background properties
 1- background-image = this property is used to set the background image or
background gradient to an element

Syntax – background-image: linear-gradient (direction, colors);

2- background-color: It is used to set background color to an element .We cannot set


gradient in it because the syntax of this only support one background-color

Syntax- background-color:#f3f3f3;

3-background-position: It is used to set the position of background image in the


element .

Syntax – background-position : center | start | left | right | inherit;

4-background-size: It is used to set the background image size in the element.

Syntax- background-size : width height | cover | contain | auto

5-background-repeat: It is used to set the repeating behavior of a background image.

Syntax- background-repeat : no-repeat | repeat | repeat-x | repeat – y;

8. Explain the pseudo selectors for links


 A: link – it is normally used for styling unsed links;
A:hover –it is used to set the style when we move mouse on the link.
A:active: it is used to set the style when we click on the link.
A:visited:It is used to set the style when we come by to page after clicking the link

9. How do you center an element horizontally?


 We can achieve this by two methods
a. Specify width for the element and set left and right margin auto.
b. Set the display of parent element to flex and add one more property justify content :
center

10. How do you change background color of an element in CSS?


 For changing background-color of element there is a property in CSS
o Background-color : color_name | hexadecimal value | rgb value | hsl value;

Add this property while styling the element and add the color you want .

11. What is the difference between padding and margin in CSS?

 I) Padding : This property defines space between the content and its border. It
generally create extra space around the element . It also included while we are setting the
background-image or background-color

Ii) margin: This property defines space around the outside of an element , between
element and its surroundings . It is transparent in color and if we even apply background-
color or image to element it won’t influence the margin.

12. How do you add border to an element in CSS?

 We have property border in CSS to add border to an element


Example = border : border_width border_type border_color;

13. How do you apply CSS styles to only the first letter of paragraph ?

 For styling first letter of paragraph we can use ::first-letter pseudo element. It allows
you to style and target the first letter of a text-element

Example
P::first-letter
{
Color : blue;
}

14. What is the purpose of CSS Selectors?

 The purpose of CSS selectors is to target element on a webpage based on their


position , relationship , attributes with other elements so that you can apply styling rules
to them.

15. How do you apply CSS styles inline?


 To apply CSS styles inline we use style attribute inside the specific element
Example – applying CSS style for h1 heading
<h1 style = “color : blue ; background-color : red ; border : 2px solid
goldenyellow;”>I am the first one</h1>

16. Explain difference between ID selector and class selector?

Features ID selectors Class Selector

Syntax #id_name .class_name

Is is used to apply same


It is used to apply style to a
Usage type of style on one or more
single and unique element
element
It is used to target a single It is used to target multiple
Targeting
instance of element instances of element
Each ID value must be A single element can have
unique within the HTML multiple class names and a
Uniqueness document , meaning only single class name can be
one element can have a assigned to multiple
specific ID elements
ID selector have higher
specificity than class
selector , which means style Class selector have a lower
Specificity
applied via ID selector will specificity
override the style applied
via class selector

17. How do you change the font size of an element in CSS?


 To change the font size of an element we have a property font-size
Example –
Font-size : px | % | em | rem ;

18. What is the float property used for in CSS?


 The float property is used for position an element to left or right of its containing
element , allowing other element to wrap around it . It is commonly used to create layout
with multiple column or for aligning the images within text.

19. How do you change the text color of an element in CSS?


 To change the text color of an element we have a property color in CSS
Example –
Color : red | hex value | RGB value | HSL value;

20. What is the CSS display property used for?


 It is used to control how an element is rendered on the page . It defines the display
behavior of an element . It should be treated as a block-level element , inline-element ,
flex , grid , inline-block

21. Explain the difference between the px , % , em , rem units in CSS?


 A- px(pixel) – It is most commonly used unit , a px represent an absolute length or
size in term of screen pixels , 1px is equal to one dot on screen

B- % (percentage) – Percentage values are relative to another value , such as width or


height of a parent element .

C- em: The em unit is relative to the font size of the element itself or the nearest parent
element with a specified font size. 1em is equal to the current font size, so if the font-size
of the document is 16px, then 1em will equal 16px.

D- rem: Similar to em, the rem unit is relative to the font size. However, rem is always
relative to the base (root) font size of the document, usually defined on the element. This
unit provides a consistent way to scale elements based on the overall font size of the page,
without being affected by the font size of parent elements.

22. What is the purpose of the CSS z-index property?


 The CSS z-index property is used to control the stacking order of elements on a web
page. Elements with a higher z-index value will appear in front of elements with a
lower value. It is commonly used to layer elements and create overlays.
23. How do you set the height and width of an element in CSS?

 In CSS, you can set the height and width of an element using the height and width
properties. These properties can be applied to most elements, except non-replaced
inline elements and table columns.

.my-element {
Width: 200px;
Height: 100px;
}

24. Explain the difference between position: relative; and position: absolute;.

 Position: relative; and position: absolute; are both CSS positioning properties that
determine how an element is positioned in a webpage. They offer different methods
for controlling an element's placement:

Position: relative: When an element has position: relative;, its position is calculated
based on its normal position in the document flow (i.e., its static position). You can then
use the top, right, bottom, and left properties to adjust the element's position relative to its
original location, without affecting the placement of other elements around it.

Position: absolute: When an element has position: absolute;, it is taken out of the
normal document flow and positioned relative to the nearest positioned ancestor element
(the nearest element with a specified position other than static). If it does not have a
positioned ancestor, the element is positioned relative to the initial containing block,
usually the initial viewport or document body. You can use the top, right, bottom, and left
properties to set the position of the absolute element relative to its positioned ancestor.

25. How do you create a list without bullets in CSS?


 To create a list without bullets in CSS, you need to target the list element(s) and set
the list-style-type property to none. Typically, you will either work with unordered
lists (< ul >) or ordered lists (< ol >). Here's how you can remove bullets (or numbers)
from an unordered list:

Ul {
List-style-type: none;
}

26. What is the purpose of the CSS opacity property?

 The CSS opacity property is used to control the transparency of an element. It accepts
a value between 0 (completely transparent) and 1 (fully opaque). It can be used to
create subtle transparency effects or fade animations.
27. How do you align text to the center of an element in CSS?

 To align text to the center of an element in CSS, you can use the text-align property
with the value center. This will horizontally center the text within the specified
container element. Here's an example:

CSS:

.center-text {
Text-align: center;
}

HTML:

<div class="center-text">
This text is horizontally centered within the div.
</div>

28. Explain the difference between nth-child() and:nth-of-type() selectors.

 Both :nth-child() and :nth-of-type() are CSS pseudo-class selectors that allow you to
target specific elements based on their position in a group of siblings. However, they
differ in the way they determine which elements to select.

:nth-child() selects elements based on their position in the group of all sibling
elements, regardless of their type (e.g., < div >, < p >, < li >). The syntax is :nth-
child(an+b), where a and b are integers and n is a counter that starts from 0.

:nth-of-type() selects elements based on their position in a group of siblings with the
same element type. The syntax for :nth-of-type() is almost identical to :nth-child(): :nth-
of-type(an+b).

29. How do you style all links within a specific container in CSS?
 To style all links within a specific container in CSS, you can use the descendant
selector. This allows you to target all the anchor elements () that are descendants of
the container element, regardless of their nesting level.

.container a {
/* Your styles here */
Color: red; /* For example, change the link color to red */
}
30. What is the CSS box-shadow property used for?
 The CSS box-shadow property is used to add a shadow effect to an element. It allows
you to control the shadow's color, size, blur, and position. By applying a box shadow,
you can give depth and dimension to elements on the page.

31. How do you create a horizontal navigation menu using CSS?


 To create a horizontal navigation menu using CSS, you can follow these steps:

HTML:

<nav>
<ul class="navigation-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></-li>
<li><a href="#services">Services</a>li>
<li><a href="#contact">Contact</a></-ti>
</ul>
</nav>

CSS:

/* Remove list style and padding */


.navigation-menu {
List-style: none;
Margin: 0;
Padding: 0;
Display: flex; /* Display the list items in a row */
}

/* Style list items and links */


.navigation-menu li {
Margin: 0; /* Adjust margins as needed */
}

.navigation-menu a {
Display: block; /* Make the link fill the entire list item */
Padding: 10px; /* Add padding around the link text */
Text-decoration: none; /* Remove the default link underline */
Color: #000; /* Set link color */
}

/* Add hover effect on links */


.navigation-menu a:hover {
Background-color: #f2f2f2; /* Change the background color on link hover */
Color: #333; /* Change the link text color on hover */
}
32. Explain the concept of specificity in CSS.
 The concept of specificity in CSS determines which styles will be applied to an
element when there are conflicting rules. Specificity is calculated based on the
selectors used in the CSS rules. It follows a specific hierarchy where inline styles
have the highest specificity, followed by ids, classes, and finally, element
selectors.The more specific a selector is, the higher its specificity value. When
multiple conflicting rules target the same element, the one with the highest specificity
will take precedence.

33. What are CSS pseudo-classes? Give some examples?

 CSS pseudo-classes are keywords added to selectors that specify a state or behavior of
an element. They allow you to style elements based on their state or position in the
document tree.

Here are some examples of CSS pseudo-classes:

 :hover - applies styles when the element is being hovered over by the mouse.
 :active - applies styles when the element is being activated by the user.
 :first-child - selects the first child element of its parent.
 :nth-child(n) - selects the nth child element of its parent.

34. How do you create a responsive layout using CSS?


 Several techniques can be used to create a responsive layout using CSS:
 Use media queries to apply different styles based on the screen size or device.
 Utilize flexible units like percentages or viewport-relative units like vw and vh.
 Implement CSS Grid or Flexbox to create flexible and responsive grid-based layouts.
 Use the max-width property to prevent elements from overflowing on smaller screens.
 Make images and other media elements responsive by setting their max-width to
100%.

35. What is the difference between display: none; and visibility: hidden;?

 Both display: none; and visibility: hidden; are CSS properties used to hide elements
on a webpage, but they do so in different ways:

 Display: none; - This property completely removes an element from the layout flow,
as if the element is not present in the HTML document at all. Therefore, adjacent
elements will take up the space that the hidden element would have occupied, causing the
layout to reflow.
 Visibility: hidden; - This property hides an element while maintaining its space in the
layout. The element is still part of the layout flow but will be invisible. Consequently, the
layout does not reflow as adjacent elements won't take up the hidden element's space.
36. How can you vertically align an element in CSS?
 There are multiple ways to vertically align an element in CSS. Here are a few
commonly used techniques:
 Using the "display: flex;" property on the parent container and applying "align-items:
center;" to vertically center the child elements.
 Applying "position: absolute;" to the element and combining it with "top: 50%;" and
"transform: translatey(-50%);" to center it vertically.
 Utilizing CSS Grid and specifying the alignment properties on the grid container.

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


 Both em and rem are relative units of measurement in CSS, used to define sizes based
on font or parent element sizes. They are useful for ensuring responsive designs and
making it easier to adjust the overall layout.

Em: The em unit represents the size relative to the font-size of the current element. In
other words, if you set the font size to 2em, it means the font size will be 2 times the
computed size of the font of the current element. When applied to elements other than
font-size, em is still calculated based on the font-size of the current element.

Rem: The rem unit represents the size relative to the font-size of the root element ().
This means when you set a font size to 2rem, it is 2 times the font size defined in the
root element, regardless of the current element's parent styles.

Key difference: The em unit depends on the font-size of the current element or its
parent, which can lead to a compounding effect for nested elements. In contrast, the
rem unit depends on the font-size of the root element, making it more consistent
across the entire layout, without the nesting effect
.
38. How do you create a sticky/fixed header in CSS?
 To create a sticky/fixed header in CSS, you can use the following approach:
 Apply "position: fixed;" to the header element.
 Set a suitable "top" or "bottom" value to position it at the desired location.
 Specify "width: 100%;" to make it span the entire width of its containing block.
 Adjust the z-index property as needed to ensure it appears above other elements.

39. Explain the CSS float property and its usage.


 The CSS float property is used to make an element float within its parent container,
allowing other content to wrap around it. The float property accepts values like "left"
or "right" to determine the direction of the float.
It was commonly used for creating layouts in the past, but nowadays, it is generally
superseded by CSS Grid and Flexbox due to its more powerful layout capabilities.
40. How can you override the default styles of a CSS framework?
 To override the default styles of a CSS framework, you can follow these steps:

 Use more specific CSS selectors to override the framework's styles. Add class or ID
selectors to target specific elements and apply your desired styles.
 Use the "!Important" declaration on your styles to give them higher precedence.
However, it's recommended to use this sparingly as it can lead to maintainability issues.
 If possible, customize the framework by modifying its provided variables or using a
custom build to generate a version of the framework with your desired styles.

41. How do you apply CSS styles to only the last child of an element?
 To apply CSS styles to only the last child of an element, you can use the ":last-child"
pseudo-class selector. For example:

.parent-element :last-child {

/* CSS styles for the last child element */

42. What is the purpose of CSS vendor prefixes? Give examples of some common
ones.
 CSS vendor prefixes are used to add support for specific CSS features in different
web browsers. They are used before the standard property name and are specific to
certain browser engines. Here are examples of some common CSS vendor prefixes:
 -webkit- for webkit-based browsers (Google Chrome, Safari)
 -moz- for Mozilla-based browsers (Firefox)
 -ms- for Microsoft browsers (Internet Explorer, Microsoft Edge)
 -o- for Opera browser.

To add support for a CSS animation property, you can use:

.element {
-webkit-animation: myanimation 1s;
-moz-animation: myanimation 1s;
Animation: myanimation 1s;
}

43. How do you create a responsive image gallery using CSS?


 To create a responsive image gallery using CSS, you can follow these steps:

 Use a container element to wrap the gallery.


 Set the container's display property to "flex" or "grid" to create a flexible layout.
 Apply appropriate styles to the images, such as setting their width to a percentage
value or using "max-width: 100%;" to ensure they resize with the container.
 Use media queries to adjust the gallery's layout for different screen sizes or devices.
44. Explain the concept of CSS inheritance and how it applies to different elements.

 CSS inheritance is the process by which certain properties of an element are passed
down from its parent elements. When a parent element has a defined style property,
its child elements will inherit those styles unless overridden. Inheritance applies to
properties like font-size, color, text-align, etc. However, not all properties are
inheritable by default.

45. How do you vertically center an element within its parent container in CSS?

 To vertically center an element within its parent container in CSS, you can use one of
the following methods:

 Set the parent container's display property to "flex" and use "align-items: center;" to
vertically align the child elements.
 Combine "position: absolute;" with "top: 50%;" and "transform: translatey(-50%);" on
the element to center it vertically.
 Use CSS Grid and the align-self property to vertically center the element within the
grid container.

46. What is the CSS box-sizing property used for and what are its different values?

 The CSS box-sizing property is used to control how the total width and height of an
element are calculated. It has three possible values:
 "content-box" (default): The width and height only include the content and exclude
padding, border, and margin.
 "border-box": The width and height include the content, padding, and border, but not
the margin. This value makes it easier to work with element sizing.
 "padding-box": The width and height include the content and padding but exclude the
border and margin.

47. How do you create a fixed footer that stays at the bottom of the page in CSS?
 To create a fixed footer that stays at the bottom of the page in CSS, you can use the
following approach:

 Apply "position: fixed;" to the footer element.


 Set "bottom: 0;" to position it at the bottom of the viewport.
 Specify "width: 100%;" to make it span the entire width of the page.

48. What are CSS pseudo-elements? Give examples of their usage.


 CSS pseudo-elements are used to style specific parts of an element. They are denoted
by double colons (::) and provide additional styling capabilities. Examples of CSS
pseudo-elements include:
 ::before: Inserts content before the element's content.
 ::after: Inserts content after the element's content.
 ::first-letter: Styles the first letter of the element.
 ::first-line: Styles the first line of the element's content.

49. How do you create a CSS dropdown menu?


 To create a CSS dropdown menu, you can use a combination of CSS and javascript.
Here is a basic approach:
 Use a nested HTML structure with lists (ul and li) to represent the dropdown menu
items.
 Apply CSS styles to hide the dropdown menu initially (e.g., "display: none;").
 Use CSS pseudo-classes, such as ":hover", on the parent element to show/hide the
dropdown menu (e.g., "display: block;").
 Optionally, use javascript to add additional functionality and interactions to the
dropdown menu.

50. Explain the concept of CSS grid layout and its advantages over other layout
methods.
 CSS grid layout is a powerful two-dimensional layout system that allows you to
create complex grid-based layouts with ease. It provides control over both rows and
columns, making it ideal for responsive designs. Some advantages of CSS grid layout
include:
 Simplified grid structure with easy alignment and positioning of elements.
 Ability to create complex and flexible layouts without relying on additional
frameworks or libraries.
 Support for responsive designs with media queries and auto-placement of grid items.
 Efficient use of whitespace and automatic adjustment of grid tracks based on content
and available space.

You might also like