CSS Pseudo-Classes

Pseudo-classes are used to define the special states of elements, such as when a user interacts with them (e.g., hovering over or clicking).

Common pseudo-classes include:

Example:

button:hover { background-color: #333; color: white; }

In this example, the button changes color when hovered over.

CSS Pseudo-Elements

Pseudo-elements let you style specific parts of an element. The most common pseudo-elements are:

Example:

p::before { content: “Note: “; font-weight: bold; }

This adds “Note: ” before every paragraph element.

2. Hex Codes

The opacity property controls the transparency of an element. A value of 1 is fully opaque, while 0 is fully transparent.

Example:

img { opacity: 0.5; }

This makes the image 50% transparent.

3. RGB Values

With CSS, you can create visually appealing image galleries that respond well to different screen sizes.

Example:

.gallery { display: flex; flex-wrap: wrap; } .gallery img { margin: 5px; width: calc(33.333% – 10px); }

This makes an image gallery where each image is one-third of the container’s width.

Image sprites allow you to combine multiple images into a single image file to reduce the number of requests made by the browser.

Example:

.sprite { background-image: url(‘sprite.png’); background-position: 0 0; width: 50px; height: 50px; }

You can use different background-position values to display different parts of the sprite image.