CSS More Interview Questions

1. What is the CSS visibility property?

The CSS

visibility

property specifies the visibility of an HTML element.

Some of the values of the CSS

visibility

are:

Value	Description
visible	shows the element
hidden	hides the element but space will be allocated to the element in the HTML document

Example:

1

2

3

.container {

visibility: hidden;

}

CSS

2. What is CSS Positioning?

The CSS

position

property defines the position of an HTML element in an HTML document. There are five values the CSS

position

property can take. They are:

1. static
2. relative
3. absolute
4. fixed
5. sticky

Static positioning

By default, HTML elements are positioned as static. This means that the HTML element is not affected by the

top

,

bottom

,

left

, and

right

CSS properties.

The

top

,

bottom

,

left

, and

right

properties are used with a position property to set the placement of an HTML element.

The element will generally move away from a given side when its value is positive and towards it when the value is negative.

As the HTML elements are positioned as

static

by default, the elements that we explicitly mention the

position

property value as

static

and doesn't mention the

position

property at all behave the same.

Relative positioning

A relative positioned element is just like a static element but we can move it around from its default place.

If we notice the other content on the image, the element doesn't affect the document flow. That's why we say that this element is relative to itself.

Here the orange box will move away from the top

100px

and left

100px

from its default position. We can see that the orange box is beside the blue box in the preview.

Absolute positioning

The absolute positioned elements are no longer part of the document flow. The other elements will ignore the absolute positioned element and re-flow accordingly.

They are positioned from their closest ancestor(closest parent) which has the

position

property value other than

static

. If no ancestor has a positioning, they are positioned from the viewport.

Now it looks like the blue box has disappeared, but it hasn’t. The blue box behaves like the orange box is removed, so it shifts up to the orange box’s place.

Fixed positioning

The fixed positioned elements are also no longer part of the document flow as absolute positioned elements. They are positioned relative to the screen’s viewport. The element does not move when the page is scrolled.

The position fixed will appear only if the page has scrolling.

Sticky Positioning

The sticky positioned elements will initially behave like

position: relative

elements, but if we keep scrolling, they will get taken out of the normal flow and behave like

position: fixed

in their parent element.

This can be useful if we want to stick an element that's initially farther down the page to the top of the screen.

Here the top, bottom, left and right properties behave differently. When we set the top property(10px) to the position sticky element, the element will behave as relative until it reaches the 10px from the viewport and then it behaves as fixed in its parent container. Note Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. 3. What is the default value of the CSS position property? The default value of the CSS position property is static. This means that the HTML element is not affected by the top, bottom, left, and right CSS properties.

CSS properties.

As the HTML elements are positioned as static by default, the elements that we explicitly mention the position static and doesn't mention the position property at all behave the same.

4. If an HTML container (div) element and an HTML paragraph element is given. How will you move HTML paragraph element to top left corner?

We can move the HTML paragraph element to top-left corner by applying,

CSS position property with value fixed or absolute to HTML paragraph element.

CSS top property and CSS left property with value 0 to HTML paragraph element.

5. What are the differences between relative positioning and absolute positioning?

relative	absolute
HTML element is positioned from its default place	HTML element is positioned from the closest parent element which has position property other than static. If there is no positioned parent element, it is positioned from the viewport.
The default place of the HTML element remains in the flow of the document	The HTML element is removed from the flow of the document and other elements will behave as if it’s not present.

6. What are the differences between fixed positioning and absolute positioning?

fixed	absolute
HTML element is positioned from the viewport.	HTML element is positioned from the closest parent element which has position property value other than static. If there is no positioned parent element, it is positioned from the viewport.
The HTML element does not move when the page is scrolled.	The HTML element moves when the page is scrolled.
The HTML element is removed from the flow of the document and other elements will behave as if it’s not present.	The HTML element is removed from the flow of the document and other elements will behave as if it’s not present.

7. What are the differences between fixed positioning and sticky positioning?

The sticky positioned elements will initially behave like

position: relative

elements, but if you keep scrolling, they will get taken out of the normal flow and behave like

position: fixed

wherever you have positioned them in their parent element.

8. Explain the different types of CSS Selectors?

The different types of CSS Selectors are:

• Simple Selectors

  • Class Selector
  • ID Selector
  • Type (tag name) Selector
  • Universal Selector
• Attribute Selector
• Pseudo-classes
• Pseudo-elements
• Combinators

Simple Selectors

