CSS Layout, Positioning, Overflow, and Sprites: Key Concepts for Web Design

What is Normal Flow in web design?

The order in which elements appear on a web page, rendered line by line.

What does the CSS float property do?

It allows elements to be positioned to the left or right, making text wrap around them.

What are the possible values for the float property?

left, right, and width.

What is the purpose of the clear property?

It stops elements from wrapping around floated elements.

What does overflow: visible mean?

Content that is too large will overflow outside the allocated area.

What does overflow: hidden do?

It clips large content to fit within the allocated space.

What does overflow: auto mean?

Content fills the area, and scroll bars appear if needed.

What does overflow: scroll do?

Scroll bars are always shown to display the content.

What is box-sizing in CSS?

It includes padding and border in an element's total width and height.

How is width calculated without box-sizing?

Width = content width + padding + border.

Why do developers use box-sizing?

To avoid needing to subtract padding and borders from width.

What happens when you set width without box-sizing?

The element may appear larger than intended.

What is a nested element?

An element contained within another element.

How do you clear a float using a class?

Use a class with clear: left, right, or both.

What is the effect of clear: left?

It makes the next element appear below any floated elements on the left.

What is the effect of clear: right?

It makes the next element appear below any floated elements on the right.

What is the effect of clear: both?

It clears floats on both sides, allowing the next element to start below.

What does 'box-sizing: border-box;' do?

Includes padding and border in the element's width and height.

What is 'content-box' in box-sizing?

Default setting; only content's width and height are included.

What is a basic two-column layout in CSS?

Created using the float property.

What does 'display: none;' do?

The element is not displayed at all.

What does 'display: block;' do?

Makes an element behave like a block element.

What does 'display: inline;' do?

Makes an element behave like an inline element.

How to create horizontal navigation with an unordered list?

Use display property to make list items inline.

What is a pseudo-class?

A way to style an element based on its state.

:link pseudo-class

Styles a hyperlink that has not been visited.

:visited pseudo-class

Styles a hyperlink that has been visited.

:hover pseudo-class

Styles a hyperlink when the mouse is over it.

:active pseudo-class

Styles a hyperlink when it is being clicked.

What does 'position: static;' mean?

Default position; elements follow normal document flow.

What does 'position: fixed;' do?

Keeps the element in the same place on the screen.

What does 'position: absolute;' do?

Positions the element relative to its nearest positioned ancestor.

What does 'position: relative;' do?

Positions the element relative to its normal position.

What is 'position: sticky;'?

Keeps the element in place until a certain scroll position.

What is a CSS sprite?

An image file that contains multiple small graphics.

What is the advantage of using CSS sprites?

Saves download time by reducing HTTP requests.

How to use a sprite image in CSS?

Use background-image, background-repeat, and background-position.