↓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

What is a Digital Twin?
·805 words·4 mins· loading
Industry Applications Technology Trends & Future Computer Vision (CV) Digital Twin Internet of Things (IoT) Manufacturing Technology Artificial Intelligence (AI) Graphics
What is a digital twin? # A digital twin is a virtual representation of a real-world entity or …
Frequencies in Time and Space: Understanding Nyquist Theorem & its Applications
·4103 words·20 mins· loading
Data Analysis & Visualization Computer Vision (CV) Mathematics Signal Processing Space Exploration Statistics
Applications of Nyquists theorem # Can the Nyquist-Shannon sampling theorem applies to light …
The Real Story of Nyquist, Shannon, and the Science of Sampling
·1146 words·6 mins· loading
Technology Trends & Future Interdisciplinary Topics Signal Processing Remove Statistics Technology Concepts
The Story of Nyquist, Shannon, and the Science of Sampling # In the early days of the 20th century, …
BitNet b1.58-2B4T: Revolutionary Binary Neural Network for Efficient AI
·2637 words·13 mins· loading
AI/ML Models Artificial Intelligence (AI) AI Hardware & Infrastructure Neural Network Architectures AI Model Optimization Language Models (LLMs) Business Concepts Data Privacy Remove
Archive Paper Link BitNet b1.58-2B4T: The Future of Efficient AI Processing # A History of 1 bit …
Ollama Setup and Running Models
·1753 words·9 mins· loading
AI and NLP Ollama Models Ollama Large Language Models Local Models Cost Effective AI Models
Ollama: Running Large Language Models Locally # The landscape of Artificial Intelligence (AI) and …