Prepare for interviews with a comprehensive collection of over 250 coding challenges and MCQs, covering basic to advanced front-end concepts.

Web Page Styling—CSS

This module provides an extensive collection of questions commonly encountered in front-end interviews. With over 250 coding challenges and multiple-choice questions, it offers plenty of hands-on practice and experience opportunities. We will start by going through several self-assessment exams to get an idea of what we’ll need to prepare for. From there, we’ll go into interview questions on styling, such as text, colors, backgrounds, and display. In the latter half of the module, we’ll focus on advanced concepts like Flexbox, block formatting, and SVG. By the end of this module, we’ll have gained the confidence to appear in interviews and answer any questions about this topic.

CSS for Front-End Interviews

# Solution review

Let's have look at the solution first:





## Explanation

```css
.gallerycontainer {
    position: relative;
}
```

We used `position: relative;` to customize the current position of the small thumbnails images.

```css
.small-image {
    width: 100px;
    height: 75px;
    border: 0;
}
```

To create a small images gallery, we fix the height and width of the icons to have consistency. The `border: 0;` is used to remove the default border from the images.


```css
.thumbnail:hover {
    background-color: transparent;
}
```

To retain the background color of the images, we used the `background-color: transparent;` property.

```css
.thumbnail:hover img {
    border: 1px solid blue;
}
```

On hovering over the small images, you will notice a solid `blue` border around the images.

```css
.thumbnail span { 
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}
```

The position is set to `absolute` to change the position of the images relative to the parent element. The background color is set to `lightyellow` as you have seen the container of the text. The padding of the `5` pixels is added across all the sides. The color of the text is `black`. A dashed `1` pixel `gray` colored border is added around the images. The text-decoration is set to `none`.


```css
.thumbnail span img { 
    border-width: 0;
    padding: 2px;
    height: 400px;
}
```

The padding of `2` pixels is added around the images inside blue lines. The height of the images is set to `400` pixels.


```css
.thumbnail:hover span { 
    visibility: visible;
    top: 0;
    left: 230px; 
    z-index: 50;
}
```

The content inside the `span` is only visible when hovering on small thumbnails. The left is set to `230` pixels as the small thumbnails take more than `210` pixels space. The `z-index` of the span is set to `50` pixels so that the content is visible along the side of the image.

Solve this challenge related to creating the image gallery for the CSS position property to evaluate yourself in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Conclusion

Solution Review: CSS Position Challenge 3

Solution review

Explanation