Lorem ipsum dolor sit amet consectetur adipisicing
elit. Hic odit rem dolorum molestiae fugit deserunt exercitationem
recusandae, itaque ratione harum sit repellat dolor temporibus deleniti
non voluptatem nostrum quas? Cumque veniam, molestias id natus pariatur
dolores aut nemo iure facilis expedita,
temporibus exercitationem ullam ex officiis reiciendis quaerat enim consequuntur.
advanced CSS topics
here are the structured upcoming
chapters to cover essential advanced concepts with practical examples.
CSS Animations and Transitions
up coming
CSS Responsive Design Techniques
up coming
CSS Performance Optimization
up coming
CSS Syntax and Selectors
:nth-of-type(n) Selector
Targets elements of a specific type within a parent.
Example:
/*CSS CODE */
p:nth-of-type(2) {
color: blue;
}
* The second <p> inside the same parent is colored blue.
The :not() Selector
Excludes elements from being selected.
Example:
/*CSS CODE */
p:not(.special) {
color: red;
}
<!-- html code -->
<p>This paragraph is red.</p>
<p class="special">This paragraph is NOT red.</p>
Any <p> without class special turns red.
The :has() Selector (CSS4 - Experimental)
The :has() pseudo-class allows you to select elements that contain specific
child elements.
Example:
CSS CODE
div:has(img) {
border: 2px solid green;
}
HTML CODE
<div>
<img src="image.jpg" alt="Inside div">
</div>
<div>No image here.</div>
* Only <div> containing an <img> gets a green border.
Conclusion
Mastering advanced CSS selectors and combinators will help you target elements
more precisely, making your stylesheets more efficient. Attribute selectors,
combinators, and pseudo-classes allow you to writecleaner and more powerful CSS
rules.
In today’s world, people browse websites on different screen sizes—from
desktops and tablets to smartphones and even smart TVs. If a website isnot
responsive, it may look great on a laptop but appear broken or unreadable on a
phone.
Responsive Design ensures that a webpage adapts to different screen sizes
without breaking. This is achieved using:
* Fluid layouts (flexible widths instead of fixed pixels)
* Flexible images (images that resize automatically)
* CSS Media Queries (to apply styles based on screen size)
What Are CSS Media Queries?
Media queries allow you to apply different styles depending on the width,
height, orientation, or type of device.
Basic Syntax
@media (max-width: 768px) {
body { background-color: lightblue; }
}
How it works:
* If the screen width is 768px or smaller, the background color changes to
light blue.
* If the screen is larger than 768px, the default styles apply.
3. Breakpoints in CSS Media Queries
Breakpoints are specific screen widths where your website’s layout changes to
ensure a good user experience.
Here are some commonly used breakpoints:
Example: in the example bellow Only the text input field will have a blue border.
/* Extra small devices (phones) */
@media (max-width: 480px) {
body {
background-color: yellow;
}
}
/* Small devices (tablets) */
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
/* Medium devices (laptops) */
@media (max-width: 1024px) {
body { background-color: lightgreen;
}
}
/* Large devices (desktops) */
@media (max-width: 1200px) {
body {
background-color:orange;
}
}
How it works:
* If the screen is 480px or smaller, the background is yellow.
* If the screen is between 481px and 768px, it turns light blue.
* If the screen is between 769px and 1024px, it turns light green.
* If the screen is larger than 1024px, it turns orange.
These breakpoints help create a smooth transition for different devices.
4. Media Queries for Specific Devices
You can also target specific devices using media queries.
Example: Targeting a Portrait vs. Landscape Screen
* If the user holds their phone vertically (portrait mode) → background is
pink.
* If they turn it horizontally (landscape mode) → background is sky blue.
5. Combining Multiple Conditions in Media Queries
Sometimes, you want to apply styles only if multiple conditions are met.
Example: Targeting screens between 600px and 1200px
@media (min-width: 600px) and (max-width: 1200px) {
body { font-size: 18px; }
}
How it works:
* The font size will increase to 18px only if the screen width is between
600px and 1200px.
6. Responsive Images Using Media Queries
Images should resize automatically to prevent them from breaking the layout.
Example: Making an Image Fully Responsive
img {
max-width: 100%;
height: auto;
}
How it works:
* max-width: 100% ensures the image never becomes wider than its container.
* height: auto maintains the original aspect ratio while resizing.
Using Media Queries for Navigation Menus
On mobile devices, large navigation menus can take up too much space. You can
use media queries tohide the menu on small screens and replace it with a
hamburger icon.
Example: Responsive Navigation Menu
<!DOCTYPE html>
<html>
<head>
<title>Title of thePage</title>
<style>
/* Hide menu on small screens */
@media (max-width: 768px) {
nav ul {
display: none;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="menu-icon">☰</div>
</nav>
</body>
</html>
Output:(switch to desktop view to see what will happen)Title of thePage
TESTIMONIES
vildash network team has had alot of impact on others but here are the vildash network team testimonies and expirience while working with the team
Events
you can now connect and text other users from our database. you just neeed to click bellow to message them
connect with programmers
you can ask for help form them and also you can solve problems with them.
you can send and recieve messagies. you can send emojies, images, and you can also chat privately with a memeber and you can see when a member is online or offline
