Зміст курсу
Основи CSS
Основи CSS
Селектори для Стилізації HTML Елементів
Щоб ефективно застосовувати стилі, потрібно розуміти селектори CSS, оскільки саме вони визначають елементи HTML, до яких потрібно застосувати стилі.
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:
html
To apply styles in the CSS file, use the tag name (p) as the selector:
css
Let's run the following example and check how it works.
index.html
index.css
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:
html
In the CSS, reference the class name with a period (.) to define the styles:
css
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.html
index.css
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:
html
In the CSS, define styles for each class separately:
css
Let's run the following example and see how it works. Elements with both the text and font classes will receive the specified styles.
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:
html
In the CSS, define styles for each class separately:
css
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.html
index.css
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:
html
In the CSS, reference the ID with a hashtag (#) to define the styles:
css
Let's run the following example and observe how it works. This example applies styles to the unique element with the title ID.
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:
html
In the CSS, reference the ID with a hashtag (#) to define the styles:
css
Let's run the following example and observe how it works. This example applies styles to the unique element with the title ID.
index.html
index.css
The id="title" attribute uniquely identifies the <p> element, and the styles defined with the #title selector apply only to that specific element.
1. How can we target and apply styles to the HTML element with the id="navigation-link"?
2. How can we target and apply styles to the HTML element with the id="navigation-link"?
Дякуємо за ваш відгук!
