All about CSS3 for Absolute Beginners: Part 5
Hello everyone, and welcome back to the blog! So far, we've covered half of the CSS position properties, and today we'll explore the remaining ones. Before proceeding, make sure you have a solid understanding of relative and absolute positioning to avoid feeling overwhelmed. As always, practice is key!
Position Properties in CSS
Position: fixed in CSS
By default, when you scroll a webpage, elements move out of view. Let's test this by creating two div boxes and adding dummy text inside a paragraph tag. If you're using VS Code, type lorem200 and press Tab to generate 200 words of placeholder text. Add more until you get a scrollable page. You'll notice that the boxes remain in place while you scroll down.
However, you've probably seen websites where elements, like headers, stay fixed while you scroll. This effect is achieved using the fixed position. Try adding position: fixed to your existing boxes and observe how they behave when scrolling.
Position: Sticky in CSS
The sticky position allows an element to remain in place until a specified position is reached. For example, if an element is set to stick when it reaches 0px from the top, it will stay in place as you scroll down. When you scroll back up past that point, the element will return to its normal position in the document flow.
Here’s a quick example:
.box {
width: 300px;
background-color: red;
padding: 20px;
position: sticky;
top: 0;
}
Create a long scrollable page with at least 1000 words to see how the sticky property behaves.
Pseudo Classes in CSS
We've already discussed the :hover pseudo-class, which is straightforward and applies styles when an element is hovered over. You can revisit the previous blog post for examples.
:focus Pseudo-Classes
The :focus pseudo-class applies styles when a user clicks or focuses on an element. For example, an input field can change its border color when selected:
input:focus {
border: 2px solid orange;
}
You can use :focus with various elements such as input fields, text areas, and links.
::before and ::after Pseudo-Elements
These pseudo-elements allow you to insert content before or after an element's actual content.
For instance, suppose you want to add a checkmark emoji after the text inside a button:
.button::after {
content: " ✅";
}
This will display as: Click to check ✅. Similarly, the ::before pseudo-element can be used to insert content before the element.
Parent and Child Relationships in HTML and CSS
In HTML, elements within a container follow a parent-child relationship. Consider the following example:
<div class="container">
<div class="box">
<p class="text"></p>
</div>
</div>
Here, the container is the parent, the box is its child, and the text is the grandchild. The paragraph element has two ancestors. This hierarchical concept is essential to understand, especially when styling elements with CSS.
:nth-child(n) Pseudo-Class
The :nth-child() pseudo-class helps in targeting specific elements within a parent, such as list items or table rows.
For example, if a table has multiple headings and you want every even column to have a blue color, you can use:
th:nth-child(even) {
color: blue;
}
This will apply the color to the 2nd and 4th columns. You can also:
Use odd to target odd-numbered elements.
Specify a particular child, e.g., nth-child(4) for the fourth element.
Use patterns like 5n + 1 to apply styles to every 5th element.
Try experimenting with it in tables, lists, and other elements.
:checked Pseudo-Class
The :checked pseudo-class applies styles to checkboxes or radio buttons when they are selected. Here's how to use it:
input[type="radio"]:checked {
border: 2px solid green;
}
This rule applies to all radio inputs. If you want to target specific elements, assign them a class or ID.
Exploring More Pseudo-Classes
We've covered some of the most commonly used pseudo-classes, but there are many more available. You can explore them in detail on the MDN Web Docs: