Media queries are a way to apply CSS rules based on the characteristics of the device the site is being displayed on. For example, you can use media queries to apply different styles for small screens, large screens, or even for printing.
The most common media queries are min-width and max-width. You can also use orientation to apply styles based on the orientation of the device (portrait or landscape).
@media (max-width: 600px) {
/* styles here */
}
@media (orientation: landscape) {
/* styles here */
}
For accessibility, you can also use prefers-color-scheme to apply a light or dark theme based on the user's preferences, and prefers-reduced-motion to reduce animations for users who prefer less motion.
@media (prefers-color-scheme: dark) {
/* styles for dark mode */
}
@media (prefers-reduced-motion: reduce) {
/* styles for reduced motion, e.g. turning off animations */
}
You can combine media queries to create more complex rules. For example, you can apply styles for screens under 600px wide in landscape orientation:
@media (max-width: 600px) and (orientation: landscape) {
/* styles here */
}
Psuedo-elements
Like pseudo-classes, pseudo-elements are used to style specific parts of an element. They are denoted by a double colon (::) instead of a single colon (:).
Some common pseudo-elements include:
::before - inserts content before the element
::after - inserts content after the element
::first-line - styles the first line of text
::first-letter - styles the first letter of text
And for form inputs:
::placeholder - styles the placeholder text in an input field
Here's an example of using ::first-letter to create a drop cap effect:
This paragraph demonstrates the drop cap effect using the ::first-letter pseudo-element. Notice how the first letter is larger and uses a fancy font. Blah blah blah some more text here.
Nesting is a modern feature that allows you to write easier to read, more modular, and more maintainable CSS. As you are not constantly repeating selectors, the file size can also be reduced.
For example, you can style both a <ul> and its <li> children like this:
ul {
list-style-type: none;
li {
padding: 10px;
}
}
Be careful not to overuse it, as it can lead to overly specific selectors and make your CSS harder to override.
Variables
Variables are a way to store and reuse values in your CSS. They can be used to store colors, font sizes, margins, and more. This can make your CSS more maintainable and easier to update.
The :root selector is used to define global variables that can be accessed anywhere in your CSS. You can also define variables within a specific selector:
CSS functions allow you to perform calculations, manipulate colors, and more. Some common functions include calc(), rgb(), rgba(), hsl(), hsla(), and var().
For example, you can use the calc() function to perform calculations:
.container {
width: calc(100% - 20px);
}
Or use the rgba() function to specify a color with an alpha channel:
CSS filters allow you to apply visual effects to elements, such as blurring, color shifting, and more. Some common filters include blur(), brightness(), contrast(), grayscale(), invert(), opacity(), saturate(), and sepia().
For example, you can use the blur() filter to create a blurred effect:
.image {
filter: blur(5px);
}
Or use the grayscale() filter to create a grayscale effect:
.image {
filter: grayscale(100%);
}
Here's an image with both of those applied:
Transformations
Transformations allow you to modify the appearance of an element. Some common transformations include rotate(), scale(), skew(), and translate().
.box {
transform: rotate(-15deg) skew(10deg);
}
Less common transformations include rotateX(), rotateY(), and rotateZ() for rotating around specific axes; matrix() and matrix3d() for more complex transformations; and perspective() for creating a 3D perspective effect.
Transitions
Transitions allow you to animate changes in CSS properties. You can specify the duration, timing function, delay, and more. Some common properties to transition include color, background-color, opacity, transform, and more.
The rule of thumb is that the browser can animate properties that are numbers, colors, or lengths (basically anything that can be interpolated). If you try to animate a property that can't be interpolated, the browser will not animate it.
Notice that the transition property is applied to the base state, and the change in the hover state triggers the transition. This creates a smooth animation effect when the background color changes.
You can also use the transition property to animate multiple properties at once. Just separate them with a comma like transition: background-color 0.3s ease, color 0.3s ease;
Animations
Animations allow you to create more complex and dynamic effects in CSS. You can define keyframes to specify the animation's behavior, such as the starting and ending states, and the timing of the animation.
Here's an example of a simple animation that moves an element from left to right:
The @keyframes rule defines the animation behavior, and the animation property applies the animation to that specific element.
For readability, you can also write from and to instead of 0% and 100%:
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
Animations can be used to create a wide variety of effects, from simple transitions to complex interactive experiences. They can be combined with other CSS properties like transforms, transitions, and filters to create visually stunning effects.
Transitions vs Animations
Transitions and animations are both used to create motion effects in CSS, but they have different use cases:
Transitions are best for simple effects like hover states or smooth property changes. They require a user interaction to trigger the animation (like :hover). They are easier to set up and require less code.
Animations are better for complex effects that involve multiple keyframes and more advanced timing functions. They offer more control and flexibility but require more code to set up.
