CSS Technical Interview Questions Answers
What is CSS?
CSS outline the style of an HTML webpage, it is a language by which we can set the behavior of an HTML webpage. It describes how the HTML content will be shown on screen.CSS controls the layout of several HTML web pages. CSS is referred to as the Cascading Style Sheet. Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
What are advantages of using CSS?
Following are the advantages of using CSS −Name all the modules which are used in the current version of CSS.
Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface.
Distinguish between CSS2 and CSS3.
CSS3 is divided into two various sections which are called a module. Whereas in CSS2 everything accedes into a single document with all the information in it.
CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser.
In CSS3 we will find that many graphics related characteristics have been introduced like “Border-radius or box-shadow, flexbox.
In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.
Cite different types of CSS.
External – These are written in separate files.
Internal – These are cited at the top of the web page code document.
Inline – These are written right next to the text.
Why is the external style sheet useful?
External style sheet is very useful as we write all the styling codes in a single file and it can be used anywhere by just referencing the link of that external style sheet file.
So if we do any changes in that external file, then the changes can also be observed on the webpage. So we can say that it is very useful and it makes your work easy while working on larger files.
What are the uses of an embedded style sheet?
Embedded style sheet gives us the privilege to define styles in one place in an HTML document.
We can generate multiple classes using an embedded style sheet to use on multiple tag types of a web page and also there is no extra downloading required for importing the information.
How to use CSS selector?
By using the CSS selector, we can choose the content which we want to style so that we can say that it is a bridge between the style sheet and the HTML files.
The syntax for CSS selector is “select” HTML elements created on their id, class, type, etc.
Explain the concept of Tweening.
Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image. It is mainly used for creating animation.
Explain the term Responsive web design.
It is a method in which we design and develop a web page according to the user activities and conditions which are based on various components like the size of the screen, portability of the web page on the different devices, etc. Hence it is done by using different flexible layouts and grids.
What is CSS specificity?
CSS specificity is a score or rank that decides which style declaration has to be used to an element.
(*) this universal selector has low specificity while ID selectors have high specificity.
There are four categories in CSS which authorized the specificity level of the selector.
- Inline style
- IDs
- Classes, Attributes, and pseudo-classes.
- Elements and pseudo-elements.
What are gradients in CSS?
It is a property of CSS which allows you to display a smooth transformation between two or more than two specified colors.
There are two types of gradients that are present in CSS. They are:
- Linear gradient
- Radial Gradient
What is CSS flexbox?
It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.
There are several properties of the flexbox that are used in the HTML webpage.
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
What is the difference between padding and margin?
In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.
In CSS we have margin property as follows:
margin-top
margin-right
margin-bottom
Margin-left
Margin property has some defined values as shown below.
Auto – using this property browser calculates the margin.
Length – It sets the margin values in px,pt,cm etc.
% – It sets the width % of the element.
Inherit – By this property we can inherit the margin property from the parent element.
In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border.
CSS padding also has properties like,
Padding-top
Padding-right
Padding-bottom
Padding-left
Negative values are not allowed in padding.
What is the use of the Box Model in CSS?
In CSS, the box model is a box that binds all the HTML elements and it includes features like margins, border, padding, and the actual content.
By using a box model we will get the authority to add the borders all around the elements and we can also define the space between the elements.
What is a CSS pseudo-class?
It is a class that is used to define a special state of an HTML element.
This class can be used by styling an element when a user snooped over it and also it can style an HTML element when it gets the focus.
What are the differences between relative and absolute in CSS?
The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent.
It means if we write left:10px then the result will be 10px far from the left edge of the parent element.
Define ‘important’ declarations used in CSS.
Important declarations are defined as that declaration which is having more importance than the normal declaration.
While executing, these declarations override the declaration which is having less importance.
For example, if there are two users Having an important declaration then one of the declarations will override the declaration of another user.
For Example:
Body {background: #FF00FF !important; color: blue}
In this body background has more weight than the color.
Differentiate between inline and block element.
Inline element does not have an element to set width and height and also it does not have the line break.
Example: em, strong, etc.
Block element specification:
They do have the line break.
They define the width by setting a container and also allow setting height.
It can also contain an element that occurs in the inline element.
Example:
width and height
max-width and max-height
min-width and min-height
hi (i=1-6)- heading element
p- Paragraph element.
Differentiate between the ID and class.
Both id and class is been used in HTML and assigns the value from CSS.
Please find below the differences:
The ID is a kind of element which uniquely assigns a name to a particular element whereas class has an element with a certain set of properties that can be used for the complete block.
The id can be used as an element because it can uniquely identify it whereas class is also defined to block the elements and applies too many tags wherever it is used.
Id provides the restriction to use its properties to one specific element whereas in class the inheritance is applied to a specific block or group of the element.
What are pseudo elements and what are they used for?
Pseudo elements are used to style particular parts of an element, rather than the whole thing. For example, you can use it to style the first line or first letter of a paragraph, text you’ve selected, or you can use it to insert text or shapes before or after an element.
They always start with a double colon - although a single colon is still allowed for backwards compatibility
What are pseudo classes and what are they used for?
Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.
Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.
They all start with a single colon and look like this:
.link:hover { ... }
.link:active { ... }
.tab:first-child { ... }
.tab:last-child { ... }
.avatar:nth-child(2n) { ... }
Should you use !important?
no way of escaping this one. When you’re wrestling with specificity, trying to override that one style, you may be tempted to add !important to your style. Think very carefully before you do so! It may seem harmless, but if you do this all over the place, you will soon find yourself in a big mess that you cannot get out of.
What !important does, is make that particular style have the highest specificity possible. Nothing else can override it, apart from another !important. You might be able to see where this is going, but once you start using them, you’ll almost certainly get into a position where you need to override a rule marked as !important, which forces you to use another one. And so the cycle continues.
What’s your preferred way of sizing fonts?
omething that has almost always come up for me is the way you size your text, mainly focused on the units you use. You can of course use pixels (px), but there’s also em, rem, %, vs and vh, along with a few others. Some people still don’t like using pixels, but browsers have improved and they’re generally handled pretty well.
Defining your font sizes in em allows you to change the size of your text based on the size defined at a higher level. For example, if a container has specified a font-size of 2em, and you specify a font-size of 2em on an element inside that container, that element has an effective font-size of 4em! However, this can be a little confusing as you might not always see the size you expect!
The rem unit was created to remedy that confusion. It scales well in the browser, just like em and px, but it uses a base size. From that, all further rem values are calculated. For example, if your base rem value is equal to 16px, then 1rem will always be equal to 16px, 2rem will always be equal to 32px, and so on.
Note: While I’ve explained these units using font-sizes, the same rules apply to any dimensions where you use px, em or rem.
Have you used Flexbox & CSS Grid before? What are the differences between them?
Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.
CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes, i.e. grids!
What are functions/mixins?
Mixins are a very handy way of adding a number of styles, based on a particular input parameter. For example, you might always want to add fallback styles when adding border-radius, but you don’t necessarily know what value you might want.
What benefits and demerits do External Style Sheets have?
Benefits:
One file can be used to control multiple documents having different styles.
Multiple HTML elements can have many documents, which can have classes.
To group styles in composite situations, methods as selector and grouping are used.
Demerits:
Extra download is needed to import documents having style information.
To render the document, the external style sheet should be loaded. Not practical for small style definitions.
Merits and demerits of Embedded Style Sheets?
Merits of Embedded Style Sheets:
Multiple tag types can be created in a single document.
Styles, in complex situations, can be applied by using Selector and Grouping methods.
Extra download is unnecessary.
Demerits of Embedded Style Sheets:
Multiple documents cannot be controlled.