10 minute read

Exploring Possibilities with CSS: A Comprehensive Guide to Advanced CSS Coding

Exploring Advance CSS Coding

HTML give the structure to any website, it is like bone strucutre of the body. But the CSS makes it colorful, give some life imitation ability and make it beautiful, it is like flesh and skin on the bone which makes body alive and beautiful. This tutorial should give you a solid foundation in advanced CSS techniques. Keep practicing, with AI driven coding tools you need not memorize the syntext but you should understand what is possible so that you can imagine how you can use it for you project.

Let’s build a explore some advance CSS code in this post. We’ll create a responsive card layout with hover effects, animations, and pseudo-elements. This will help you understand how to combine advanced CSS concepts into a real-world project.

Resources to Practice Online
Instead of reading, you can copy paste this code and play around with it using following resources.

Let’s Explore Some CSS Syntext

1. Attribute Selectors

You already know [attr^=value] (starts with) and :not(). Here are more attribute selectors:

  • [attr$=value]: Selects elements where the attribute ends with a specific value. 
    a[href$=".pdf"] {
  color: red;
}

    This targets all <a> tags with an href ending in .pdf.

  • [attr*=value]: Selects elements where the attribute contains a specific value. 
    img[src*="logo"] {
  border: 2px solid blue;
}

    This targets all <img> tags with src containing the word “logo”.

  • [attr~=value]: Selects elements where the attribute contains a specific word (space-separated). 
    div[class~="featured"] {
  background-color: yellow;
}

    This targets <div> elements with a class that includes the word “featured”.

2. Combining Selectors

You can combine selectors for more specific targeting:

  • Descendant Selector: A B 
    article p {
  font-size: 1.2rem;
}

    This targets all <p> elements inside <article>.

  • Child Selector: A > B 
    ul > li {
  list-style-type: square;
}

    This targets only <li> elements that are direct children of <ul>.

  • Adjacent Sibling Selector: A + B 
    h2 + p {
  margin-top: 0;
}

    This targets the <p> element immediately following an <h2>.

  • General Sibling Selector: A ~ B 
    h2 ~ p {
  color: gray;
}

    This targets all <p> elements that are siblings of an <h2>.

3. Pseudo-Classes

Pseudo-classes allow you to style elements based on their state or position.

  • :nth-child(n): Selects elements based on their position. 
    li:nth-child(odd) {
  background-color: #f0f0f0;
}

    This targets every odd <li> element.

  • :first-child and :last-child: Select the first or last child. 
    p:first-child {
  font-weight: bold;
}
  • :hover, :focus, :active: Style elements based on user interaction. 
    button:hover {
  background-color: #007bff;
}
  • :checked: Style checked checkboxes or radio buttons. 
    input[type="checkbox"]:checked {
  border-color: green;
}

4. Pseudo-Elements

Pseudo-elements let you style specific parts of an element.

  • ::before and ::after: Insert content before or after an element. 
    blockquote::before {
  content: "“";
  font-size: 2em;
  color: #ccc;
}
  • ::first-line and ::first-letter: Style the first line or letter of text. 
    p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

5. Advanced Example

Let’s combine some of these concepts into a practical example:

/* Target all iframes with IDs starting with "dsq-" but exclude those with a specific src */
iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  border: 2px solid red;
}

/* Style links ending with ".pdf" and add an icon */
a[href$=".pdf"]::after {
  content: " 📄";
  font-size: 0.8em;
}

/* Style every third list item in a list */
ul > li:nth-child(3n) {
  background-color: #f9f9f9;
}

/* Add a hover effect to buttons */
button:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

Practice 1: Responsive Card Layout with Advanced CSS

What We’ll Build

  • A grid of cards with hover effects.
  • Each card will have a title, description, and a button.
  • We’ll use pseudo-elements (::before and ::after) for decorative effects.
  • The layout will be responsive using CSS Grid and Flexbox.
  • We’ll add smooth transitions and animations.

Step 1: HTML Structure

Here’s the basic HTML structure for our card layout:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced CSS Card Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card-container">
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Card 1</h2>
        <p class="card-description">This is a description for card 1. It has some cool hover effects!</p>
        <a href="#" class="card-button">Learn More</a>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Card 2</h2>
        <p class="card-description">This is a description for card 2. It has some cool hover effects!</p>
        <a href="#" class="card-button">Learn More</a>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <h2 class="card-title">Card 3</h2>
        <p class="card-description">This is a description for card 3. It has some cool hover effects!</p>
        <a href="#" class="card-button">Learn More</a>
      </div>
    </div>
  </div>
</body>
</html>

Step 2: Basic CSS Setup

Let’s start with some basic styles for the layout and cards.

/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

/* Card Container */
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Individual Card */
.card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Card Content */
.card-content {
  padding: 20px;
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card-description {
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
}

.card-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.card-button:hover {
  background-color: #0056b3;
}

Step 3: Advanced CSS Techniques

Now, let’s add some advanced features to make the cards more interactive and visually appealing.

1. Pseudo-Elements for Decorative Effects

We’ll use ::before and ::after to add decorative elements to the card.

.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #007bff, #00ff88);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.card:hover::before {
  opacity: 0.8;
}

.card-content {
  position: relative;
  z-index: 2;
}

2. Animations on Hover

Let’s add a subtle animation to the card title when hovered.

.card-title {
  transition: transform 0.3s ease;
}

.card:hover .card-title {
  transform: scale(1.1);
}

3. Responsive Design

The grid layout is already responsive, but let’s add some adjustments for smaller screens.