Selector	Description
Type(Tag name)	Selects all the elements of a given type(tag name)
Class	Selects all the elements of a given class name
ID	Selects all the elements of a given id
Universal	Selects all the elements in an HTML document

Attribute Selector

The CSS Attribute Selector is used to select the HTML elements of a specified attribute or a specified attribute and value.

Examples:

1. With Attribute name

1

2

3

a[title] {

...

}

CSS

2. With both Attribute name and value

1

2

3

4

a[href="https://example.com"]

{

...

}

CSS

Pseudo-classes

A CSS pseudo-class specifies a special state of the selected elements. Some of the CSS Pseudo-classes are

:hover

,

:visited

,

:focus

, etc.

Example:

1

2

3

a:visited {

...

}

CSS

Pseudo-elements

A CSS Pseudo-element is used to style a specific part of the selected element. Some of the CSS Pseudo-elements are

::before

,

::after

,

::first-line

, etc.

Example:

1

2

3

p::first-letter {

color: skyblue;

}

CSS

9. What are CSS Pseudo-classes?

A CSS pseudo-class specifies a special state of the selected elements.

A pseudo-class can't exist on its own. It must be attached to a CSS selector. The pseudo-class will only define a particular state of that selector.

Syntax:

1

2

3

4

.selector:pseudo-class {

/*There is no space between the selector and the pseudo-class*/

...

}

CSS

Some of the common CSS Pseudo-classes are:

Pseudo-class	Description
:hover	CSS properties will be applied if the selected element has hovered
:visited	CSS properties will be applied if the link is visited
:focus	CSS properties will be applied if the selected element is focused
:first-child	CSS properties will be applied if the selected element is first of its siblings
:last-child	CSS properties will be applied if the selected element is the last of its siblings

10. What are CSS Pseudo-elements?

A CSS Pseudo-element is used to style a specific part of the selected element.

For example, it can be used to:

• Style the first letter or first line of an HTML element
• Insert content before or after the content of an HTML element

Syntax:

1

2

3

selector::pseudo-element {

property: value;

}

CSS

Some of the common CSS Pseudo-elements are:

Pseudo-element	Description
::first-line	CSS properties will be applied to the first line of the content in the selected element
::first-letter	CSS properties will be applied to the first letter of the content in selected element
::before	Content will be inserted before the content of a selected element
::after	Content will be inserted after the content of a selected element

11. How to apply CSS Properties by child number?

We can apply CSS properties by child number using the CSS

nth-child

selector.

The CSS

:nth-child()

pseudo-class selects the HTML elements based on the position among their siblings.

Example:

1

2

3

p:nth-child(2) {

color: green;

}

CSS

:nth-child()

takes a single argument. It might be a number or keyword (even, odd) or formula (2n).

12. How to style the visited and unvisited links using CSS?

We can style the visited and unvisited links with the CSS pseudo-classes

:link

and

:visited

.

Unvisited links: Using

:link

or other selectors like tag, class name, etc.

1

2

3

a:link {

color: red;

}

CSS

Visited links: Using

:visited

1

2

3

a:visited {

color: green;

}

CSS

All the visited links will be in green color whereas all unvisited links are in red color.

13. How to wrap a block of text around the HTML image element?

We can wrap a block of text around the HTML image element using the CSS

float

property.

Some of the values of the CSS

float

property are:

Value	Description
none	(Default value) The element does not float (will be displayed just where it occurs in the text)
left	The element floats to the left of its container
right	The element floats to the right of its container

Example:

1

2

3

img {

float: right;

}

CSS

14. Explain CSS Background Properties?

The CSS background properties let us control the size and properties of background images/colors.

Some of the CSS background properties are:

• background-image
• background-size
• background-repeat
• background-position
• background-origin
• background-clip
• background-attachment
• background-color
• background
   (Short hand)

Background Image

The CSS

background-image

property sets one or more background images on an HTML element.

Example:

1

2

3

div {

background-image: url("image1.png"), url("image2.png");

}

CSS

Background Size

The CSS

background-size

property sets the size of the background image of an HTML element.

Some of the values of CSS

background-size

property are:

Value	Description
cover	Scales the image to the smallest size while maintaining the same aspect ratio (width/height) and covers the entire width and height even if the image is cropped or stretched
contain	Scales the image to the largest size while maintaining the same aspect ratio (width/height) and shows the whole image, even if that leaves a little space to the sides or bottom
percentage	Sets the width and height of the background image with respect to the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Example: "50% 50%"

Example:

1

2

3

4

