In CSS (Cascading Style Sheets), selectors and properties are used to define the styles that will be applied to elements in an HTML document.
Selectors
Selectors are used to target specific elements in an HTML document. There are several types of selectors available in CSS, including element selectors, class selectors, and ID selectors.
Element Selectors
Element selectors target specific HTML elements. For example, the following CSS rule changes the color of all <h1>
elements to red:
h1 {
color: red;
}
Class Selectors
Class selectors allow you to apply styles to multiple elements by assigning a class name to the elements and targeting the class name in the CSS rule. For example:
<style>
.red-text {
color: red;
}
</style>
<h1 class="red-text">Hello World</h1>
<p class="red-text">This is some red text</p>
ID Selectors
ID selectors are similar to class selectors, but they are used to apply styles to a single unique element. An ID selector is defined using the # symbol and is targeted in the CSS rule using the same syntax. For example:
<style>
#header {
background-color: blue;
}
</style>
<div id="header">This is the header</div>
Properties
Properties are used to define the styles that will be applied to the targeted elements. There are hundreds of properties available in CSS, including color, font, and layout properties. Each property has a specific value that defines how the style will be applied. For example, the following CSS rule sets the font size of all <h1>
elements to 32 pixels:
h1 {
font-size: 32px;
}
Summary
By understanding and using selectors and properties effectively, you can style and customize the appearance of your HTML documents using CSS.