Summary
Highlights
IDs and Classes in CSS allow defining specific styles for HTML elements. Many new CSS users struggle to differentiate between them, but this video will clarify their uses and practical implementation.
Directly styling an HTML element (e.g., all <h1> tags) using CSS can lead to unintended consequences, as it applies to all instances of that element across linked pages. This demonstrates the need for more specific targeting.
IDs provide a unique identifier for a single HTML element. By assigning an ID like 'Mike's h1' to an <h1> tag, only that specific element can be targeted and styled in CSS using the '#' symbol before the ID name. An HTML element can only have one ID.
Styles defined with an ID in CSS are applied to the HTML element with that specific ID. This allows for precise control over styling without affecting other similar elements on a page or linked pages, unless explicitly given the same ID (though this violates the spirit of IDs).
Classes, unlike IDs, are reusable blocks of CSS styling. You can define a class using a dot '.' followed by the class name (e.g., '.fancy-border') and apply it to an HTML element using the 'class' attribute. An HTML element can have multiple classes.
A key advantage of classes is the ability to apply multiple classes to a single HTML element by listing them separated by spaces in the 'class' attribute. This allows for combining different styling rules.
Officially, IDs are meant for identifying specific, unique elements (useful for JavaScript and browser functions), while classes are for applying reusable styling to many elements. While CSS will apply styles regardless of whether an ID or class is used, adhering to this convention is crucial for good programming practices and collaboration, especially in larger projects.