div {

background-image: url("image1.png");

background-size: cover;

}

CSS

Background Repeat

The CSS

background-repeat

property sets how a background image is repeated.

Some of the values of CSS

background-repeat

property are:

Value	Description
repeat	(Default value) The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit.
no-repeat	The background image is not repeated. The image will only be shown once.

Example:

1

2

3

4

div {

background-image: url("image1.png");

background-repeat: no-repeat;

}

CSS

Background Position

The CSS

background-position

property sets the initial position for the background image.

Example:

1

2

3

4

div {

background-image: url("image1.png");

background-position: right;

}

CSS

Background Origin

The CSS

background-origin

property specifies the origin of the background image/ what the CSS

background-position

property is relative to.

Some of the values of CSS

background-origin

property are:

Value	Description
padding-box	(Default value) The background position of the image is relative to the padding box
border-box	The background position of the image is relative to the border box
content-box	The background position of the image is relative to the content box

1

2

3

4

5

6

.card {

background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/tajmahal-c1-img.png");

height: 100vh;

background-position: right;

background-origin: padding-box;

}

 

CSS

Background Clip

The CSS

background-clip

property specifies how far the background should extend within an HTML element.

Some of the values of the CSS

background-clip

property are:

Value	Description
border-box	(Default value) The background extends behind the border
padding-box	The background extends to the inside edge of the border
content-box	The background extends to the edge of the content box

1

2

3

4

5

.card {

background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/tajmahal-c1-img.png");

height: 100vh;

background-clip: content-box;

}

 

CSS

Background Attachment

The CSS

background-attachment

property specifies the behaviour of the background image when the page is scrolled.

Values of the CSS

background-attachment

property are:

Value	Description
scroll	background image scrolls along with the HTML element.
fixed	background image doesn't scroll with the HTML element. It will be fixed with the viewport.

1

2

3

4

5

.card {

background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/tajmahal-c1-img.png");

height: 100vh;

background-attachment: fixed;

}

 

CSS

Background Color

The CSS

background-color

property specifies the background color of an HTML element.

1

2

3

4

.card {

background-color: skyblue;

height: 100vh;

}

CSS

Background

The CSS

background

property sets all background style properties at once, such as color, image, origin and size, or repeat method.

It is a shorthand property for the below CSS properties:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

1

2

3

4

.card {

background: lightblue url("IMAGE_URL") no-repeat fixed center;

height: 100vh;

}

CSS

15. What is the CSS direction property?

The CSS

direction

property sets the direction of text, table columns, and horizontal overflow in an HTML block-level element.

Some of the values of CSS

direction

property are:

Value	Description
ltr	(Default value) Text and other elements go from left to right
rtl	Text and other elements go from right to left

Example:

1

2

3

.card {

direction: rtl;

}

CSS

16. How to align the last line of a text?

The CSS

text-align-last

property specifies the horizontal alignment of the last line of a text in an HTML element.

Value	Description
center	Aligns the last line of a text to the center
left	Aligns the last line of a text to the left
right	Aligns the last line of a text to the right

Example:

1

2

3

.h-last-center {

text-align-last: center;

}

CSS

17. How to add inner shadows to an HTML element?

The CSS

box-shadow

property adds shadow to an HTML element.

By default, the shadow is a drop shadow (shadow seems raised above the content).

To add an inner shadow, we need to specify the

inset

keyword along with the other values like

h-offset

,

v-offset

, etc.

Example:

1

2

3

.container {

box-shadow: inset 0 0 10px #000000;

}

CSS

18. What are CSS custom properties?

A CSS custom property is most commonly thought of as a variable in CSS.

It is set using a custom property notation (e.g.

--main-color: black;

) and are accessed using the

var()

function (e.g.

color: var(--main-color);

).

1

2

3

4

5

.card {

--spacing: 2px;

padding: var(--spacing);

margin-bottom: var(--spacing);

}

CSS

Note

If the custom property has to be accessed through the entire HTML document, declare it inside the

:root

pseudo-class.

1

2

3

4

5

6

7

8

:root {

--main-bg-color: brown;

}

.card-1 {

color: white;

background-color: var(--main-bg-color);

}

CSS

19. What is the CSS display property with the value inline-flex?

It is similar to the CSS

display

property with the value

flex

.

Both convert the HTML element to a flex container. But the value

inline-flex

also converts the element (flex container) to an inline element.

Example:

1

2

3

.box {

display: inline-flex;

}

CSS

Here the flex container doesn't start on a new line and takes only the content width.