Cascading Style Sheets (CSS) is a style sheet language used to describe an original document in a scripting language such as HTML. CSS, together with HTML and JavaScript, is a cornerstone of the World Wide Web technology. Finally, practice below the best CSS Interview Questions & Answers for the best preparation of the CSS Interview.
Below are few major features of Css
Q1. Explain what is CSS?
CSS stands for Cascading Style Sheets. It is used to describe the presentation of the documents usually written in the markup language like HTML. It is believed to be the base of the technology of the world wide web like HTML and JavaScript.
CSS improves the design language of a standard web document by describing how individual elements are to be displayed on the screen. CSS is used so the information document is separated from the document that describes the style. So, by doing this duplication is avoided, maintaining the documents is made easier, and reusability is improved.
Q2. Enlist different versions of CSS?
There are mainly 3 versions of CSS are available. They are CSS 1, CSS 2 and CSS 3.
Q3. What are advantages/disadvantages of using External CSS?
There are some advantages of using External Style Sheets which are given below: -
There are disadvantages of using External Style Sheets which are given below: -
Q4. What are CSS sprites?
CSS Sprites is the way of combining several images into a single image file so that it can be used on a website efficiently. It helps to increase the performance of the website.
Q5. What are CSS selectors?
CSS Selectors are the component of the CSS ruleset which is used to select the content that you want to style. It selects the HTML element concerning its class, id, attributes, and types.
There are various types of selectors in CSS which are given below
Selectors in the CSS is used to find the HTML element. It can be divided into,
Element selector
It finds the element based on its name.
//example p{ text-align: center; } <p>name selector</p>
Note:- It applies the style to the element that matches the name ‘p’ which is the paragraph.
ID selector
It selects the element based on its id.
//example
#para1{
text-align: center;
}
<p id = “para1”>id selector</p>
Class selector
It selects the element with a specific class attribute.
//example
.center { text-align: center; } <p class="center">Class selector.</p>
Universal selector
It applies the style to every element on the page. It is defined with the asterisk symbol.
//example
* { color: green; }
Note:- The above style of defined is applied to every element on the page.
Group selector
It is used to select elements with the same style.
//example
h1,h2,p { text-align: center; }
Note:- Here the h1, h2, and p will get the same style.
Q6. What is use of @import in CSS?
Use of @import in CSS
Q7. What are Combinators in CSS?
Combinator in CSS tells the relation between two different simple selectors. It also tells the location of the content in the document.
There are many types of combinator which are given below.
Q8. What is CSS Box Model and explain its elements?
CSS box model has many properties like border, padding, margin, and even the content. The CSS box model is utilized to build the layout and design of the web pages. Moreover, it can be utilized to customize the layout of different elements.
According to the CSS box model, every element renders as a rectangular box. The description of some properties of the CSS box model is given below:
Q9. Explain Universal selector in CSS?
The CSS universal selector (*) is used to matches elements of any type.
Q10. In how many ways CSS be integrated on web page?
There are three ways of integrating CSS on the web page which is mentioned below: -
Q11. What is Alpha opacity in CSS?
Alpha channel is the color element that defines the degree of opacity of a color. In this way, it can tell how a pixel is rendered when mixed with another.
Q12. What are CSS margins?
The purpose of CSS margin properties is used to create space around elements, outside of the border. With the help of CSS, you have full control over the margins.
CSS has characteristics for defining the margin for each side of an element:
Q13. What is the viewport?
A viewport is an area of a web page that is visible to the users. Viewport area/space varies from device to device.
Q14. What is Tweening?
In CSS we use the term "animate". It is the most powerful and comfortable way to build animate objects. By using tweening, you can generate in-between frames.
Q15. What are CSS counters?
CSS counters are like variables that are managed by the CSS. These values are expanded by CSS rules so that they can be traced and can see how many times they are used. It allows the adjustment in the appearance of content concerning its location in a document.
CSS counters properties:
It has some properties which are mentioned below: -
//example body { counter-reset: section; //initializing a counter named section. } To use a counter, use counter-increment property. To display the counter value, use content property. h3::before { counter-increment: section; //It increments the counter value content: counter(section) ; //It displays the value of the counter }
Q16. What is the property used to not allow highlighting?
User-select is the property used to not allow highlighting.
Q17. What is the default z-index of an element?
The default z-index of an element is 0 or auto
Q18. Enlist major advantages/disadvantages of using CSS preprocessors?
Advantages of using CSS Preprocessor
Disadvantages of using CSS Preprocessor
Q19. What is difference between inline and inline-block in css?
Difference between inline and inline-block CSS
Inline | Inline block |
It ignores the top and bottom margins. | It is subjected to the margin and padding |
It is subjected to vertical-align property | It ignores the vertical-align property |
It ignores the width and height properties | If height and width are not selected it is set automatically to set its elements |
Examples: - <a>, <span>, <b>, <em> | Examples:-. <p>, <div>, <form>, <header> |
Q20. What is difference between "resetting" and "normalizing" CSS?
Difference between "resetting" and "normalizing" CSS
Resetting: Resetting means remove all default browser styling on elements. E.g. paddings, margins, font-sizes of all elements are reset to be the same. You will have to redeclare styling for general typographical components.
Normalize: Normalize means "You will get what you write". It stores valuable default styles instead of "unstyling" everything. It also fixes bugs for popular browser territories.
Q21. What is the purpose of the z-index and how is it used?
The z-index property tells about the stack position of an element. The element which has greater stack order remain in front of an element that has a lower stack order.
Q22. What are various Media types used in CSS?
Various types of media available in CSS are:
Media Type | Description |
---|---|
all |
Suitable/intended for all devises (default). |
aural |
Intended for speech synthesizers. |
braille |
Intended for braille tactile feedback devices. |
embossed |
Intended for paged braille printers. |
handheld |
Intended for handheld devices (typically small screen, monochrome, limited bandwidth). |
Intended for printed documents (applies to docs viewed in print preview mode too). |
|
projection | Intended for projected presentations (ie: projectors or print to transparencies). |
screen | Intended for computer screens. |
tty | Intended for media using a fixed-pitch character grid (ie: teletypes or terminals). |
tv | Intended for television-type devices. |
Q23. Enlist the various fonts attributes available in CSS?
Various fonts attribute available in CSS are:
Q24. What are the valid media types available in CSS?
Media signifies the type of device that is used to display a webpage. For eg. a mobile screen or computer screen. As technology is expanding, devices like cell phones, handheld or even your wristwatch want to access the website which is making designing a website complex. Every user wants to make his/her site to look good across multiple devices. With the upcoming CSS level 2's which supports the media type, it is easy to use it and make your site view-friendly across various devices.
Different Media Types available in CSS are all, print, screen, and speech
Q25. What is primary difference between transition and transform?
Transitions: It supports property changes in CSS values so that it can run smoothly over a particularized duration.
Transforms: It supports elements styled with CSS to be transformed in 2D or 3D space.
Q26. What is the syntax for adding background-image?
The syntax for adding background-image :
body { background-image: url("image-url"); background-color: #cccccc; }
Q27. What are gradients in CSS?
CSS gradients help you to display transitions between more than two colors. In order to create a linear gradient, you must represent at least two color stops. Color stops are the colors you desire to render smooth transitions among. In addition to the gradient effect, you can also set a starting point and a direction.
The syntax for creating the gradient in CSS is background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
The gradients in the CSS allow you to create a background with a smooth transition between two colors. CSS has two types of gradients, Linear and Radical.
For the Linear gradient, you must specify two color stops, that is the start and the stop color of the transition and also the direction of the transition like goes down, top, right, left, or diagonal.
//example #grad { background-image: linear-gradient(to right, red , yellow); }
Note:- It creates a background gradient that transitions from left to right from red to yellow color.
For Radical gradient,
the transition occurs as an ellipse from the center for different colors.
//example #grad { background-image: radial-gradient(red, yellow); }
Note:- It creates two elliptical-shaped transitions from the center of two colors (red and green).
Q28. What is use of Opacity in CSS?
The opacity in CSS tells how transparent an element is. The values of elements can vary from 0 to 1 in which 0 represents completely transparent and 1 represents completely opaque(not transparent at all). BY default, the value of each element is 1. The opacity property of CSS makes it easy to alter the opacity of text, images, <div>s, and other elements.
#element{ opacity:0.5 }
Q29. What is RWD?
RWD stands for Responsive web design which was built to make your web page look amaze on all devices.
Q30. What is difference between id and class selector in CSS?
In CSS, an Id is used to identify/select only one element whereas Class is utilized to identify more than one element.
// defining a title selector #title{ // some css } // defining a class selector .title{ // some css }
Q31. What are transitions in css?
Transition is a CSS effect that is used to change the style of an element smoothly over some time. The duration is specified to the transition element. If it is not specified, the default value of 0 seconds is taken. The transition effect has the following sub-properties to control the element.
Transition-property- defines which element the transition is to be applied.
Transition-duration – defines the duration for the transition.
Transition-timing-function – defines a function to calculate intermediate values.
Transition-delay – defines the delay for the start of the transition.
//syntax div { transition: ; } //example div { width: 100px; height: 100px; background: red; transition: width 2s; }
Q32. What are different ways to use css on a webpage?
CSS can be applied to HTML documents in three ways, internal, inline, and external.
Internal CSS
This is used if an HTML document needs to have a unique style. The style language is defined within the style tag(<style>) inside the head of the HTML document.
//example
<!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px;} </style> </head> <body> <h1>This is a heading</h1> </body> </html>
Inline CSS
Here, the style can be applied to each element in the HTML document using the style attribute.
//example
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> </body> </html>
External CSS
Here, an external style sheet with all the CSS coding is created with the .css extension and it can be linked to the HTML document using the link(<link>) element.
//example
body { background-color: lightblue; } It is a CSS file named ExternalCSS.css <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading <h1> </body> </html>
Note:- The CSS file is linked using the link element to the above document.
Q33. In Css what is the difference between "div p" and "div > p"?
Some basic difference between "div p" and "div > p" in CSS
div p{}
It is a general descendant selector. It applies the style as long as the paragraph(p) is present inside the <div>.
div > p{}
It is a direct descendant selector. It applies the style only if the paragraph(p) is the direct child of the <div>. That is ‘p’ should be first-level children, not sub children of <div>.
//example <div> <h1> A heading <p> A paragraph </div>
Here p is not a direct child. So, div > p will not apply the effect to 'p', but div p will.
Q34. How do I create buttons of fixed width using CSS?
To create a button of fixed width. Create a button class of some width and apply that class to every button in the HTML document.
//example
.btn{ Width: 100px; }
It’s a class that has fixed width.
<button class=“btn”>okay</button>
We apply the class to a button. Like this, we can apply the class to every button to get a fixed width.
Q35. What is the use of padding and margin in CSS?
The margin property in CSS is used to create space around the element borders. You can control the margin space for each side using the property top, right, left, and bottom in the margin.
//example p { margin-top: 100px; margin-bottom: 100px; margin-right: 100px; margin-left: 100px; }
Here, 100px of space is created around each side of the paragraph element.
The padding property is used to create space around the element but inside its border. The same way as margin, you can set padding for each side with the padding property.
//example P { padding-top: 50px; padding-right: 50px; padding-bottom: 50px; padding-left: 50px; }
Here, a space of 50px is created around the element but inside its border.
Q36. What is a CSS framework?
CSS framework can be defined as a collection of CSS files that allows for standard-compliant design.
Some of the frameworks may contain grid or Javascript functions, but most of the framework is used to improve the design of the webpage. The most popular CSS frameworks used now are bootstrap and foundation.
Q37. What are the different types of units available in CSS?
CSS supports several measurement units. Such as,
Q38. What is an Embedded Style Sheet?
The embedded style sheet is a way of specifying the CSS style language in the HTML document. Here, you specify the CSS inside the tag within your HTML document. The style tag must be placed within the head tag of the document. This type is used for the document that should have a unique CSS style.
//example
<html> <head> <style type="text/css"> p { font-family: georgia, serif; font-size: x-large; } </style> </head> <body> <p>Example for Embedded Style Sheet </body> </html>
Q39. What are Pseudo-elements in CSS?
A pseudo-element is used to apply a CSS style to the specific parts of the HTML element. The specific part may be the first line, letter, before or after a line or letter of an element.
//syntax selector::pseudo-element { property:value; } //example p::first-line { font-variant: small-caps; }
Here, the above code will apply the style to the first line of the paragraph. By the same way you can do for the first letter(::first-letter), before content(::before), after content(::after), and selection(::selection).
Q40. Enlist few limitations of CSS?
CSS is a good language to design the webpage, but it has some limitation such as,
Q41. What is CSS flexbox? Enlist properties of the flexbox?
Flexbox in CSS is a layout module to create a responsive layout that is flexible to design.
//example <div class="flex-container"> <div>1</div> </div>
To use a flexbox layout, you need to first define a flex container. In the above example, a flex container is designed with one division.
.flex-container { display: flex; //the display property makes the flex container flexible. }
Flexbox has six properties. They are,
Valid name is required.
Valid name is required.
Valid email id is required.
Satyam Jaiswal
Satyam is digital marketing expert, blogger from Allahabad Area. He loves to write technical articles and programming blog. He works on Onpage Seo, Social Media Groups and Off page Profile building