Basic selectors¶
We can [select] elements on the page (introduction.md # syntax) in many ways. However, the following four selectors are most commonly used:
- HTML tag name
- grade
- object identifier
- attribute value ([attr = value])
Tag selector¶
CSS allows you to select an HTML tag directly as a * selector *. The page element is selected after the HTML tag name.
For example, for the paragraph below:
<p>Sample text in paragraph.</p>
If we want to add a CSS rule using a selector, the name of the tag should be given after the tag name in the CSS code, and then the properties with values in the curly brackets. The following rule turns all the <p>
tags red.
p {
color: red;
}
Class selector¶
Each HTML tag can have a class
attribute that takes the class name as its value. This class can have any name (chosen by us), e.g.:
<p class="some-paragraph">Sample text in paragraph.</p>
One tag can have many classes. In this case, they are separated by spaces, e.g.:
<p class="p1 p2">Paragraph with classes p1 and p2.</p>
Styling with class names is one of the most common ways to style HTML documents. We use this method when we want to give a given style to several elements, e.g.
<p class="text-elem">First paragraph.</p>
<p>Second paragraph.</p>
<span class="text-elem">First span.</span>
<span>Second span.</span>
In the situation as above, if we want to make the text red in the first paragraph and inside the first <span>
tag, we can give them a class with the same name, and then assign the appropriate CSS rule, i.e.:
.text-elem {
color: red;
}
In the CSS file, if we want to use a selector, after the class name, we first write dot and then immediately give the class name.
ID selector¶
Elements in an HTML document can also be selected by its identifier. Each element of an HTML document can have one, using the id
attribute with unique value within the page.
<p id="first-paragraph">Sample text in paragraph.</p>
To select a tag after the identifier, use the `# 'sign and then immediately enter the name of the identifier, e.g.:
#first-paragraph {
size: 2rem;
color: blue;
}
Attribute selector¶
Elements that contain an attribute with a specific value can also be styled. Consider an input
tag of the following form:
<input type="text">
If you want to style the above <input>
with the type
attribute with the valuetext
, you should indicate the element and then inside the [
]
characters the attribute with its value, e.g .:
input[type="text"] {
margin: 2px;
}
Combining selectors¶
CSS rules let you define a style for multiple selectors at once. For this purpose, selectors should be separated with commas, e.g .:
p, .button, #password-field, span {
color: red;
}
Order and priority¶
In some cases there might be multiple CSS sources provided. Each of them might define different set of rules for some HTML element. In such case styles are applied in following order:
- Inline styles, i.e. rules in
style
attribute. - Styles defined within HTML file, i.e. rules defined in
<style>
tag. - Styles defined in external stylesheets (i.e. files pointed in
<link>
tag andrel="stylesheet"
attribute. - Browser defaults.
CSS rules are usually defined in external stylesheets. However, such external file might define multiple rules which can point to the same element. In such case following priority is applied:
- element's identifier
- element's class
- tag name
For example, following element:
<p id="p1" class="blue-font">Hi</p>
defined in HTML file which is using following external CSS file:
#p1 {
color: red
}
.red-font {
color: blue
}
p {
color: yellow;
}
will use a red font.