Course Content
CSS Fundamentals
CSS Fundamentals
Selectors for Styling HTML Elements
To apply styles effectively, you need to understand CSS selectors, as they determine the HTML elements targeted for styling.
Tag selector
One way to apply styles is by using the element tag itself. Styles specified using a tag selector will affect all elements with that tag. This is useful for applying consistent styling to elements across the website.
Syntax: In the HTML, we have a p
element:
To apply styles in the CSS file, use the tag name (p
) as the selector:
Let's run the following example and check how it works.
index
index
index
Class selector
A more precise way to style elements is by using class selectors. These selectors target elements with specific class names, allowing us to apply styles selectively.
Syntax: In the HTML, add a class
attribute with a meaningful class name:
In the CSS, reference the class name with a period (.
) to define the styles:
Let's run the following example and observe that only elements with the text
class will receive these styles, giving you finer control over your styling.
index
index
index
Class composition
We can also combine multiple classes on a single element, making class composition a powerful tool for applying styles - separate class names with spaces in the class
attribute.
Syntax: In the HTML, add multiple class names to an element:
In the CSS, define styles for each class separately:
Let's run the following example and see how it works. Elements with both the text
and font
classes will receive the specified styles.
index
index
index
ID selector
While it's possible to use the id
selector for styling, it's generally not recommended. IDs should be unique on a page, limiting their reuse.
Syntax: In the HTML, add an id
attribute to an element:
In the CSS, reference the ID with a hashtag (#
) to define the styles:
Let's run the following example and observe how it works. This example applies styles to the unique element with the title
ID.
index
index
index
Thanks for your feedback!