Alaa Amer

Advanced CSS Selectors and Essential Properties: Complete Guide

Advanced CSS Selectors and Essential Properties: Complete Guide

Professional Guide by Alaa Amer – Expert Web Developer & Designer

Discover the power of Advanced CSS Selectors and learn essential properties to create sophisticated, responsive designs with professional best practices.

2️⃣ Text and Font Control Properties

Basic Font Properties

.typography-showcase {
  /* Font family with fallbacks */
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* Font size */
  font-size: 18px; /* pixels */
  font-size: 1.125rem; /* relative */
  font-size: 112.5%; /* percentage */

  /* Font weight */
  font-weight: 400; /* normal */
  font-weight: 600; /* medium */
  font-weight: 700; /* bold */
  font-weight: normal; /* normal */
  font-weight: bold; /* bold */
  font-weight: lighter; /* lighter */
  font-weight: bolder; /* bolder */

  /* Font style */
  font-style: normal; /* normal */
  font-style: italic; /* italic */
  font-style: oblique; /* oblique */

  /* Font stretch */
  font-stretch: normal;
  font-stretch: condensed;
  font-stretch: expanded;
}

/* Graduated font sizes */
.text-xs {
  font-size: 0.75rem;
} /* 12px */
.text-sm {
  font-size: 0.875rem;
} /* 14px */
.text-base {
  font-size: 1rem;
} /* 16px */
.text-lg {
  font-size: 1.125rem;
} /* 18px */
.text-xl {
  font-size: 1.25rem;
} /* 20px */
.text-2xl {
  font-size: 1.5rem;
} /* 24px */
.text-3xl {
  font-size: 1.875rem;
} /* 30px */
.text-4xl {
  font-size: 2.25rem;
} /* 36px */

/* Various font weights */
.font-thin {
  font-weight: 100;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-black {
  font-weight: 900;
}

Text Formatting Properties

.text-formatting {
  /* Text alignment */
  text-align: left; /* left */
  text-align: right; /* right */
  text-align: center; /* center */
  text-align: justify; /* justify */

  /* Text decoration */
  text-decoration: none; /* no decoration */
  text-decoration: underline; /* underline */
  text-decoration: overline; /* overline */
  text-decoration: line-through; /* strikethrough */

  /* Text transform */
  text-transform: none; /* no transform */
  text-transform: uppercase; /* UPPERCASE */
  text-transform: lowercase; /* lowercase */
  text-transform: capitalize; /* Capitalize */

  /* Line height */
  line-height: 1.2; /* tight */
  line-height: 1.4; /* normal */
  line-height: 1.6; /* comfortable */
  line-height: 2; /* double */

  /* Letter spacing */
  letter-spacing: -0.05em; /* tight */
  letter-spacing: 0; /* normal */
  letter-spacing: 0.05em; /* wide */
  letter-spacing: 0.1em; /* wider */

  /* Word spacing */
  word-spacing: -0.05em;
  word-spacing: 0.1em;
  word-spacing: 0.2em;

  /* White space handling */
  white-space: normal; /* normal */
  white-space: nowrap; /* no wrap */
  white-space: pre; /* preserve spaces */
  white-space: pre-wrap; /* wrap with spaces */

  /* Text overflow */
  text-overflow: ellipsis; /* dots */
  text-overflow: clip; /* clip */
  overflow: hidden; /* hide overflow */
}

Advanced Text Effects

/* Text shadow */
.text-shadow-demo {
  /* Simple shadow */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  /* Multiple shadows */
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.3),
    3px 3px 6px rgba(0, 0, 0, 0.2),
    5px 5px 10px rgba(0, 0, 0, 0.1);

  /* Colored shadow */
  text-shadow:
    0 0 10px #007bff,
    0 0 20px #007bff,
    0 0 30px #007bff;

  /* Neon effect */
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px #ff6b6b;
}

/* Text gradients */
.gradient-text {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
  font-size: 2rem;
}

/* Outlined text */
.outlined-text {
  color: transparent;
  -webkit-text-stroke: 2px #007bff;
  font-weight: bold;
  font-size: 3rem;
}

/* 3D text effect */
.text-3d {
  color: #fff;
  text-shadow:
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25);
}

4️⃣ Practical Project: Advanced Profile Page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Advanced Profile Page</title>
    <link rel="stylesheet" href="advanced-profile.css" />
  </head>
  <body>
    <div class="profile-container">
      <header class="profile-header">
        <div class="background-pattern"></div>
        <div class="header-content">
          <div class="avatar-section">
            <img src="avatar.jpg" alt="Profile Picture" class="avatar" />
            <div class="status-indicator online"></div>
          </div>
          <div class="profile-info">
            <h1 class="profile-name">Alaa Amer</h1>
            <p class="profile-role">Full Stack Developer</p>
            <div class="profile-stats">
              <div class="stat-item">
                <span class="stat-number">50+</span>
                <span class="stat-label">Projects</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">5</span>
                <span class="stat-label">Years Experience</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">100%</span>
                <span class="stat-label">Client Satisfaction</span>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main class="profile-main">
        <section class="about-section">
          <h2 class="section-title">About Me</h2>
          <p class="about-text">
            Web developer and designer specializing in modern web technologies.
            I focus on creating exceptional user experiences and innovative
            technical solutions.
          </p>
        </section>

        <section class="skills-section">
          <h2 class="section-title">Technical Skills</h2>
          <div class="skills-grid">
            <div class="skill-item" data-level="95">
              <div class="skill-info">
                <span class="skill-name">HTML/CSS</span>
                <span class="skill-percentage">95%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 95%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="90">
              <div class="skill-info">
                <span class="skill-name">JavaScript</span>
                <span class="skill-percentage">90%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 90%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="88">
              <div class="skill-info">
                <span class="skill-name">Laravel</span>
                <span class="skill-percentage">88%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 88%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="85">
              <div class="skill-info">
                <span class="skill-name">React</span>
                <span class="skill-percentage">85%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 85%"></div>
              </div>
            </div>
          </div>
        </section>

        <section class="contact-section">
          <h2 class="section-title">Get In Touch</h2>
          <div class="contact-methods">
            <a href="mailto:[email protected]" class="contact-item email">
              <span class="contact-icon">📧</span>
              <span class="contact-text">[email protected]</span>
            </a>
            <a
              href="https://linkedin.com/in/alaamer"
              class="contact-item linkedin"
            >
              <span class="contact-icon">💼</span>
              <span class="contact-text">LinkedIn</span>
            </a>
            <a href="https://github.com/alaamer" class="contact-item github">
              <span class="contact-icon">🐱</span>
              <span class="contact-text">GitHub</span>
            </a>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

The CSS file for this project remains the same as the Arabic version, with minor adjustments for text direction and font families.

Summary

In this lesson we learned:

✅ Advanced selectors and pseudo-classes ✅ Order, position, and type selectors
✅ Pseudo-elements and content addition ✅ Advanced text and font properties ✅ Complex color systems and backgrounds ✅ Advanced practical profile project

In the next lesson we'll explore Box Model and Layout to understand how to precisely control element dimensions and spacing.

📩 Need advanced CSS help?