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
identifiers in CSS
The secret power of CSS identifiers, the tiny names that give you full control over your styles! Identifiers are custom CSS names you create. CSS treats similar names with different cases as unique. Used in list counters like...
Images in CSS
Did you know CSS can create images without using a single file? CSS uses URLs to display images. [crayon-69012e150a0cd245327914-i/] serves images by device quality. Gradients generate images with colors only. Useful for backgrounds, designs, and...
inherit, initial, unset in CSS
Tiny CSS keywords can reset, copy, or undo styles with just one word. Keywords control styles without numbers inherit copies, initial resets, unset smart reset all applies to most properties, safer to limit revert returns to browser/user defaults...
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