An element with float: right; will move to the right of its containing element. This property is often used for creating layouts where elements are floated to the right or left, allowing text and other content to flow around them.

To remove the default bullet points and apply a custom image as the bullet for list items in an unordered list, you should use the list-style-image property and specify the URL of the image you want to use as the bullet.

The value for the animation-direction property determines how animations behave after they complete. To run animations in reverse order after completion, you should set animation-direction to reverse. This will play the animation backward.

To define a custom property (or variable) in CSS, you use the format --variable: value;. Custom properties start with a double hyphen (--) and are followed by the property name, a colon, and the value. These custom properties can then be used to store and reuse values throughout your stylesheet.

To define a container as a grid layout, you should use the display: grid; CSS property. This property tells the browser to treat the specified container as a grid, enabling you to create grid-based layouts within it.

To display list items side by side in a navigation menu, you should use the display: flex; property on the parent container of the list. This allows for a horizontal layout of the list items.

To make flex items stack vertically in a Flexbox container, you set flex-direction to column. This means the items will be arranged one below the other, creating a vertical stack.

For an element with position: sticky; to work, the parent container must have a defined overflow property (e.g., overflow: auto;). This allows the element to stick within the scrolling container when it reaches a certain point, behaving as if it's "stuck" to the viewport.

SMACSS categorizes its styles by specificity. In SMACSS, styles are organized into five categories: Base, Layout, Module, State, and Theme. This categorization helps in creating a scalable and maintainable CSS architecture by defining how styles should be applied and structured.

To make a box 10% of the viewport width, you should use the 'vw' (viewport width) unit. The 'vw' unit is based on the width of the viewport, making it ideal for responsive design. It ensures the box is always a percentage of the viewport's width, regardless of the screen size.

The "overflow" property in CSS is used to specify how overflows should be handled when content overflows its block container. It can take values like "visible," "hidden," "scroll," and "auto" to control the display of content that overflows its container.

To separate styles that apply to layout from those that apply to modules, you should consider the ITCSS (Inverted Triangle CSS) methodology. ITCSS offers a scalable and logical structure for your stylesheets, with layers that guide you in distinguishing between core layout styles and module-specific styles, promoting maintainability and organization.