CSS Structure and Selectors
In CSS, selectors can set HTML tags as id, class, attribute, name, etc. in an html page. It allows us to apply styles by choosing them according to their shapes.
Tag Selector in CSS
This selector is used by typing the name of the label directly. You write the name of the tag you want to choose and style. For example;
p {
font-size: 15px;
}
We selected the paragraph tag and applied the style.
id Selector in CSS
It is used to select tags with id attribute in HTML tags. If you remember, we mentioned in HTML lessons, that tags defined with id can only be defined once throughout the page. Here we select these tags with the id selector.First, let's see a sample label;
<h1 id="title"> Title </h1>
I have a tag with id attribute title value. When using the id selector in CSS, the id value is prefixed with a # sign. In other words, the style is applied by selecting it as follows;
#title {
color: green;
}
In addition, it can be specified specifically on the label before the # sign. Normally this is not needed because the id attribute does not care about tags. So we can't give an id to a tag and the same id to a p tag. However, to briefly show how it will be;
h1#title {
color: green;
}
id values can never start with a number. it also cannot contain any special characters except underscore (_) and hyphen (-). Also, the id value is case sensitive. So #test and #test are not the same.
Class Selector in CSS
It is used to select tags with class attribute in HTML tags. To give an example tag with class attribute;
<p class="text-center"> .. </p>
<div class="text-center"> .. </div>
The goal here is to apply a style by collectively selecting elements with the same common class attributes. For example, in p and div tags, their classes are equal to text-center. The common goal here is to style your posts to center them. per attribute value when selecting tags with class attribute. dot is placed. So it is selected as follows;
.text-center {
text-align: center;
}
This way it will select and style all tags with text-center value. Like the id selector, I can specify a tag name before the period. For example, if we want to adapt it only to those whose class attribute is text-center in p tags;
p.text-center {
text-align: center;
}
Class values can never begin with a number. it also cannot contain any special characters except underscore (_) and hyphen (-). Also, the class attribute is case sensitive. So .test and .test are not the same.
Selecting as a Group in CSS
We can group while selecting tags with the same style values. For example;
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
h3 {
text-align: center;
color: red;
}
Here 3 labels have the same style. Then we can write it in one line, separated by commas.
h1, h2, h3 {
text-align: center;
color: red;
}
You can use not only tags but also id and class.