As CSS stands for Cascading stylesheet and you must know about the word cascade means override (something arranged in a series that each stage acts upon the property of the preceding). We must prepare ourselves before going for an interview in corp. Here is some CSS interview questions with answers for you to crack the interview.
Q1. How can CSS be integrated into an HTML page?
Ans :
CSS can be integrated through 4 ways into an HTML Page.
- External CSS – An external Css file can be integrated using link in the header section of HTML
- <link rel=”stylesheet” type=”text/css” href=”mystyles.css” />
- Internal CSS / Embed CSS – CSS stylesheets can be included within your HTML page using style tag
- <style type=”text/css”> /* style rules here*/ </style>
- Inline CSS – Stylesheet can be added directly to the HTML element using a style tag
- <h2 style=”color:red;background:black”>Inline Stylesheet</h2>
- Import CSS – Rare way to add CSS is by using the @import rule. This is to add a new CSS file within CSS itself means to add additional Css in CSS stylesheet.
- @import “path/to/style.css”;
Q2. What is CSS frameworks ?
Ans:
CSS frameworks are software used for UI developers to aid them in their work means make their work easier and rapid. The framework already has classes & ids built-in for common website elements such as footer, slider, navigation bar, hamburger menu, column-based layouts & much more.
Top 5 CSS Frameworks for Website Developers & Designers
- Bootstrap
- Foundation
- Bulma
- UIkit
- Skeleton
Q3. Differentiate between CSS3 and CSS2 ?
Ans :
| CSS/CSS2 | CSS3 |
|---|---|
| CSS2 was released in 1998 | CSS3 was released in 1999 |
| Responsive designing is not supported in CSS | CSS3 is the latest version, hence it supports responsive design. |
| CSS cannot be split into modules. | Whereas, CSS3 can be breakdown into modules. |
| We cannot build 3D animation and transformation. | We can perform all kinds of animation and transformations as it supports animation and 3D transformations. |
| CSS is very slow as compared to CSS3 | Whereas, CSS3 is faster than CSS. |
| CSS is not modern adaptive as it does not support special effect like shadowing text, text animation, etc. in CSS. The animation was coded in jQuery and JavaScript. | CSS3 is more modern adaptive as it has many advance features like text shadows, visual effects, and a wide range of font style and color. |
Q4. What is the difference between a Class and an ID?
Ans :
| ID | Class |
|---|---|
| Ids are unique. | Classes are not unique (can be same). |
| An element ID name starts with the “#” symbol followed by a unique name assigned to it. | An element class name starts with the “.” followed by class name. |
| Only one ID selector can be attached to an element. | Multiple class selectors can be attached to an element. |
| An ID is a numerical identifier, used to enumerate DOM objects of the same type so that they inherit different properties. | Class is used for a particular DOM object to inherit certain properties. |
| Syntax: .class{ // declarations of CSS } | Syntax: #id{ // declarations of CSS } |
Q5. What is VH/VW in CSS?
Ans :
- Viewport Height (vh) – This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.
- Viewport Width (vw) – This unit is based on the width of the viewport. A value of 1vw is equal to 1% of the viewport width.
Q6. What is RWD?
Ans :
RWD stands for Responsive Web Design. Responsive web design makes your web page look good with respect to all devices. RWD is used to render website for different screen sizes from minimum to maximum display size to ensure usability and satisfaction.
RWD is intended to be seen on a variety of devices, including tablets, desktops and mobile phones. Your site must look professional and be simple to use whatever device you use.
Q7. What are the advantages of using CSS?
Ans :
CSS is described as a sheet language that allows web developers with control over how a website communicates with web browsers including the formatting and display of their HTML documents.
- Speed – You can write CSS once and then reuse the same sheet in multiple HTML pages
- Easy maintenance – For a complete modification, just modify the style, and the rest of the websites will be automatically updated.
- Search Engine Optimization – Allowing search engine spiders to get through your code faster means your web pages can be indexed faster using meta tags in CSS3.
- Global web standards – Recently HTML attributes are being deprecated as it is highly recommended to use CSS.
- Device Compatibility – People use different smart devices to view a particular website. It can be a smartphone, PC or laptop.
- Platform Independence – The Script provide a consistent platform independence, and supports the most recent browsers.
Q8. What are the disadvantages of using CSS?
- Cross-Browser Issues – Every browser works differently. So, you have to check that changes implemented in the website via CSS codes.
- Vulnerability – It is easily accessible because of its open text-based system that causes security issues.
- CSS levels – The beginners are most vulnerable to this problem. They may be confused when trying to master CSS because there are a variety of levels of CSS like CSS2, CSS3, etc.
- Work load for developers – Design services must examine and test every CSS codes in different browsers to ensure compatibility. Since developers test compatibility across various browsers, they are able to increase their workload.
Q9. What are block & inline elements?
Ans :
- Block element – Block elements always begin with a new line and takes up the full width available. A block level element has a top and a bottom margin (by default). Ex – <div>, <h>, <p>, <li> & <hr> etc.
- Inline element – Inline elements do not begin the same line. An inline element can only take the width needed. It does not take any extra space as bottom-top margin. Ex – <span>,<a>, <input> etc.
Q10. What is the CSS Box model ?
Ans :
In CSS, the term “box model” is used to depict design and layout. The CSS box model is a container that shows properties like borders, margin, padding, and the content itself.
Q11. What is z-index ?
Ans :
Z Index defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. It is related to the 3D we can adjust the z-axis with the property called z-index. The value of z can also be positive, negative, or zero.
