CSS Syntax: Basic and Advanced

Basic CSS Syntax:

The basic syntax of CSS involves selecting HTML elements and applying styles to them. Here are key components:

Selectors:


        selector {
            property: value;
        }

Example:


        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            color: #3498db;
        }

Advanced CSS Syntax:

Advanced CSS introduces more complex features and concepts for sophisticated styling:

1. Box Model:


        selector {
            margin: 10px;
            padding: 20px;
            border: 1px solid #ddd;
        }

2. Flexbox:


        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

3. Grid Layout:


        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

4. Transitions:


        .element {
            transition: color 0.3s ease-in-out;
        }
        .element:hover {
            color: #e74c3c;
        }

5. Media Queries:


        @media screen and (max-width: 768px) {
            body {
                font-size: 14px;
            }
        }

6. SASS/SCSS:


        $primary-color: #3498db;
        body {
            color: $primary-color;
        }

CSS in HTML Document:

Include the following within the <style> tag in the HTML <head>:

        
            <style>
                /* Your CSS code goes here */
            </style>

Learning Resources:

Explore online resources, tutorials, and documentation to deepen your understanding of CSS. Practice by working on real-world projects to reinforce your skills.