CSS Syntax, Selectors, and Combinators

AI-enhanced Web3 Frontend Development Course CSS Syntax, Selectors, and Combinators

Introduction:

Welcome to a deeper exploration of CSS. This lesson will focus on CSS syntax, selectors, and combinators, essential for targeting and styling HTML elements effectively.

Remember, watching the lesson video will offer a deeper understanding of this topic.

Learning Objectives:

By the end of this lesson, you will be able to:

Understand CSS syntax.
Apply various CSS selectors.
Utilize combinators in CSS for complex selections.

Lesson Video:

CSS Syntax Basics

CSS rules are made of selectors and a declaration block. Each declaration block contains properties and their values.

/* CSS Syntax */
selector {
    property: value;
}

CSS Selectors

Element Selector:
- Targets HTML elements directly.
- Example: p { color: blue; }
Class Selector:
- Targets elements with a specific class.
- Example: .className { font-size: 20px; }
ID Selector:
- Targets elements with a specific id.
- Example: #idName { background-color: yellow; }
Attribute Selector:
- Targets elements based on an attribute.
- Example: input[type="text"] { border-color: green; }

CSS Combinators

Descendant Combinator ( ):
- Targets all elements that are descendants.
- Example: nav ul { margin: 0; }
Child Combinator (>):
- Targets direct children elements.
- Example: nav > ul > li { display: inline; }
Adjacent Sibling Combinator (+):
- Targets the immediate next sibling.
- Example: h1 + p { font-style: italic; }
General Sibling Combinator (~):
- Targets all siblings that follow the specified element.
- Example: h1 ~ p { color: red; }

Example Codes for Practical Application:

Expanding the Capstone Project

Expanding on our Token Minter dApp, let’s enhance its features using what you learned from this lesson.

Existing Code from Previous Lesson:

<!DOCTYPE html> <!-- Defines document type and HTML version -->
<html lang="en"> <!-- Sets the language of the page -->

<head>
    <meta charset="UTF-8"> <!-- Sets character encoding for the document -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures proper rendering on mobile devices -->
    <title>Token Minter dApp</title> <!-- Title of the webpage -->
    <link rel="stylesheet" href="/globalstyles.css"> <!-- Link to external CSS file -->
     <!-- Internal CSS -->
     <style>
        /* Basic styling for the body */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        /* Styling for the header */
        header {
            background: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        /* Styling for the navigation menu */
        nav ul {
            list-style-type: none;
        }
        nav ul li {
            display: inline;
            margin-right: 20px;
        }
        nav a {
            text-decoration: none;
            color: white;
        }
    </style>
</head>

<body>
    <header>
        <!-- Site header with navigation -->
        <h1>Welcome to our Token Minter dApp</h1>
        <nav>
            <!-- Navigation links -->
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#mint">Mint Tokens</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <!-- Main content section -->
        <article id="home">
            <!-- Introduction article -->
            <h2>Introduction to Token Minting</h2>
            <p>This dApp allows users to mint their own tokens on the blockchain.</p>
        </article>
        
        <section id="mint">
            <!-- Token minting form section -->
            <h2>Mint Your Tokens</h2>
            <form action="#">
                <!-- Form for token minting -->
                <input type="email" placeholder="Enter your email">
                <input type="number" placeholder="Token amount">
                <button type="submit">Mint</button>
            </form>
        </section>
        
        <aside>
            <!-- Sidebar with additional information -->
            <h3>Learn More:</h3>
            <p>Explore more about blockchain technology.</p>
        </aside>
    </main>
    
    <footer>
        <!-- Footer with contact information -->
        <p>Contact us at <a href="mailto:hello@dProgrammingUniversity.com">hello@dProgrammingUniversity.com</a></p>
    </footer>
    
</body>
</html>

Enhance the Capstone Project:

CSS code:

/* External CSS */
/* Basic styling for the body */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
/* Styling for the header using element selector */
header {
    background: #333;
    color: white;
    padding: 10px;
    text-align: center;
}
/* Styling navigation menu using child combinator */
nav > ul > li {
    display: inline;
    margin-right: 20px;
}
/* Styling links using attribute selector */
a[href^="#"] {
    text-decoration: none;
    color: white;
}
/* Targeting specific section with ID selector */
#mint {
    background-color: #eaeaea;
    padding: 15px;
    margin-top: 10px;
}
/* Styling paragraph using adjacent sibling combinator */
h2 + p {
    color: #630404;
}

Conclusion:

This lesson provided a practical understanding of CSS syntax, selectors, and combinators.

These CSS features are crucial for creating well-structured and visually appealing web pages, especially in Web3 development.

Resources & References:

To deepen your understanding of this lesson, you can explore the following resources:

These resources provide comprehensive guides and examples that will be invaluable as you learn and apply them in your journey of Web3 frontend development.

Support:

If you need help with this lesson, questions, suggestions and improvement. The best way to get help is to use the comment below:
1. First check existing comments if your questions have been answered before posting.
2. If no existing related question with an answer, then you can post a new one (kindly avoid duplicating previously asked and answered questions).

NOTE: This is the most recommended way of getting support directly from the instructor of this course. Posting on other platforms like Discord may get support from other community members and not from the course instructor directly.

Images|Videos|Links: To support your question with a screenshot, Github repo link or other media, kindly upload it somewhere online like Drive/Dropbox or Github (for codes) first, then post the link to it in your comment. Please do not upload media/codes directly, it may fail or cause your comment to be deleted.

Please ONLY post questions that are specific to this lesson not the entire course to ensure others can find it helpful. Each lesson allows comments relating to it ONLY. Off-lesson questions will be deleted even if they relate to this course as a whole but as long as they are not specific to this lesson, they are not allowed.

Lesson Content

EXERCISE For CSS Syntax, Selectors, and Combinators

Previous Lesson

Back to Course

Next Lesson

2 Comments

Collapse Comments