DEV Community

CodeWithDhanian
CodeWithDhanian

Posted on

Day 21/180 of Frontend Dev: Introduction to CSS - Syntax, Selectors, and Applying Styles

#frontend #frontendchallenge #webdev

Welcome to Day 21 of the 180 Days of Frontend Development Challenge, where we begin our CSS journey. Today you'll learn core CSS concepts to style your HTML projects. For comprehensive CSS techniques, see the Learn Frontend Development in 180 Days ebook.

1. CSS Fundamentals

CSS Syntax Structure 

selector {
  property: value;
  /* This is a comment */
}
Enter fullscreen mode Exit fullscreen mode

Example:

h1 {
  color: navy;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

2. Three Ways to Apply CSS

A. Inline Styles (Avoid) 

<p style="color: red; font-size: 16px;">Emergency notice</p>
Enter fullscreen mode Exit fullscreen mode

B. Internal Stylesheet 

<head>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
    }
  </style>
</head>
Enter fullscreen mode Exit fullscreen mode

C. External Stylesheet (Recommended) 

<head>
  <link rel="stylesheet" href="styles/main.css">
</head>
Enter fullscreen mode Exit fullscreen mode

3. Essential Selectors

Basic Selectors 

/* Element selector */
p {
  color: #333;
}

/* Class selector */
.highlight {
  background-color: yellow;
}

/* ID selector */
#main-header {
  border-bottom: 2px solid black;
}
Enter fullscreen mode Exit fullscreen mode

Attribute Selectors 

/* Targets links opening in new tab */
a[target="_blank"] {
  color: purple;
}

/* Targets email inputs */
input[type="email"] {
  border-color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-classes 

/* Unvisited link */
a:link {
  color: blue;
}

/* Visited link */
a:visited {
  color: purple;
}

/* Hover state */
button:hover {
  background-color: #eee;
}

/* Focus state */
input:focus {
  outline: 2px solid orange;
}
Enter fullscreen mode Exit fullscreen mode

4. CSS Box Model

Visualization 

+---------------------------+
|          margin           |
|   +-------------------+   |
|   |      border       |   |
|   |   +-----------+   |   |
|   |   |  padding  |   |   |
|   |   |   +---+   |   |   |
|   |   |   |   |   |   |   |
|   |   |   +---+   |   |   |
|   |   +-----------+   |   |
|   +-------------------+   |
+---------------------------+
Enter fullscreen mode Exit fullscreen mode

Box Model Properties 

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
  box-sizing: border-box; /* Includes padding/border in width */
}
Enter fullscreen mode Exit fullscreen mode

5. Typography Essentials

Font Properties 

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400; /* 300-700 */
  line-height: 1.5;
  color: #333;
}

h1 {
  font-size: 2.5rem; /* 40px if root is 16px */
  text-transform: uppercase;
  letter-spacing: 1px;
}
Enter fullscreen mode Exit fullscreen mode

Text Alignment 

p {
  text-align: justify;
  text-decoration: underline;
  text-indent: 1em;
}
Enter fullscreen mode Exit fullscreen mode

6. Practical CSS Example

HTML Structure 

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <article class="post">
    <h1 class="post-title">CSS Fundamentals</h1>
    <p class="post-meta">Published <time>May 21, 2023</time></p>
    <p class="post-content">Learning CSS changes everything...</p>
    <a href="#" class="read-more">Continue reading</a>
  </article>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Styling (styles.css) 

/* Base Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Article Component */
.post {
  background-color: #f9f9f9;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.post-title {
  color: #2c3e50;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.post-meta {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.post-content {
  margin-bottom: 1.5rem;
}

.read-more {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.read-more:hover {
  background-color: #2980b9;
}
Enter fullscreen mode Exit fullscreen mode

7. Exercises

  1. Basic Styling

    • Create a CSS rule that makes all <h2> elements blue
    • Add 20px padding to elements with class .card
    • Style visited links to appear gray

  2. Box Model Practice

    • Create a 300px wide box with:
      • 1px solid border
      • 15px padding
      • 25px margin
    • Verify dimensions in browser DevTools

  3. Typography Challenge

    • Style a paragraph with:
      • 18px font size
      • 1.6 line height
      • Google Font of your choice

8. Professional Tips

  1. CSS Methodology

    • Use consistent naming (BEM recommended)
    • Organize properties alphabetically
    • Group related selectors

  2. DevTools Mastery

    • Inspect element styles
    • Toggle pseudo-classes (:hover, :focus)
    • Experiment with box model values

  3. Performance

    • Minimize use of universal selector (*)
    • Avoid overly specific selectors
    • Use shorthand properties

What's Next?

Tomorrow (Day 22) dives into CSS Layouts including Flexbox and Grid systems. For complete CSS mastery including advanced selectors and architectural patterns, see Chapter 16 in the Learn Frontend Development in 180 Days ebook.

Pro Tip: Validate your CSS using the W3C CSS Validator:

npm install css-validator -g
css-validator your-styles.css
Enter fullscreen mode Exit fullscreen mode

Top comments (0)