Skip to main content

Css Interview Questions Set 1




Let's begin with set 1,

 1)What is CSS box model?
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:
Explanation:
Content - The content of the box, where text and images appear.
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content.
Margin - Clears an area outside the border. The margin is transparent.



2)What are selectors in CSS?
In CSS, selectors are patterns used to select the elements you want to style.
Here are few most used selectors,
a).class : Ex:.intro
Selects all elements with class="intro".

b).class1.class2 Ex: .name1.name2
Selects all elements with both name1 and name2 set within its class attribute.

c)#id Ex:#firstname
Selects the element with id="firstname".

d)element Ex:p
Selects all <p> elements.
Check this for more selectors.
Note: Selectors are also used in scrapping Html.

3)What is the difference between margin and padding? 
Padding is the space between the content and the border,
whereas margin is the space outside the border.
You can also draw an image to show the difference to the interviewer.

4)Positions in CSS?
The position property specifies the type of positioning method used for an element.
There are five different position values:

a)static:HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:

b)relative: An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position.
Other content will not be adjusted to fit into any gap left by the element.

c)fixed: An element with position: fixed; is positioned relative to the viewport,
which means it always stays in the same place even if the page is scrolled.
 The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.

d)absolute: An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Note: A "positioned" element is one whose position is anything except static.

e)sticky: A sticky element toggles between relative and fixed, depending on the scroll position.
It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).
Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.
They also work differently depending on the position value.

I hope you like this article.
Please stay connected for CSS interview questions set 2.
 
You can also follow me on Twitter or Linkedin for the latest updates.

Written By:

Saurabh Joshi

Comments

Post a Comment

Popular posts from this blog

Globant part 1

 1)call,apply,bind example? Ans: a. call Method: The call method is used to call a function with a given this value and arguments provided individually. Javascript code: function greet(name) {   console.log(`Hello, ${name}! I am ${this.role}.`); } const person = {   role: 'developer' }; greet.call(person, 'Alice'); // Output: Hello, Alice! I am developer. In this example, call invokes the greet function with person as the this value and passes 'Alice' as an argument. b. apply Method: The apply method is similar to call, but it accepts arguments as an array. Javascript code: function introduce(language1, language2) {   console.log(`I can code in ${language1} and ${language2}. I am ${this.name}.`); } const coder = {   name: 'Bob' }; introduce.apply(coder, ['JavaScript', 'Python']); // Output: I can code in JavaScript and Python. I am Bob. Here, apply is used to invoke introduce with coder as this and an array ['JavaScript', 'Pyt...
Post a Comment
Read more

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som...
1 comment
Read more

CSS INTERVIEW QUESTIONS SET 2

  You make also like this CSS interview question set 1. Let's begin with set 2, 5)What is the difference between opacity 0 vs display none vs visibility hidden? Property           | occupies space | consumes clicks | +--------------------+----------------+-----------------+ | opacity: 0         |        yes      |        yes       | +--------------------+----------------+-----------------+ | visibility: hidden |        yes       |        no        | +--------------------+----------------+-----------------+ | display: none      |        no       |        no        | When we say it consumes click, that means it also consumes other pointer-events like onmousedown,onmousemove, etc. In e...
Post a Comment
Read more