# CSS Selectors and Properties

CSS (Cascading Style Sheets) is a powerful language used to style and layout web pages. To apply styles, CSS uses **selectors** to target HTML elements, and **properties** to define the specific styles that should be applied to these elements. Understanding how CSS selectors and properties work is essential for controlling the look and feel of a website. In this article, we’ll explore CSS selectors and properties, and how they can be used to create visually appealing web pages.

***

#### **What Are CSS Selectors?**

CSS selectors are patterns used to select HTML elements on a webpage that you want to style. They tell the browser which HTML element or group of elements to apply specific styles to. Selectors can target elements by their tag name, class, ID, attribute, or other characteristics.

**Types of CSS Selectors:**

1. **Element Selector (Type Selector):**

   * The element selector targets all elements of a specified type.
   * For example, the following CSS will apply the style to all `<p>` (paragraph) elements on a page.

   ```css
   p {
     color: blue;
     font-size: 16px;
   }
   ```
2. **Class Selector:**

   * The class selector targets elements with a specific class attribute. It is defined by a period (`.`) followed by the class name.
   * This allows you to apply styles to multiple elements that share the same class.

   ```css
   .highlight {
     background-color: yellow;
     font-weight: bold;
   }
   ```

   **HTML Example:**

   ```html
   <p class="highlight">This text will be highlighted.</p>
   <div class="highlight">This div will also be highlighted.</div>
   ```
3. **ID Selector:**

   * The ID selector targets a single element with a specific ID attribute. It is defined by a hash (`#`) followed by the ID name.
   * Each ID must be unique within a webpage.

   ```css
   #header {
     background-color: #333;
     color: white;
     padding: 20px;
   }
   ```

   **HTML Example:**

   ```html
   <div id="header">This is the header</div>
   ```
4. **Universal Selector:**

   * The universal selector (`*`) targets all elements on the page.
   * It's useful for applying a global style, like setting margin and padding to zero.

   ```css
   * {
     margin: 0;
     padding: 0;
   }
   ```
5. **Attribute Selector:**

   * The attribute selector targets elements based on the presence or value of their attributes.

   ```css
   input[type="text"] {
     border: 1px solid #ccc;
   }
   ```

   **HTML Example:**

   ```html
   <input type="text" />
   <input type="password" />
   ```
6. **Descendant Selector:**

   * The descendant selector targets an element that is a child, grandchild, or further descendant of another element.

   ```css
   div p {
     color: red;
   }
   ```

   **HTML Example:**

   ```html
   <div>
     <p>This paragraph will be red.</p>
   </div>
   ```
7. **Child Selector:**

   * The child selector (`>`) targets direct children of a specified element.

   ```css
   div > p {
     color: green;
   }
   ```

   **HTML Example:**

   ```html
   <div>
     <p>This paragraph will be green.</p>
     <span><p>This paragraph will not be green.</p></span>
   </div>
   ```
8. **Pseudo-Classes:**

   * Pseudo-classes allow you to style elements in specific states, such as when they are hovered over, focused, or active.

   ```css
   a:hover {
     color: red;
   }
   ```

   **HTML Example:**

   ```html
   <a href="#">Hover over me</a>
   ```
9. **Pseudo-Elements:**

   * Pseudo-elements target parts of an element, such as the first letter or the content before an element.

   ```css
   p::first-letter {
     font-size: 2em;
     color: green;
   }
   ```

   **HTML Example:**

   ```html
   <p>This is a paragraph with the first letter styled.</p>
   ```

***

#### **What Are CSS Properties?**

CSS properties define the style applied to an element. They dictate how an element will look, from colors and fonts to positioning and layout. Each property has a corresponding value that specifies the desired style.

**Common CSS Properties:**

1. **Color and Background Properties:**

   * **`color`**: Sets the text color.
   * **`background-color`**: Sets the background color of an element.
   * **`background-image`**: Sets a background image for an element.

   ```css
   p {
     color: blue;
     background-color: lightgray;
   }
   ```
2. **Text Properties:**

   * **`font-family`**: Specifies the font for text.
   * **`font-size`**: Sets the size of the font.
   * **`font-weight`**: Defines the thickness of the font (e.g., normal, bold).
   * **`line-height`**: Sets the amount of space between lines of text.

   ```css
   h1 {
     font-family: Arial, sans-serif;
     font-size: 24px;
     font-weight: bold;
     line-height: 1.5;
   }
   ```
3. **Box Model Properties:**

   * **`width` and `height`**: Define the dimensions of an element.
   * **`padding`**: Adds space inside an element, between the content and the border.
   * **`margin`**: Adds space outside an element, between it and other elements.
   * **`border`**: Defines the border style, width, and color of an element.

   ```css
   div {
     width: 300px;
     height: 200px;
     margin: 20px;
     padding: 15px;
     border: 1px solid #ccc;
   }
   ```
4. **Layout Properties:**

   * **`display`**: Specifies how an element is displayed on the page (e.g., block, inline, flex, grid).
   * **`position`**: Defines the positioning method for an element (e.g., relative, absolute, fixed).
   * **`top`, `right`, `bottom`, `left`**: Specifies the offset of an element in a positioned container.

   ```css
   div {
     display: flex;
     justify-content: space-between;
   }
   ```
5. **Visibility and Opacity:**

   * **`visibility`**: Controls whether an element is visible or hidden, while still taking up space.
   * **`opacity`**: Sets the transparency level of an element.

   ```css
   .hidden {
     visibility: hidden;
   }

   .transparent {
     opacity: 0.5;
   }
   ```
6. **Border Radius and Box Shadow:**

   * **`border-radius`**: Rounds the corners of an element.
   * **`box-shadow`**: Adds shadow effects to elements.

   ```css
   div {
     border-radius: 10px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   }
   ```
7. **Flexbox and Grid Properties:**

   * **`flex`**: Defines how flex items are distributed in a flex container.
   * **`grid-template-columns`**: Specifies the number of columns in a CSS grid layout.

   ```css
   .container {
     display: flex;
     justify-content: space-around;
   }

   .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
   ```

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.sitecove.com/how-to-guides/website-design-and-development/html-css-and-javascript-basics/css-cascading-style-sheets/css-selectors-and-properties.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.