A type selector is used to target HTML elements based on their tag names.
nanadwumor
- Type selector targets HTML elements based on tag names.
- Grouping selectors avoids repeating styles for similar elements.
- The universal selector (*) targets all elements in an HTML document.
- Grouping declarations combines multiple styles for one element.
- Ignoring semicolons in CSS can lead to parsing errors and unexpected behavior.
RECOMMENDED ARTICLES
The @import Element – When Is It Used In CSS?
Discover how the [crayon-6acedb8a75db5419261169-i/] rule lets you modularize and combine your CSS files like a pro! Function: The [crayon-6acedb8a75df9814830709-i/] rule loads one stylesheet inside another. Placement: It must always appear before...
The Style Element in CSS
Learn how to quickly add CSS directly to your HTML using the [crayon-6acedb8a76af1315280656-i/] element without any external files required! Definition: The [crayon-6acedb8a76b12498053513-i/] element adds embedded CSS directly inside an HTML...
Alternate Stylesheets in CSS
Discover how native HTML and CSS allow users to switch website themes effortlessly without JavaScript! Persistent Stylesheets: Have no [crayon-6acedb8a776d0840504188-i/] and are always active. Preferred Stylesheets: Have a...
A type selector is used to target HTML elements based on their tag names. For example, to apply styles to all <p> elements in a document, you would use this;
|
1 2 3 |
p { /* Styles here */ } |
This selector targets all <p> elements and applies the specified styles to them.
A type selector was previously called an element selector.
Example of a Stylesheet for HTML document is:
|
1 2 3 4 |
html {color: black;} h1 {color: red;} h2 {color: brown;} a{ decoration: none;} |
Grouping
If you want to apply the same style to another element, you can group the elements together without repeating the style.
For example, the following style is applied to the six heading tags.
|
1 2 3 4 5 6 |
h1{ font-family : Tahoma;} h2{ font-family : Tahoma;} h3{ font-family : Tahoma;} h4{ font-family : Tahoma;} h5{ font-family : Tahoma;} h6{ font-family : Tahoma;} |
Instead of repeating the CSS rule for each heading element, we could group all the headings to be affected by the style by separating them with a comma. That’s,
|
1 |
h1, h2, h3, h4, h5 , h6 { font-family : Tahoma;} |
Note that there should be comma separating the elements to tell the browser that more than one element is affected by the CSS style.
The Universal Selector
The universal selector is the asterisks(*) sign. This selector targets all the elements in the HTML document. For example,
|
1 2 3 |
*{ margin : 0 padding : 0; } |
sets the default margins and paddings of all the elements in your document to zero. Note that some elements have default margins and paddings.
Grouping Declarations
|
1 2 3 4 5 |
[/et_pb_text][et_pb_text ol_position="outside" module_id="public-keyword" _builder_version="4.22.1" _module_preset="default" text_font="Raleway||||||||" text_text_color="#000000" text_font_size="25px" text_line_height="1.4em" ul_font="Raleway||||||||" ul_line_height="1.6em" ol_font="Raleway||||||||" ol_line_height="1.5em" hover_enabled="0" text_font_size_tablet="23px" text_font_size_phone="20px" text_font_size_last_edited="on|desktop" inline_fonts="Courier Prime" global_colors_info="{}" theme_builder_area="post_content" sticky_enabled="0"]<p>can be grouped for the element <h1> as</p>[/et_pb_text][et_pb_text ol_position="outside" module_id="public-keyword" _builder_version="4.22.1" _module_preset="default" text_font="Raleway||||||||" text_text_color="#000000" text_font_size="25px" text_line_height="1.4em" ul_font="Raleway||||||||" ul_line_height="1.6em" ol_font="Raleway||||||||" ol_line_height="1.5em" hover_enabled="0" text_font_size_tablet="23px" text_font_size_phone="20px" text_font_size_last_edited="on|desktop" inline_fonts="Courier Prime" global_colors_info="{}" theme_builder_area="post_content" sticky_enabled="0"]<pre lang="css">h1{font-family : Tahoma; font-size : 30px; color : maroon; background-color : white; } |
This can also be written horizontally as
|
1 |
h1{font-family : Tahoma; font-size : 30px; color : maroon; background-color : white; } |
Ignoring the semicolons
The semicolons delimit the CSS rules. The semicolons are necessary when writing CSS code. If you ignore a semicolon, it makes it difficult to parse the CSS rule. Example,
|
1 2 3 4 5 |
h1{font-family : Tahoma; color : maroon font-size : 30px; background-color : white; } |
In the above, color : maroon does not end will a semicolon. Because of that, CSS parse the code as
|
1 |
color : maroon font-size : 30px; |
It ignores the whitespace and appends the succeeding code until it gets to the semicolon. Because font-size : 30px is not a valid value for the color property, the color of the text does not change at all.
Grouping Selectors and Declarations
You can group selectors and declarations in one declaration block. For example, the CSS below selects all the heading tags — h1, h2, h3, h4, h5, h6 — and applies the CSS rules to it.
|
1 2 3 4 5 6 7 8 |
h1, h2, h3, h4, h5, h6{ color : blue; background-color : yellow; font-family: Tahoma, sans serif; margin : 10px; padding : 5px; border : 1px solid black; } |
Recent Comments