The selector .class is employed to choose elements associated with a particular class attribute. To target an element based on a specific class, you can utilize the (.) symbol followed by the designated class name. The class name is commonly utilized to apply CSS styles to the specified class.
Using classes in CSS enables the bundling of various elements together, facilitating the simultaneous application of consistent styles across all of them.
They assist in segregating style from structure, allowing us to develop reusable styles that can be implemented across various elements on a webpage.
Note: It ensures that a class name should not be started with a number.
Syntax:
.class {
css declarations;
}
Defining Styles for a Class:
The CSS class selector (.class) is employed to define styles for a specific class. A dot (.) followed by the class name precedes the class selector.
Example:
We can utilize the .highlight selector within our CSS declarations to specify the appearance of elements with the "highlight" class. For instance:
.highlight {
background-color: yellow;
font-weight: bold;
}
This CSS snippet will make the text bold and apply a yellow background color to any element assigned the "highlight" class.
Applying a Class to an Element:
To apply a specific class to an HTML element, you need to include the class attribute and assign it the preferred class name.
For example, when we define a class named "highlight," we can utilize the syntax below to assign it to an element:
<p class="highlight">highlight class is applied to this paragraph .</p>
In this case, the class name "highlight" will be linked to the paragraph element. You can effectively control the visual presentation of elements by using classes to apply specific styles to them.
Applying Multiple Classes:
By specifying several class names in the 'class' attribute of an HTML element, you have the ability to assign multiple classes to that specific element. This allows you to combine and implement styles from various classes onto a single element.
Insert spaces between individual class names within the class attribute value in order to simultaneously apply multiple classes.
Example:
<div class="class1 class2">element has both class1 and class2 applied.</div>
The styles defined within individual classes will be implemented sequentially based on their order within the HTML code when an element has multiple classes assigned to it. This allows for a cascading impact where styles from various classes can either complement or override each other.
Example: Suppose we have the following CSS rules:
.class1 {
color: red;
}
.class2 {
background-color: yellow;
}
An element will display red text color from class1 and a yellow background color from class2 when both classes are assigned. The blending of these classes allows for a customized and visually appealing design.
Note: The class styles applied later in the class attribute will take precedence if conflicting styles are defined in multiple classes. Using classes in a particular order lets you quickly override or adjust styles.
Specificity and Class Selectors:
When several selectors target the same element, specificity, a fundamental aspect of CSS, dictates the order in which styles are implemented. This is crucial for resolving conflicts and guaranteeing the correct styles are applied accurately.
A CSS rule's specificity depends on the type of selectors it employs. Class selectors possess a moderate level of specificity in contrast to element selectors and ID selectors.
The number and type of selectors used in a rule can be used to calculate the specificity values. A selector's specificity value increases as it becomes more focused. An overview of the specificity hierarchy is provided below:
- Inline styles: The most exact styles are those that are inline. The style attribute is used to apply them to specific HTML components directly.
- ID selectors: Compared to class selectors, ID selectors are more particular. They target elements according to the value of the id attribute.
- Class Selectors: Class selectors have a fair amount of specificity. Based on the class attribute value, they target particular items.
- Element selectors: These have the least specificity. They target elements according to the names of their HTML tags.
When multiple styles are applied to a single element using different selectors, the style with the greatest specificity will be given precedence.
Example:
HTML:
<p id="myId" class="myClass">Hello, World!</p>
#myId {
color: blue;
}
.myClass {
color: red;
}
In this case, the.myClass class designation is not as specific as the #myId ID selector. As the style defined by the ID selector holds more importance, the font color of the <p> element will be set to blue.
Combined Class Selectors:
CSS class selectors can be merged with additional selectors to pinpoint elements more accurately and implement styles on specific elements within larger structures.
When merging class selectors, a space is utilized to distinguish each selector. This space indicates that elements with both classes assigned should adopt the specified style.
Example:
.parent-element .class {
/* CSS properties */
}
The selector selector.parent-element and the class selector selector.class are connected by a space in the demonstration provided. This pairing aims at selecting elements with the class "class" that are descendants of elements with the class "parent-element." Only these specific elements will be affected by the defined style rules.
Overriding Styles with Classes:
The styles other selections define can be modified or overridden using CSS classes. The following are the key points:
- When different selectors specify conflicting styles for the same element, a class selector's style definition may take precedence if it is more explicit or applied later in the CSS.
- You can selectively override particular characteristics while maintaining the integrity of the other styles by applying a class to an element with competing styles.
- You can override styles established by previously applied classes in HTML or CSS by applying a class later. This allows you to change the styles of specific elements without changing default or global styles.
- When using CSS frameworks or third-party libraries that offer predefined classes for styling UI components, it can be advantageous to override styles with classes. By adding new classes or modifying existing ones, you can use these classes to adjust styles.
Example:
HTML:
<p class="default myClass">Hello, World!</p>
.default {
color: blue;
}
.myClass {
color: red;
}
In this example, the color of the text is initially defined as blue through the .default class. However, when the .myClass class is applied later, it takes precedence and changes the text color to red.
Reusing Classes:
You can achieve consistency in styling across multiple elements by leveraging CSS's concept of reusing classes.
The following are the key ideas to comprehend:
- The use of classes encourages consistent coding practices across all your web pages. You can specify a class once and apply it to numerous elements instead of creating separate styles for related items.
- Apply the class name to the desired elements using the class attribute to reuse a class.
- Reusing classes makes styling easier and guarantees a unified look. All elements that have that class applied will immediately update when the styles of a class are modified.
- You can establish consistency in look by using the same class name on many elements. All elements will share a set of styles established for a class with that class.
Example:
<h1 class="highlight">Heading has the highlight class applied.</h1>
<p class="highlight">Paragraph also has the highlight class.</p>
The "highlight" class has been assigned to both the header and paragraph elements of this illustration. As a result, they both apply the styles defined by the .highlight CSS selector.
Note: Reusing classes will speed up your styling process, minimize code duplication, and guarantee unified design across all aspects.
Modifying a class's styles will automatically reflect the changes across all elements utilizing that specific class, streamlining the process of managing and updating styles across multiple web pages.
CSS Frameworks and Classes:
The pre-defined classes provided by CSS frameworks can be consistently utilized to effectively style elements.
The following are the salient features of CSS classes and frameworks:
- CSS frameworks like Bootstrap, Foundation, or Tailwind CSS provide a set of CSS rules, components, and stylesheets to speed up web development and achieve uniform designs.
- Frameworks heavily rely on classes to offer a modular and adaptable styling approach. They specify precise class names that you can use to apply predetermined styles to HTML components.
- You can quickly create visually appealing designs using preset classes from CSS frameworks without creating many new CSS codes.
- Classes for popular UI elements like buttons, forms, navigation menus, and grids are usually included in CSS frameworks. These classes allow you to apply uniform styling and guarantee a unified appearance and feel throughout your website.
- Framework classes frequently use a naming scheme to explain their function, making it simpler to comprehend and use them. For instance, the Bootstrap class name "btn btn-primary" designates a button component with primary styling.
- Additionally, CSS frameworks offer utilities and auxiliary classes that provide extra functionality and styling choices. These classes can be used for text alignment, responsive design, layout modifications, etc.
Example (using Bootstrap):
<button class="btn btn-primary">Click me!</button>
The button component depicted here is assigned the "btn" and "btn-primary" classes sourced from the Bootstrap framework. Consequently, the button inherits the predefined styling designated by Bootstrap for primary buttons.
Now, Let's Gain a Comprehensive Understanding Through Illustrative Examples:
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: lightpink;
}
.par {
background: lightblue;
text-align:center;
font-size:30px;
color:black;
}
</style>
</head>
<body>
<p class="par">Hello World</p>
<p class="par">Welcome to the C# Tutorial.</p>
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
font-size:30px;
background-color:lightblue;
}
.col {
color:green;
}
.back {
background-color:yellow;
}
.tut{
color:black;
background-color: lightpink;
}
</style>
</head>
<body>
<h1 class = "col">
Hello World :) :)
</h1>
<h2 class = "back">Welcome to the C# Tutorial</h2>
<p class = "tut">
This is an example of <i>.class</i> selector.
</p>
</body>
</html>