Job Interview Questions Of CSS

WHAT IS GROUPING SELECTORS IN CSS ?

When we want to give the same styling to multiple elements and CSS gives us the freedom of selecting all the elements and give same styling in some lines of code rather then specifying CSS for all the elements, then it is known as the Group Selectors in CSS

For example:- h1, h2, p{ color : red; }.

NAME 5 POPULAR FRAMEWORKS OF CSS ?

As we know frameworks or preplanned libraries makes very easy and more standard compliant web page styling. And some of these frameworks are as follows:-

• Bootstrap
• Foundation
• Gumby
• UIKit
• Semantic UI

DEFINE VARIOUS BACKGROUND PROPERTIES OF CSS ?

• background-color property:- it provides color to the particular section or block.
• background-image property:- here in particular section or in body, we can implement any our desired image.
• background-repeat property:- when we use to include the background image through CSS, by default it use to repeat the same image.

WHAT DO YOU MEAN BY CONFLICTS IN CSS ?

When we use to give different type of same styling to the same element then generally it then override the property.

For example:- If I give p{color: red;} property once but then again I give the property p{color: green;} then the color red property will override by the green color property. And this is known the conflicts in the CSS.

HOW CAN WE ABLE TO ROUND THE BUTTONS USING CSS ?

To round the corners of buttons, or to give the button the shape of circle or round then we need to add the style:- border-radius : 50%.

HOW CAN WE ABLE TO PUT THE OVERLINE OVER ANY ELEMENT USING CSS ?

For having the overline over any element, then we need to add the style:- text-decoration: overline.

HOW WE CAN SELECT ANY ELEMENT IN CSS ?

We can able to select any element through 3 ways:-

• By selecting element:- By simply selecting the element we can able to define then the property of CSS.
  For example:- p{color: green;}
• Through id selector:- We can also specify any element through id but one particular id specify particular one element in single web page.
  For example:- In HTML, we assign the element through id- <p id="demo"> MSB Bhole </p>. And in CSS:- #demo{ color: red; }
• Through class selector:- We can specify same styling to different elements by assigning different elements with the same class.
  For example:- In HTML- <p class="hello"> MSB Bhole </p>, <h2 class="hello> MSB Bhole </h2>, we assign same hello class in p and h2 element. Now same styling we can give in CSS:- .hello{ color: green} and it works on both the elements.

WHY WE USE IMPORTANT DECLARATION IN CSS ?

Through important declaration property we use to specify high priority to that particular CSS and it use to override all other property.

For example:- p{color: red !important} if we declare paragraph like this then other properties of color in paragraph will override.

WHAT IS THE USE OF UNIVERSAL SELECTOR ?

By universal selector, we can able to define the same CSS to every elements present in the document. We use to define it through (*).

For example:- *{font-style: 22px;}

HOW CAN WE ABLE TO ROUND THE CORNERS OF ANY BORDER USING CSS ?

We can achieve the round corners of the border by using the CSS property, border-radius.

CAN I ABLE TO ROUND THE LEFT CORNER SIDE OF THE BORDER ?

Yes, we can able to round the left corner side of the border by using the CSS property, border-left-radius.

WHAT WE CAN ACHIEVE THROUGH BOX-SHADOW PROPERTY OF CSS ?

We can able to attach one or more shadows to the element through box-shadow property of CSS.

CAN WE ABLE TO DELAY THE CSS PROPERTY EFFECT OF ANY ELEMENT, AND IF YES, THEN HOW?

Yes, sure we can able to delay the CSS property effect of any element by using another CSS property- transition-delay.

WHAT DO YOU MEAN BY THE HOVER EFFECT IN CSS ?

When we want to change the styling or behavior of any element, when the mouse cursor pointer is over to that particular element, then we need to use this hover property of CSS.

WHAT WE CAN ACHIEVE THROUGH COLUMN PROPERTY IN CSS ?

From the column property of CSS, we can define the columns in particular section or document.

WHAT DO YOU MEAN BY THE ATTRIBUTE SELECTOR ?

Through attributes of the element, we can able to style the elements like as follows:-

For example:- In HTML- <input type="text" name="fname"/> and in CSS, we can style the element by- input[type="text"]{ color: red;}

WHAT IS FLEX OR FLEXBOX IN CSS ?

It is used to set the length of the flexible items. It makes so easy to position the child elements and main container. And also this property is much responsive and mobile-friendly.

WHAT IS THE USE OF CLIP-PATH PROPERTY IN CSS ?

Through clip-path property of CSS, we can able to extract out the different types of shapes from any image or background element.

WHAT IS THE USE OF OPACITY PROPERTY IN CSS ?

Opacity just provide the transparency to any element. In simple words, it just sets the opacity level for an element.

HOW CAN WE ABLE TO BIND THE ANIMATION TO CSS ?

We can able to bind the animation to any CSS through animation-name property, where we use to define the name for the animation and then separately, we define the animation.

WHAT DO YOU MEAN BY PSEUDO ELEMENT ?

Pseudo element is the keyword that added to a selector that lets you style a specific part of the selected elements.

For example:- ::first-line, that can be use to change the styling of first line.

CAN WE ABLE TO CHANGE THE STYLING OF THE SCROLLBAR ?

Yes, we can able to change the styling of scrollbar by using the new pseudo element ::scrollbar.

