All about CSS3 for Absolute Beginners: Part 10
Hello everyone, and welcome back to the blog! Let's continue exploring CSS with one of the last concepts before diving into JavaScript.
Media Queries in CSS
Media queries help us adjust our website's layout for different screen sizes. You might remember relative units, which allow us to set dimensions using percentages or viewport height and width. These units help create responsive designs that adapt well to various devices.
Similarly, media queries allow us to conditionally adjust styles based on screen size. For example, let's say we want to apply specific styles when the screen width is less than 768 pixels. Here's how we can do it:
@media (max-width: 1000px) {
.container {
background-color: red;
}
}
In the parentheses, we define the condition. As long as it holds true, the styles inside will take effect.
To test this, resize your browser window and observe how the styles change when the width reaches the defined threshold.
If you want to target larger screens instead, you can use the min-width property:
@media (min-width: 1280px) {
.container {
background-color: blue;
}
}
With min-width: 1280px, the styles inside will apply when the screen width is 1280 pixels or more.
Specificity in CSS
As your CSS file grows, you'll likely find that multiple styles are applied to the same element. CSS specificity determines which styles take precedence. Consider the following example:
section {
color: pink;
}
.text {
color: blue;
}
#paragraph {
color: red;
}
If we have the following HTML:
<p class="text" id="paragraph">Lorem ipsum dolor sit amet</p>
The final color applied to the paragraph will be red, because ID selectors (#paragraph) have higher specificity. Here's a breakdown of CSS specificity levels:
ID selectors (#) = 100 specificity
Class selectors (.) = 10 specificity
Element selectors (tag) = 1 specificity
If we remove the ID selector, the class selector will take precedence over the element selector, applying the blue color instead.
The !important Keyword
The !important keyword overrides CSS specificity and ensures a style is applied regardless of specificity rules. For example:
section {
color: pink !important;
}
.text {
color: blue;
}
#paragraph {
color: red;
}
Even though the ID selector has the highest specificity, the paragraph will appear pink due to the !important rule.
Inline and Internal CSS
There are multiple ways to apply CSS:
1. Inline CSS: Styles are applied directly to an HTML element using the style attribute:
<p style="background-color: orange">Lorem ipsum dolor sit amet</p>
Inline styles have the highest specificity (1000), but they should be avoided in large projects as they can lead to maintenance issues.
2. Internal CSS: Defined within a <style> tag inside the HTML file:
<style>
p {
background-color: orange;
}
</style>
Internal styles have higher specificity than external styles but lower than inline styles.
The Transform Property in CSS
The transform property allows us to manipulate elements by moving, rotating, scaling, or skewing them. Some of the most commonly used transform functions include:
Translate
The translate function moves an element along the x and y axes:
.container {
width: 300px;
border: 2px solid black;
background-color: blue;
transform: translate(20px, 30px);
}
translate(20px, 30px) moves the element 20px to the right and 30px down.
Negative values move elements left or upwards.
You can also use translateX() or translateY() to move elements along a single axis.
Rotate
The rotate function rotates an element by a specified angle:
.container {
transform: rotate(45deg);
}
A positive value rotates the element clockwise, while negative values rotate counterclockwise. You can rotate elements along specific axes using rotateX(), rotateY(), or rotateZ().
Scale
Scaling increases or decreases the size of an element:
.container {
transform: scale(2);
}
A value of 2 doubles the element's size.
You can adjust width and height separately using scaleX() and scaleY().
Negative values flip the element.
Wrapping Up
We have covered intermediate CSS concepts and are now entering advanced topics. While these may seem challenging, consistent practice will make them easier over time.
If you have any questions or need help, feel free to leave a comment or reach out via the contact page. I'll be happy to assist!