CSS Interview Questions For Freshers
Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages.
More importantly, CSS enables you to do this independent of the HTML that makes up each web page. CSS is easy to learn and understood, but it provides powerful control over the presentation of an HTML document.
We use CSS because of the following reasons:
- CSS saves time: You can write CSS once and reuse the same sheet on multiple HTML pages.
- Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically.
- Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content.
- Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
- Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using of this we can view offline websites.
- CSS plays an important role, by using CSS you simply got to specify a repeated style for an element once & use it multiple times because CSS will automatically apply the required styles.
- The main advantage of CSS is that style is applied consistently across a variety of sites. One instruction can control several areas which are advantageous.
- Web designers need to use a few lines of programming for every page improving site speed.
- Cascading sheet not only simplifies website development but also simplifies maintenance as a change of one line of code affects the whole website and maintenance time.
- It is less complex therefore the effort is significantly reduced.
- It helps to form spontaneous and consistent changes.
- CSS changes are device friendly. With people employing a batch of various range of smart devices to access websites over the web, there’s a requirement for responsive web design.
- It has the power for re-positioning. It helps us to determine the changes within the position of web elements that are there on the page.
- These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess of pages.
- Easy for the user to customize the online page
- It reduces the file transfer size.
- CSS, CSS 1 up to CSS3, result in creating confusion among web browsers.
- With CSS, what works with one browser might not always work with another. The web developers need to test for compatibility, running the program across multiple browsers.
- There exists a scarcity of security.
- After making the changes we need to confirm the compatibility if they appear. A similar change affects all the browsers.
- The programing language world is complicated for non-developers and beginners. Different levels of CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
- Browser compatibility (some style sheets are supported and some are not).
- CSS works differently on different browsers. IE and Opera support CSS as different logic.
- There might be cross-browser issues while using CSS.
- There are multiple levels that create confusion for non-developers and beginners.
5. What is the current version of CSS?
CSS3 is the latest version of CSS.
S.No. | CSS | CSS3 |
| 1 | CSS is capable of positioning texts and objects. CSS is somehow backward compatible with CSS3. | On the other hand, CSS3 is capable of making the web page more attractive and takes less time to create. If you write CSS3 code in CSS, it will be invalid. |
| 2 | Responsive designing is not supported in CSS | CSS3 is the latest version, hence it supports responsive design. |
| 3 | CSS cannot be split into modules. | Whereas, whereas CSS3 can be breakdown into modules. |
| 4 | Using CSS, we cannot build 3D animation and transformation. | But in CSS3 we can perform all kinds of animation and transformations as it supports animation and 3D transformations. |
| 5 | CSS is very slow as compared to CSS3 | Whereas, CSS3 is faster than CSS. |
The best CSS frameworks are:
- Bootstrap
- Foundation
- Bulma
- UIKit
- Semantic UI
- Materialize
- Pure
- Tailwind CSS
A CSS style rule consists of a selector, property, and its value. The selector points to the HTML element where CSS style is to be applied. The CSS property is separated by semicolons.
Syntax:
selector {
Property: value;
}
Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML elements. It sets the background color, font size, font family, color, … etc properties of elements on a web page.
There are three types of CSS which are given below:
- Inline CSS: Inline CSS contains the CSS property in the body section attached with the element known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
- Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS ruleset should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.
- External CSS: External CSS contains a separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with .css extension and should be linked to the HTML document using the link tag. This means that for each element, style can be set only once and that will be applied across web pages.
Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are defined in multiple style sheets then the below order will be followed.
- As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles.
- Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet.
- External style sheets have the least priority. If there are no styles defined either in the inline or internal style sheet then external style sheet rules are applied for the HTML tags.
11. What are CSS Selectors?
CSS Selectors: CSS Selectors are used to selecting HTML elements based on their element name, id, attributes, etc. It can select one or more elements simultaneously.
element selector: The element selector in CSS is used to select HTML elements which are required to be styled. In a selector declaration, there is the name of the HTML element, and the CSS properties which are to be applied to that element is written inside the brackets {}.
Syntax:
element_name {
// CSS Property
}
id selector: The #id selector is used to set the style of the given id. The id attribute is the unique identifier in an HTML document. The id selector is used with a # character.
Syntax:
#id_name {
// CSS Property
}
class selector: The .class selector is used to select all elements which belong to a particular class attribute. To select the elements with a particular class, use the (.) character with specifying the class name. The class name is mostly used to set the CSS property to the given class.
Syntax:
.class_name {
// CSS Property
}
Comments are the statements in your code that are ignored by the compiler and are not executed. Comments are used to explain the code. They make the program more readable and understandable.
Syntax:
/* content */
Comments can be single-line or multi-line.
13. What does the ‘a’ in rgba mean?
RGBA contains A (Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent.
Syntax:
h1 {
color:rgba(R, G, B, A);
}
14. What are CSS HSL Colors?
HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.
- Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents a blue color.
- Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
- Lightness: It takes a percentage value, where 100% represents white, while 0% represents black.
Syntax:
h1 {
color:hsl(H, S, L);
}
Example:
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1{
color:hsl(120, 100%, 30%);
text-align:center;
}
</style>
</head>
<body>
<h1>
w3wiki
</h1>
</body>
</html>
Output:
The CSS background properties are used to define the background effects for elements.
CSS background properties are as follows:
- background-color: This property specifies the background color of an element.
- background-image: This property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
- background-repeat: By default, the background image property repeats the image both horizontally and vertically.
- background-attachment: This property is used to fix the background ground image. The image will not scroll with the page.
- background-position: This property is used to set the image to a particular position.
CSS border properties allow us to set the style, color, and width of the border.
- Border Style: The border-style property specifies the type of border. None of the other border properties will work without setting the border style.
- Border Width: Border width sets the width of the border. The width of the border can be in px, pt, cm or thin, medium and thick.
- Border Color: This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.
17. What does margin: 40px 100px 120px 80px signify?
CSS margins are used to create space around the element. We can set the different sizes of margins for individual sides (top, right, bottom, left).
Margin properties can have the following values:
- Length in cm, px, pt, etc.
- Width % of the element.
- Margin calculated by the browser: auto.
Therefore, margin: 40px 100px 120px 80px signifies:
- top = 40px
- right = 100px
- bottom = 120px
- left = 80px
- Margin is used to create space around elements and padding is used to create space around elements inside the border.
- We can set the margin property to auto but we cannot set the padding property to auto.
- In Margin property we can allow negative or float number but in padding we cannot allow negative values.
- Margin and padding target all the 4 sides of the element. Margin and padding will work without the border property also. The difference will be more clear with the following example.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
margin:50px;
border:70px solid green;
padding:80px;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h2>
Padding properties
</h2>
</body>
</html>
Output:
The CSS box model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:
- borders
- margins
- padding
- Content
The following figure illustrates the box model.
- Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of the border.
- Margin Area: This area consists of space between border and margin. The dimensions of the Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors.
- Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border box. Its dimensions are given by the width of the padding-box and the height of the padding-box.
- Content Area: This area consists of content like text, images, or other media content. It is bounded by the content edge and its dimensions are given by content box width and height.
20. What is the difference between CSS border and outline?
- CSS border properties allow us to set the style, color, and width of the border.
- CSS outline property allows us to draw a line around the element, outside the border.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
outline: 5px solid #ddd;
border: 1px solid #000;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Differences:
- Unlike borders, outlines don’t allow us to set each edge to a different width, or set different colors and styles for each edge. An outline is the same on all sides.
- Outlines cannot be circular.
- Outlines do not take up space, because they are always placed on top of the box of the element.
CSS text formatting properties are used to format text and style text.
CSS text formatting includes the following properties:
- Text-color
- Text-alignment
- Text-decoration
- Text-transformation
- Text-indentation
- Letter spacing
- Line height
- Text-direction
- Text-shadow
- Word spacing
A link is a connection from one web page to another web page. CSS property can be used to style the links in various different ways.
States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist in different states and they can be styled using pseudo-classes.
There are four states of links given below:
- a:link: This is a normal, unvisited link.
- a:visited: This is a link visited by a user at least once
- a:hover: This is a link when the mouse hovers over it
- a:active: This is a link that is just clicked.
To add an image as the list-item marker in a list, we use the list-style-image property in CSS.
Syntax:
list-style-image: none | url | initial | inherit;
The style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery.
To hide an element, set the style display property to “none”.
display: "none";
To show an element, set the style display property to “block”.
display:"block";
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.visible {
display: block;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1 class="visible">visible heading</h1>
<h1 class="hidden">hidden heading</h1>
<p>
Note: The h1 element with display: none;
does not take up any space.
</p>
</body>
</html>
Output:
The visibility property is used to hide or show the content of HTML elements. The visibility property specifies that the element is currently visible on the page. The ‘hidden’ value can be used to hide the element. This hides the element but does not remove the space taken by the element, unlike the display property.
Syntax:
visibility : 'hidden';
visibility :'visible';
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.visible {
visibility: visible;
}
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h2 class="visible">This heading is visible</h2>
<h2 class="hidden">This heading is hidden</h2>
<p>Note: The hidden element still takes up space.</p>
</body>
</html>
Output:
Both of the property is quite useful in CSS. The visibility: “hidden”; property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. The visibility is a property in CSS that specifies the visibility behavior of an element and display: “none” property is used to specify whether an element is exist or not on the website.
Syntax:
visibility: visible| hidden | collapse | initial | inherit;
display: none | inline | block | inline-block;
So, the difference between display: “none”; and visibility: “hidden”;, right from the name itself we can tell the difference as display: “none”, completely gets rids of the tag, as it had never existed in the HTML page whereas visibility: “hidden”;, just makes the tag invisible it will still be on the HTML page occupying space it’s just invisible.
CSS Interview Questions and Answers
CSS stands for Cascading Style Sheets and CSS is essential for creating visually engaging web pages and user interfaces for web applications. It is a language used to make websites look good by controlling how things like colors, fonts, and layout are displayed on a webpage. It was first proposed by Håkon Wium Lie in 1994.
In this Top 60+ CSS Interview Questions and Answers article, we will provide the Interview Questions of CSS for both freshers and experienced developers. Here, we cover everything, including fundamentals of CSS, CSS Box Model, CSS Selectors, CSS Flexbox and Grid, CSS Specificity, CSS Architecture, CSS Transitions and Animations, and more, that will surely help you to crack your next CSS interview.
CSS Interview Questions and Answers (2024)
In this article, you will learn CSS interview questions and answers that are most frequently asked in interviews. Before proceeding to learn CSS interview questions and answers, first, we learn the complete CSS Tutorial.
Table of Content
- CSS Interview Questions For Freshers
- CSS Interview Questions for Experienced
Contact Us