Class and Id Selectors

Css Style Types

3. Selectors:

When we apply generic css to a tag, that tag has the properties given wherever it is used.

Using selectors, we can apply different styles to the same tag in different places.

In other words, we can apply the css selector we created to a tag wherever we want and not apply it where we don't want it. We can even apply different formatting to the same label in different places.

There are two types of selectors:

a. id Selectors:

• When defining, “ # ” is put in front of the name .
• When applying to any tag, the " id " parameter is used.
• Since the id parameter specifies the identity of the element it is used with, there may be problems when the same id selector is applied to more than one tag. For example, in the example below, the capitalized style template has been applied to both the b tag and the u tag. There will be no problems with formatting and the specified properties will be applied to both tags. However, if there is a programming language (such as Asp.Net, Php, Javascript) that uses these ids on the page, there will be problems because there will be two elements with the same name on the page.
• It does not change the tags to which it is not applied. For example, in the example below, a large-name style selector is applied to the first b tag and a small-name style selector is applied to the second b tag, while no css template is applied to the third b tag.

When the above page is run in the browser, it will look like this:

Computer

Computer

Computer

Computer

b. Class Selectors:

• When defining " . ” is put.
• While applying, the " class " parameter is used.
• It can be applied to more than one tag, it does not affect the tags to which it is not applied.

Creating a Tag-Specific Class

We can use the class selectors we created as .className for all tags. However, we can create only one tag-specific class if we want. E.g;

Properties written in this example will only be applied to p tags with the upper class applied. In other tags, the big class will not work.

Applying Multiple Classes to a Label

Multiple classes can be applied to an html tag with a space between them as shown above.

Note: If a tag is both formatted with the global style template and has an id or class selector applied, the properties in both templates are applied to the tag. If some properties are specified both in the global template and in the selector, the values ​​in class or id are valid.

EXERCISES