3 🎨 CSS 🎨 HowTo Basic Selectors

3. HowTo Basic Selectors

1. How to Target All Paragraphs

Steps:

1. Use element selector p
2. Add CSS rules inside braces
3. Apply styling to all <p> elements

p {
    color: black;
    font-family: Arial, sans-serif;
}

2. How to Highlight Specific Text with Class

Steps:

1. Add class attribute to HTML element
2. Create class selector with dot notation
3. Apply desired styles

<span class="highlight">Important text</span>

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

3. How to Style a Unique Page Title

Steps:

1. Add id attribute to HTML element
2. Create ID selector with hash notation
3. Apply unique styling

<h1 id="main-title">Welcome to My Site</h1>

#main-title {
    font-size: 3em;
    text-align: center;
    color: #333;
}

4. How to Reset All Default Browser Styles

Steps:

1. Use universal selector *
2. Set margin and padding to zero
3. Apply to all elements

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

5. How to Style Multiple Elements with Same Class

Steps:

1. Add same class to multiple HTML elements
2. Create class selector
3. Apply consistent styling

<p class="quote">First quote</p>
<p class="quote">Second quote</p>
<div class="quote">Quote in div</div>

.quote {
    border-left: 3px solid #ccc;
    padding-left: 15px;
    margin: 10px 0;
}

6. How to Create Unique Header Styles

Steps:

1. Use ID selector for unique header
2. Apply distinct properties
3. Keep other headers with class selectors

<h1 id="welcome-header">Welcome Page</h1>
<h2 class="section-title">Section Title</h2>

#welcome-header {
    font-size: 2.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-title {
    font-size: 1.5em;
    color: #666;
}

7. How to Apply Consistent Styles to All Elements

Steps:

1. Use universal selector
2. Set base styles for all elements
3. Ensure consistent starting point

* {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

8. How to Style Specific Elements Among Many

Steps:

1. Use element selector for general styles
2. Override with class or ID selectors
3. Create specific exceptions

<p>This is a paragraph</p>
<p class="special">This one is special</p>
<div id="unique-box">This is unique</div>

p {
    color: black;
    margin-bottom: 10px;
}

.special {
    color: red;
    font-weight: bold;
}

#unique-box {
    background-color: lightblue;
    padding: 20px;
}