CSS SELECTORS

Selectors help identify which parts of a webpage you want to style or modify. They act like names or tags for different elements on the webpage.

• Picking Elements: Selectors are like names for picking elements on a webpage.


• Selecting by Type: Choose all elements of a certain type with simple names like p for paragraphs. Example: p { color: #3498db; }


• Selecting by Class: Use classes to pick elements with something in common. Example: .highlight { background-color: #ecf0f1; }


• Selecting by ID: IDs are super special names for picking one specific element. Example: #header { font-size: 24px; }


• Selecting Children: Pick elements inside others, like selecting bold text inside paragraphs. Example: p strong { font-weight: bold; }


• Selecting Everything: Use * to select all elements on the webpage. Example: * { margin: 0; }


• Selecting Multiple Things: Pick many elements at once, like titles and paragraphs. Example: h1, p { color: #2980b9; }


• Combining Selectors: Combine different selectors for precise picking. Example: header .title { text-align: center; }


• Be Specific: Clearly instruct by saying, "Select only the big titles." Example: h1.big-title { font-size: 36px; }