DIFFERENCE BETWEEN DISPLAY: NONE PROPERTY VS VISIBILITY: HIDDEN PROPERTY ?

Display: none property is use to delete the element and even the space consumed by that particular element also been deleted.

But Visibility: hidden property is use to hide the element but the space consumed by that particular remains the same.

WHAT ARE THE DIFFERENT POSITION VALUES IN CSS ?

There are total 4 values of Position and these are as follows:-

• Static:- it’s the by default position of any element.
• Relative:- it can be same like static position but we can give left, right, top & bottom position here.
• Absolute:-here we can define the position top, left, right and bottom relative to the nearest positioned ancestor.
• Fixed:- position of the element get fixed to your given particular position.

WHAT IS THE USE OF OVERFLOW-HIDDEN PROPERTY ?

Any text, character or element exceeding from the element, where we have designated this overflow: hidden property, then automatically the exceeding part (element or text) use to disappear.

WHAT IS THE USE OF FILTER IN CSS ?

If we want to have the visual effects like blur, brightness to any element, then this Filter property of CSS we can use here, to play with the brightness, contrast, blur, greyscale and opacity etc. of any element.

I WANT TO PAUSE THE RUNNING ANIMATION ON ANY PARTICULAR ELEMENT, HOW CAN I ABLE TO ACHIEVE THIS ?

To pause any running state of animation, then simple we need to add the style- animation-play-state: paused.

IF I DON'T WANT ANYONE TO COPY AND PASTE THE CONTENT OF MY SITE, THEN HOW CAN I ABLE TO DO IT USING CSS ?

If we want, no one can able to copy and paste our content, then for this we need to add the style- user-select: none.

WHAT IS BOX MODEL IN CSS ?

Every HTML element is wrapped under a rectangular box. This box model is used to determine the height and width of the rectangular box. As the CSS box consists of width, height, padding, margin and border.

LIMITATIONS OF CSS ?

• Browser Compatibility:- Some style selectors are still not supported with every browsers.
• Different Behaviour In Different Browser:- Some CSS style use to behave differently in different browsers.

DIFFERENT TYPES OF SELECTORS IN CSS ?

• Element Type Selector
• ID Selector
• Class Selector
• Descendant Selector
• Child Selector
• Sibling Selector
• Adjacent Sibling Selector
• Attribute Selector
• Universal Selector

SASS vs SCSS ?

WHAT IS THE VIEWPORT HEIGHT (VH) IN CSS ?

It's just been a unit to measure the height percentage with respect to the viewport. The measure VH is equal to 1/100 of the height of the viewport. That means if the height of the browser is 1000px then 1vh is equal to 10px.

WHAT IS THE VIEWPORT WIDTH (VW) IN CSS ?

Again it's been a unit to measure the width percentage with respect to the viewport. The measure WH is equal to 1/100 of the width of the viewport. That means if the width of the browser is 1000px then 1vw is equal to 10px.

SIMPLE DEFINITION OF PSEUDO ELEMENTS ?

Pseudo elements allows us to create the items which usually not exist in the document tree. For example:- (::before, ::after, ::first-line & ::selection).

SIMPLE DEFINITION OF PSEUDO CLASSES ?

Pseudo classes allows us to select the regular elements but with certain conditions like when the user is hovering over the link or etc. For example:- (:link, :visited, :focus & :active).

TO CHANGE THE FONT FACE WHICH CSS PROPERTY IS USED ?

To change the font face, we can use the font-family property. For example:- p{ font-family: "Open Sans"};

WAYS OF SPECIFYING OPACITY IN CSS3 ?

Opacity refers to the degree to which the content is transparent or opaque. The values from ranging from 0 to 10, where 1 means the element is completely opaque.

WHAT IS THE MEANING OF (div ~ p) SELECTORS ?

(div ~ p) Here all the (p) elements that have (div) elements preceeding anywhere, we can able to customize the (p) elements.

WHAT IS THE MEANING OF (div + p) SELECTORS ?

(div + p) Here all the (p) elements that have placed immediately after the (div) elements, we can able to customize those (p) elements.

NAME FOUR TYPES OF @MEDIA PROPERTIES ?

• All:- Default property.
• Screen:- Used for different screens (computer, mobile & laptop etc.).
• Print:- Used for printers.
• Speech:- Used for screen readers.

WHAT IS THE GRID SYSTEM IN CSS ?

CSS Grid layout is a 2-Dimensional system, that means it can handle both columns and rows. Beautiful and attractive design we can able to create too through grid layout.

WHAT DOES Calc FUNCTION WORK IN CSS ?

CSS3 Calc() function allows us to perform the mathematical operations on property values. We can specify the width which can be the result of the addition of two or more numeric values.
For exmaple:- .demo{Width: calc(100px + 60px)};

WHAT IS THE CONTEXTUAL SELECTOR ?

This contextual selector is used to select the special occurences of an element.

WHAT IS TWEENING ?

Tweening is a process that creates intermediate frames between two images to get the appearance of the first image, which develops into the second image.

WHAT ARE THE DIFFERENT ELEMENTS IN BOX MODAL ?

There are mainly 4 types of elements which are as follows:-

• Margin
• Padding
• Border
• Content

WHAT IS THE FLOAT PROPERTY ?

An image can be moved along with the text to the right or to the left using this float property. But this property does not change the properties of the element.