lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Selector - Specifying Targets for Styling

`CSS selectors` allow you to select HTML elements in various ways as shown below.

 

## Universal Selector

Use the `*` symbol to select all HTML elements.

```css title="CSS"
* {
 color: blue; /* Sets the text color for all HTML elements to blue */
}
```

 

## Element Selector

Select HTML elements by their tag name.

```css title="CSS"
p {
 font-size: 16px; /* Sets the font size of all tags to 16px */
}
```

 

## Class Selector

Select HTML elements by using the class name in the `.class` format.

```css title="CSS"
.highlight {
 background-color: yellow; /* Sets the background color to yellow for elements with the class "highlight" */
}
```

 

## ID Selector

Select HTML elements by using the ID in the `#id` format.

```css title="CSS"
#header {
 font-weight: bold; /* Sets text to bold for elements with the ID "header" */
}
```

 

## Descendant Selector

Select nested elements within a parent element.

```css title="CSS"
ul li {
 list-style: circle; /* Selects <li> tags within a <ul> and sets their list style to circle */
}
```

 

## HTML & CSS Usage Example

Below is an example of using HTML and CSS together.

```html title="HTML"
<body>
 This HTML element uses the <code>p</code> tag and has the class <code>my-class</code>.
 <h1 id="my-id">This HTML element uses the <code>h1</code> tag and has the ID <code>my-id</code>.
</body>
```

```css title="CSS"
p {
 color: red;
}

.my-class {
 background-color: blue;
}

#my-id {
 font-size: 20px;
}
```

This CSS will render as follows:

(Red text) This HTML element uses the <code>p</code> tag and has the class <code>my-class</code>.

(Blue background) This HTML element uses the <code>h1</code> tag and has the ID <code>my-id</code>.

In the next session, we will explore advanced selector compositions.

The Universal Selector ('*') can be used to apply styles to all elements in an HTML document. For example, you can change the text color of all elements to blue.

Selector - Specifying Targets for Styling

Universal Selector

Element Selector

Class Selector

ID Selector

Descendant Selector

HTML & CSS Usage Example

In CSS, which selector is used to apply styles to all HTML elements?