CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on the browser screen or when we print the page. It can control the layout of Web page for different screen resolution. When we write CSS rules, they are applied on HTML elements. For a Front-End developer it is very important to understand the CSS concepts. Now, with Flexbox design and media queries we can design a layout which can render on screen resolutions. Below are the top CSS questions which are generally asked during an interview.
important List of CSS interview Questions
- How many ways can a CSS be integrated into a web page?
- How to include a CSS file into the HTML page?
- What are selectors in CSS?
- What is CSS specificity or order of precedence?
- What is a pseudo class?
- What is LVHA order?
- What is a pseudo element?
- Explain float, display, position?
- Position in CSS and when to use it?
- What is a CSS box model?
- What is Responsive Web Design?
- CSS Flexbox
- What is z-index? How to achieve UI layering?
- What is the difference between visibility: hidden and display: none?
- How to make a web page responsive without using any framework?
1. How many ways can a CSS be integrated into a web page?
Three main ways to apply CSS styles to a Web page
- Inline css
- On the document
- external link
2. How to include a CSS file into the HTML page?
We can include a CSS file into the HTML page using link tag-
<link href="/yourStyle.css" >
3. What are selectors in CSS? How many types of selector are there in CSS?
selectors are way to select HTML elements to which a CSS rules will apply. In simple word by using selector we can target bunch of matching elements or a particular element and we can write CSS rule for them.
There are mainly 5 types of selectors- Universal Selector- It select all elements
- Type Selector- It select all matching type elements
- Class Selector- It select all elements having matching class
- ID Selector- It select an element having matching
- Attribute Selector- It selects all the elements having same attribute
We can also group the selectors to select a specific or group of elemets.
4. What is CSS specificity or order of precedence?
Below is the specificity of different selectors
- 1000- for inline style attribute
- 100- for each ID
- 10- for each attribute, class or pseudo-class
- 1- for each element name (Tags) or pseudo-element.
Consider below example
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
The specificity of A is 1 (one element)
The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)
5. What is a pseudo class?
Pseudo class is a state of the selected element(s). For example, :active represents an element (such as a button) that is being
activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
/* Selects any <a> that is being activated */
a:active {
color: red;
}
6. What is LVHA order?
Link Visited Hover Active (LVHA) these 4 (pseudo class) states of elements should always be listed in that order, like so:
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}
Follow this article to understand more Read here
7. What is a pseudo element?
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line
can be used to change the font of the first line of a paragraph.
Few of the Pseudo Elelmets
::after (:after) :before (:before) ::first-letter (:first-letter) ::first-line (:first-line)
8. Explain float, display?
The float property is used for positioning of element. Ex; float property can be used to wrap text around images.
It has 4 values: left, right, none, inherit. And it position the element as the value suggest.
display- Every element in HTML has its default display property value which is taken from the HTML specifications. For example all div, p
and header tags are block label elements, It means they will take the width of its parent. However span, a tags are inline element.
If we write these two together they will come adjacent to each other.
Display property can alter the behaviour of its rendering box. We can change a clock level element to inline and vice-versa.
| Value | Description |
| inline | Displays an element as an inline element |
| block | Displays an element as a block element |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM |
| flex | Displays an element as a block-level flex container |
| grid | Displays an element as a block-level grid container |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values |
| inline-flex | Displays an element as an inline-level flex container |
| inline-grid | Displays an element as an inline-level grid container |
| inline-table | The element is displayed as an inline-level table |
| list-item | Let the element behave like a <li> element |
| run-in | Displays an element as either block or inline, depending on context |
| table | Let the element behave like a <table> element |
| table-caption | Let the element behave like a <caption> element |
| table-column-group | Let the element behave like a <colgroup> element |
| table-header-group | Let the element behave like a <thead> element |
| table-footer-group | Let the element behave like a <tfoot> element |
| table-row-group | Let the element behave like a <tbody> element |
| table-cell | Let the element behave like a <td> element |
| table-column | Let the element behave like a <col> element |
| table-row | Let the element behave like a <tr> element |
| none | The element is completely removed |
| initial | Sets this property to its default value. |
9. Position in CSS and when to use it?
As the name suggest, position property is used to position the element on the page. It has these values:-
static(its default property, not affected by the top, bottom, left, and right)
relative. (relative to where it occurs)
fixed. (relative to viewport)
absolute. (relative to its parent element)
sticky. (it mix of relative and fixed, Element will be fixed based on its scroll position.) check a detailed
10. What is CSS box model.
The CSS box model describes how an element will be rendered on web page. Elements are internally placed as a rectangular box. We all know that each element in HTML is either block on inline-block, and also they have properties like margin, padding and border. These properties are part of that rectangle. In the image below, blue are is holding the content. Green area is the padding around that content. Then then there is a border and then margin. When we apply background colour to an element it is applied to the content and till its padding, however margin remains transparent. Margin is generally used to make a relative distance from nearest elements.
11. What is Responsive Web Design, how can we make page responsive?
In today’s world we are not only using desktop but different screen resolutions Like: Mobile, tablets, laptops and monitors etc.
Each screen have different size. Now it becomes very important to fit the web page content to those screens and this can be achieved
using responsive web design.
We can write CSS media queries and style and position all the web elements according to the screen resolution. CSS media queries can identify the
screen resolution we can write specific style rules for that resolution.
For example:
A narrow screen can show content once below other but a wider screen can show content next to each other, and we can use same web page
with media queries to achieve this.
First of all we need to add a meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag with viewport will scale the content according to the screen resolution. when we see a webpage(If it is not responsive) in mobile it will look very small, because when rendering a wider content to a narrow screen the viewport/virtual screen will render the content and shrink it down to fit to the screen. To adjust it according to mobile or tablet screen we mention view port.
12. CSS Flexbox
Flexbox is used to provide a more efficient way to layout the content of the page. it align and place the items in a container,
even when their size is unknown and/or dynamic (therefor the word “flex”). It makes responsive design much, much easier than it
used to be. With advancement in technology and design we need more flexibility in CSS to show complex layout on the page. Flexbox
provides a way to keep elements within a container to be automatically arranged depending upon screen size.
Flexbox provides a way to distribute the space around or between the element. We don’t have to do all space distribution calculation.
It also align elements vertically evenly.
Read this article for more detail more
13. What is z-index? How to achieve UI layering?
The z-index property specifies the stack order of an element. An element with greater stack order is always stacked on the top. In simple word if we have to show an element on the top of another element as a layer we can use z-index. Est example is pop-ups, dialog boxes. They always appear on the top of other webpage elements.
14. What is difference between visibility: hidden and display: none?
visibility: hidden hides the element from the screen but it still occupy that space, however display: none not only hide the element but hide its space too.
15. How to make a web page responsive without using any framework?
By using media queries, Using media
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
We can also use orientation Mode:
#The viewport is in a ladscape orientation means- the width is greater than or equal to the height.
@media only screen and (orientation: landscape) {
body {
background: Efff;
}
}
#The viewport is in a portrait orientation means- the height is greater than or equal to the width.
@media only screen and (orientation: portrait) {
body {
background: Efff;
}
}
0 Comments