@media (max-width: 600px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

Step 4: Final Touches

Let’s add a smooth fade-in animation when the page loads.

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.card:nth-child(1) {
  animation-delay: 0.1s;
}

.card:nth-child(2) {
  animation-delay: 0.2s;
}

.card:nth-child(3) {
  animation-delay: 0.3s;
}

Final Output

Here’s what you’ll achieve:

  1. A responsive grid of cards.
  2. Hover effects with smooth transitions.
  3. Decorative pseudo-elements.
  4. Animations for a polished look.

Full CSS Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #007bff, #00ff88);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.card:hover::before {
  opacity: 0.8;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-content {
  padding: 20px;
  position: relative;
  z-index: 2;
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.card:hover .card-title {
  transform: scale(1.1);
}

.card-description {
  font-size: 1rem;
  color: #666;
  margin-bottom: 20px;
}

.card-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.card-button:hover {
  background-color: #0056b3;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.card:nth-child(1) {
  animation-delay: 0.1s;
}

.card:nth-child(2) {
  animation-delay: 0.2s;
}

.card:nth-child(3) {
  animation-delay: 0.3s;
}

@media (max-width: 600px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

Practice 2: Advanced CSS Techniques

What We’ll Build

  1. A custom-styled iframe container with hover effects.
  2. Use of pseudo-elements (::before and ::after) for decorative overlays.
  3. Animations for smooth transitions.
  4. Responsive design to ensure it works on all devices.
  5. Advanced selectors to target specific elements.

Step 1: HTML Structure

Let’s start with a simple HTML structure that includes iframes and some additional content.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced CSS Tutorial</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="iframe-container">
    <iframe id="dsq-1" src="https://example.com/embed/1"></iframe>
    <iframe id="dsq-2" src="https://dasarpai.com/embed/comments/?base=default"></iframe>
    <iframe id="dsq-3" src="https://example.com/embed/3"></iframe>
  </div>
</body>
</html>

Step 2: Basic CSS Setup

Let’s style the iframe container and apply the advanced selector from the earlier example.

/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

/* Iframe Container */
.iframe-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Advanced Selector: Target iframes with IDs starting with "dsq-" but exclude specific src */
iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  width: 100%;
  height: 200px;
  border: 2px solid #007bff;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]):hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Step 3: Add Pseudo-Elements

Let’s use ::before and ::after to add decorative overlays to the iframes.

/* Add a decorative overlay using ::before */
iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  position: relative;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::before {
  content: "Custom Embed";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 123, 255, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]):hover::before {
  opacity: 1;
}

Step 4: Add Animations

Let’s add a fade-in animation when the page loads.

/* Keyframes for fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to iframes */
iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

/* Delay animations for each iframe */
iframe:nth-child(1) {
  animation-delay: 0.1s;
}

iframe:nth-child(2) {
  animation-delay: 0.2s;
}

iframe:nth-child(3) {
  animation-delay: 0.3s;
}

Step 5: Responsive Design

Ensure the layout looks great on all devices.

@media (max-width: 600px) {
  .iframe-container {
    grid-template-columns: 1fr;
  }

  iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
    height: 150px;
  }
}

Step 6: Add More Advanced Concepts

Let’s add some additional features to make the tutorial even more comprehensive.

1. Custom Scrollbar for Iframes

Style the scrollbar inside the iframes.

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  scrollbar-width: thin;
  scrollbar-color: #007bff #f4f4f4;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::-webkit-scrollbar {
  width: 8px;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 4px;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::-webkit-scrollbar-track {
  background-color: #f4f4f4;
}

2. Gradient Border

Add a gradient border to the iframes.

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  border: 2px solid transparent;
  background: linear-gradient(45deg, #007bff, #00ff88) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

Final Output

Here’s what you’ll achieve:

  1. A responsive grid of iframes with custom styles.
  2. Hover effects with smooth transitions and decorative overlays.
  3. Animations for a polished look.
  4. Advanced features like custom scrollbars and gradient borders.

Full CSS Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

.iframe-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  width: 100%;
  height: 200px;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  background: linear-gradient(45deg, #007bff, #00ff88) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  scrollbar-width: thin;
  scrollbar-color: #007bff #f4f4f4;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::-webkit-scrollbar {
  width: 8px;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 4px;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::-webkit-scrollbar-track {
  background-color: #f4f4f4;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]):hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="])::before {
  content: "Custom Embed";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 123, 255, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]):hover::before {
  opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

iframe:nth-child(1) {
  animation-delay: 0.1s;
}

iframe:nth-child(2) {
  animation-delay: 0.2s;
}

iframe:nth-child(3) {
  animation-delay: 0.3s;
}

@media (max-width: 600px) {
  .iframe-container {
    grid-template-columns: 1fr;
  }

  iframe[id^="dsq-"]:not([src^="https://dasarpai.com/embed/comments/?base="]) {
    height: 150px;
  }
}

Updated:

Categories:

Tags:

About the Author

Author avatar

Dr. Hari Thapliyal is a prolific blogger and seasoned professional with an extensive background in Data Science, Project Management, and Advait-Vedanta Philosophy. He holds a Doctorate in AI/NLP from SSBM, Geneva, along with Master’s degrees in Computers, Business Management, Data Science, and Economics. With over three decades of experience in management and leadership, Hari has extensive expertise in training, consulting, and coaching within the technology sector. His specializations include Data Science, AI, Computer Vision, NLP, and machine learning. Hari is also passionate about meditation and nature, often retreating to secluded places for reflection and peace.

Leave a comment

You may also enjoy