Week 2 Day 3

New Terms

• Element Selector
• ID Selector
• Class Selector
• Descendant Selector
• The Box Model

Element Selector

The element selector targets all instances of a given HTML element. It's as simple as writing the name of the element in your CSS. This is a great way to apply global styles to all paragraphs, headings, lists, and more.

ID Selector

An ID selector targets a single, unique element on the page. In your HTML, an element can have an id attribute that should be unique within the document. In CSS, you reference this element by prefixing the ID with a hash (#). This is ideal when you need to apply styles to one specific element.

Class Selector

A class selector targets any element that has a specific class attribute. Unlike IDs, classes can be reused across multiple elements, making them perfect for applying common styles to various parts of your site.

Descendant Selector

A descendant selector targets elements that are nested within other elements. This is very useful when you want to style a specific type of element only when it appears inside another element. The syntax involves writing two selectors separated by a space.

The Box Model

Each box consists of four parts:

1. Content – The actual text or image inside the element.
2. Padding – Space between the content and the border.
3. Border – The visible (or invisible) edge around the element.
4. Margin – Space between this element and other elements.