Scribd
Upload
3 views

CSS interview ques

The document provides a comprehensive overview of CSS concepts and techniques, including Flexbox, grid layouts, positioning, transitions, and pseudo-selectors. It includes code examples for various implementations, such as creating circles, animations, and using CSS combinators. The content is structured over several days, focusing on different aspects of CSS to enhance understanding and practical application.

Uploaded by

yemulashish
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS interview ques

The document provides a comprehensive overview of CSS concepts and techniques, including Flexbox, grid layouts, positioning, transitions, and pseudo-selectors. It includes code examples for various implementations, such as creating circles, animations, and using CSS combinators. The content is structured over several days, focusing on different aspects of CSS to enhance understanding and practical application.

Uploaded by

yemulashish
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

CSS INTERVIEW Qus

It seems like you have a series of ques ons and requests related to HTML and CSS concepts. I'll do my
best to provide concise answers and code examples for each of your points.

**Day 1:**

1. **Flexbox Implementa on:**

Flexbox is a layout model in CSS that allows you to design complex layouts with a flexible and efficient
approach. Here's a simple example of using flexbox to create a row and column layout:

```html

<!-- Flex Row -->

<div class="flex-container">

<div class="flex-item">Item 1</div>

<div class="flex-item">Item 2</div>

<div class="flex-item">Item 3</div>

</div>

<!-- Flex Column -->

<div class="flex-container column">

<div class="flex-item">Item 1</div>

<div class="flex-item">Item 2</div>

<div class="flex-item">Item 3</div>

</div>

```

CSS:

```css

.flex-container {
display: flex;

.column {

flex-direc on: column;

.flex-item {

flex: 1;

padding: 10px;

border: 1px solid black;

```

2. **Crea ng a Circle using Border Radius:**

You can create a circle using the `border-radius` property and se ng it to 50% of the container's
width/height. Here's an example:

```html

<div class="circle"></div>

```

CSS:

```css

.circle {

width: 100px;

height: 100px;

border-radius: 50%;

background-color: blue;
}

```

3. **Stylesheet Types:**

- **Inline Stylesheet**: CSS styles are directly wri en in the HTML tags using the `style` a ribute.

- **Internal Stylesheet**: CSS is defined within the `<style>` tag in the `<head>` sec on of the HTML
document.

- **External Stylesheet**: CSS is stored in a separate `.css` file and linked to the HTML document using
the `<link>` tag.

4. **Box Sizing:**

`box-sizing` is a CSS property that defines how the total width and height of an element are calculated.
It can have values like `content-box` (default) which includes only the content area, or `border-box`
which includes padding and border in the width/height calcula on.

5. **z-index in CSS:**

`z-index` is a CSS property that controls the stacking order of posi oned elements. Elements with
higher `z-index` values will be placed above elements with lower values.

6. **Padding vs. Margin:**

- **Padding**: Space inside the element's border, between the content and the border.

- **Margin**: Space outside the element's border, between the element and neighboring elements.

7. **Absolute vs. Rela ve Posi oning:**

- **Absolute Posi oning**: The element is posi oned rela ve to its nearest posi oned ancestor. It's
taken out of the normal flow of the document.

- **Rela ve Posi oning**: The element is posi oned rela ve to its normal posi on in the document
flow. It s ll occupies space in the document.

**Day 2:**
1. **Transi on Implementa on:**

Here's an example of a box whose width increases on hover with a smooth transi on effect:

```html

<div class="box"></div>

```

CSS:

```css

.box {

width: 100px;

height: 100px;

background-color: blue;

transi on: width 0.3s ease-in-out;

.box:hover {

width: 150px;

```

2. **jus fy-content:**

`jus fy-content` is a property used in flex containers to align flex items along the main axis (horizontal
for row, ver cal for column).

3. **Anima on Delay:**

`anima on-delay` is a property used in CSS anima ons to specify the delay before an anima on starts.

4. **Anima on Example:**
Here's a simple fade-in anima on example:

```html

<div class="fade-in"></div>

```

CSS:

```css

.fade-in {

width: 100px;

height: 100px;

background-color: blue;

anima on: fadeIn 1s ease-in-out;

@keyframes fadeIn {

from {

opacity: 0;

to {

opacity: 1;

```

