Css Class Selector

CSS class selector

Created By: chatGPT

CSS class selectors are used to select elements with a specific class attribute. The syntax for a class selector is a period (.) followed by the class name. This allows you to style multiple elements using the same class without repeating styles. It is commonly used to apply common styles to different elements on a webpage.

.example {
    color: blue;
    font-size: 16px;
    margin: 10px;
}

You can apply the class to an HTML element like this:

<div class="example">This is a div with the example class.</div>
<span class="example">This is a span with the same class.</span>

Furthermore, you can combine class selectors with other selectors for more specific styling. For example, if you want to select only p elements with a specific class, you can do so using the following syntax:

p.example {
    background-color: yellow;
    padding: 5px;
}

This will apply the styles only to p elements that have the class example.

<p class="example">This paragraph will have a yellow background.</p>
<p>This paragraph will not.</p>

Using class selectors is an essential part of writing CSS — they help create more readable and maintainable styles for your project.

/* Example of CSS with multiple class selectors */
.header {
    text-align: center;
}
.footer {
    text-align: center;
}
.card {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
}