CSS Syntax 🎯

Welcome to our CSS Syntax tutorial! In this comprehensive guide, we'll dive into the world of Cascading Style Sheets, learning its syntax, properties, and practical applications. By the end of this lesson, you'll be able to style your web pages like a pro! 💡

What is CSS? 📝

CSS (Cascading Style Sheets) is a style sheet language used for describing the look and formatting of a document written in HTML or XML. It separates the presentation from the structure of the content, making it easier to maintain and update a website.

CSS Syntax Basics 💡

Structure

CSS rules consist of three main components:

Selector: identifies the HTML element(s) to be styled
Declarations: define the properties and their values for the selected element(s)
Properties: specify the visual attributes of the selected element(s)

Rules Example 📝

css

/* Selector */
selector {
  /* Declaration - Property: Value */
  property: value;
}

CSS Comment 📝

You can add comments in your CSS files to make them easier to understand.

css

/* This is a comment in CSS */

CSS Selectors 💡

CSS selectors help you target specific HTML elements for styling. We'll cover some essential CSS selectors in this lesson, including:

Simple selectors (Element, Class, ID)
Grouping selectors
Descendant selectors
Child selectors
Adjacent sibling selectors

Example 📝

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Selectors Example</title>
  <style>
    /* Basic selector */
    p {
      color: red;
    }

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

    /* ID selector */
    #my-id {
      font-size: 2em;
    }
  </style>
</head>
<body>
  <h1>CSS Selectors</h1>
  <p>This is a basic selector example.</p>
  <p class="highlight">This is a class selector example.</p>
  <p id="my-id">This is an ID selector example.</p>
</body>
</html>

CSS Properties and Values 💡

CSS offers a wide variety of properties and values for controlling various aspects of your web page's appearance. Some commonly used properties include:

color: sets the color of text
background-color: sets the background color of an element
font-family: defines the font for text
font-size: adjusts the size of text
margin: adds space around an element
padding: adds space within an element
border: styles the borders of an element

CSS Property Example 📝

css

h1 {
  color: navy;
  background-color: lightblue;
  font-family: Arial, sans-serif;
  font-size: 2em;
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}

Quiz Time! 🎯

Keep learning and experimenting with CSS! You'll soon be styling your web pages like a pro. 💡