5. **Merging Cells in Grid:**

To merge cells ver cally in a grid, you can use the `grid-row` property.

6. **grid-template-columns:**
`grid-template-columns` is used to define the columns of a grid layout.

7. **Merging Cells Horizontally in Grid:**

To merge cells horizontally in a grid, you can use the `grid-column` property.

8. **display: none vs. visibility: hidden:**

- `display: none` removes the element from the layout en rely; it's not rendered.

- `visibility: hidden` hides the element but s ll reserves space for it in the layout.

9. **Grid Implementa on:**

Here's a simple example of a grid layout:

```html

<div class="grid-container">

<div class="grid-item">Item 1</div>

<div class="grid-item">Item 2</div>

<div class="grid-item">Item 3</div>

</div>

```

CSS:

```css

.grid-container {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 10px;

.grid-item {
background-color: blue;

padding: 10px;

text-align: center;

```

10. **Transforma on Implementa on:**

Here's an example of rota ng an element:

```html

<div class="rotate"></div>

```

CSS:

```css

.rotate {

width: 100px;

height: 100px;

background-color: blue;

transform: rotate(45deg);

```

**Day 3:**

1. **Replica ng Bu on on PrepBytes Masthead:**

Due to my knowledge cutoff in September 2021, I can't access specific web designs. You can inspect
the bu on on the PrepBytes masthead using your browser's developer tools to see the HTML and CSS
code used to create it.
**Day 4:**

1. **CSS Combinators:**

CSS combinators are used to select specific HTML elements based on their rela onship to other
elements. Some common combinators are space (descendant), `>` (child), `+` (adjacent sibling), and `~`
(general sibling).

2. **Pseudo-selectors in CSS:**

Pseudo-selectors are used to select and style elements that are not based on their name, class, or ID,
but on their state or posi on in the document. Examples include `:hover`, `:ac ve`, `:nth-child`, etc.

Remember that CSS and web technologies are con nuously evolving, so be sure to refer to the latest
documenta on for any updates or changes.

Of course, let's con nue with the remaining topics.

**Day 5:**

1. **CSS Combinators:**

CSS combinators are used to define rela onships between HTML elements for styling purposes. Here
are a few common combinators:

- **Descendant Selector (Space)**: Targets elements that are descendants of a specific element.

```css

div p {

/* Styles applied to <p> elements within <div> elements */

```

- **Child Selector (> )**: Targets elements that are direct children of a specific element.
```css

ul > li {

/* Styles applied to <li> elements that are direct children of <ul> */

```

- **Adjacent Sibling Selector (+ )**: Targets an element that is immediately preceded by a specific
element.

```css

h2 + p {

/* Styles applied to <p> immediately following <h2> */

```

- **General Sibling Selector (~ )**: Targets elements that are siblings of a specific element.

```css

h2 ~ p {

/* Styles applied to <p> elements that are siblings of <h2> */

```

**Day 6:**

1. **Pseudo-Selectors in CSS:**

Pseudo-selectors allow you to target elements based on specific states or posi ons without adding
extra classes or IDs. Here are some examples:

- `:hover`: Styles applied when the element is hovered over.

- `:ac ve`: Styles applied when the element is clicked.


- `:focus`: Styles applied when the element gains focus (e.g., through tab naviga on).

- `:nth-child(n)`: Styles applied to the nth child element.

- `:first-child`, `:last-child`: Styles applied to the first and last child elements.

- `:nth-of-type(n)`: Styles applied to the nth element of a certain type.

- `:not(selector)`: Styles applied to elements that do not match the given selector.

Example:

```css

bu on:hover {

background-color: lightblue;

li:nth-child(odd) {

background-color: #f5f5f5;

input:focus {

border-color: green;

p:not(.special) {

color: gray;

```

These concepts should give you a solid founda on in HTML and CSS. Remember that prac ce is key to
mastering these technologies, so don't hesitate to experiment and build various layouts and designs to
solidify your understanding. If you have further ques ons or need clarifica on on any specific topic, feel
free to ask!

You might also like