↓Skip to main content
dasarpAI Exploring AI with Consciousness
  1. Data Science Blog/

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

·2099 words·10 mins· loading · ·
Web Development Programming Software Development Frontend Development Web Development Web Design

On This Page

Table of Contents
Share with :

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;
  }
}
Dr. Hari Thapliyaal's avatar
Follow Me

Dr. Hari Thapliyaal

Dr. Hari Thapliyal is a seasoned professional and prolific blogger with a multifaceted background that spans the realms of Data Science, Project Management, and Advait-Vedanta Philosophy. Holding a Doctorate in AI/NLP from SSBM (Geneva, Switzerland), Hari has earned Master's degrees in Computers, Business Management, Data Science, and Economics, reflecting his dedication to continuous learning and a diverse skill set. With over three decades of experience in management and leadership, Hari has proven expertise in training, consulting, and coaching within the technology sector. His extensive 16+ years in all phases of software product development are complemented by a decade-long focus on course design, training, coaching, and consulting in Project Management. In the dynamic field of Data Science, Hari stands out with more than three years of hands-on experience in software development, training course development, training, and mentoring professionals. His areas of specialization include Data Science, AI, Computer Vision, NLP, complex machine learning algorithms, statistical modeling, pattern identification, and extraction of valuable insights. Hari's professional journey showcases his diverse experience in planning and executing multiple types of projects. He excels in driving stakeholders to identify and resolve business problems, consistently delivering excellent results. Beyond the professional sphere, Hari finds solace in long meditation, often seeking secluded places or immersing himself in the embrace of nature.

Comments:

Share with :

Related

Roadmap to Reality
·990 words·5 mins· loading
Philosophy & Cognitive Science Interdisciplinary Topics Scientific Journey Self-Discovery Personal Growth Cosmic Perspective Human Evolution Technology Biology Neuroscience
Roadmap to Reality # A Scientific Journey to Know the Universe — and the Self # 🌱 Introduction: The …
From Being Hacked to Being Reborn: How I Rebuilt My LinkedIn Identity in 48 Hours
·893 words·5 mins· loading
Personal Branding Cybersecurity Technology Trends & Future Personal Branding LinkedIn Profile Professional Identity Cybersecurity Online Presence Digital Identity Online Branding
💔 From Being Hacked to Being Reborn: How I Rebuilt My LinkedIn Identity in 48 Hours # “In …
Exploring CSS Frameworks - A Collection of Lightweight, Responsive, and Themeable Alternatives
·1378 words·7 mins· loading
Web Development Frontend Development Design Systems CSS Frameworks Lightweight CSS Responsive CSS Themeable CSS CSS Utilities Utility-First CSS
Exploring CSS Frameworks # There are many CSS frameworks and approaches you can use besides …
Dimensions of Software Architecture: Balancing Concerns
·873 words·5 mins· loading
Software Architecture Software Architecture Technical Debt Maintainability Scalability Performance
Dimensions of Software Architecture # Call these “Architectural Concern Categories” or …
Understanding `async`, `await`, and Concurrency in Python
·616 words·3 mins· loading
Python Asyncio Concurrency Synchronous Programming Asynchronous Programming
Understanding async, await, and Concurrency # Understanding async, await, and Concurrency in Python …