Know and understand the characteristics of a style and a class in CSS, including the difference between them.
A style is a set of CSS declarations that are applied directly to an HTML element. Styles can be added in three ways:
style attribute inside an element.<style> block in the document’s <head>.<link rel="stylesheet"> element.A class is a reusable selector defined in a style sheet that can be applied to any number of HTML elements using the class attribute.
| Characteristic | Style (inline) | Class (external/internal) |
|---|---|---|
| Location of definition | Inside the HTML tag using style="…" |
In a CSS rule set, usually in a <style> block or external .css file |
| Reusability | Applied to a single element only | Can be applied to many elements across the site |
| Specificity | Higher specificity than class selectors | Lower specificity than inline styles but higher than element selectors |
| Maintenance | Difficult – changes must be made on each element | Easy – change the class definition once to affect all elements using it |
| Typical use | Quick, one‑off styling or testing | Consistent styling for groups of elements (e.g., navigation menus, buttons) |
| HTML attribute name | style |
class |
Example:
<p style="color: red; font-weight: bold;">Important notice</p>
Define the class in a style sheet:
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
Apply the class to any element:
<p class="highlight">Important notice</p>
!important is used.