CSS Selectors and Inclusion Methods Explained with Examples
Understanding CSS Selectors
In CSS, a selector defines which HTML element(s) a style applies to. Below are the main types of selectors, with explanation and examples:
- Type / Element Selector - Applies a style directly to all instances of a given HTML element.
Example:
<p>This is a paragraph styled using the type selector.</p>p { color: red; }
CSS rules cascade from top to bottom. The last defined style usually overrides earlier ones.
- ID Selector - Targets an element by its unique id attribute using a hash (#) symbol.
Example:
<p id="main">This is a paragraph styled using an ID selector.</p>#main { color: blue; }
-
Class Selector - Targets elements by their class attribute using a dot or a period sign.
Multiple classes can be applied to the same element.
Example:
<p class="boys girls">This paragraph is styled using class selectors.</p>.boys { color: white; } .girls { background-color: blue; }
-
Descendant Selector - Applies styles to elements nested inside another element.
Example:
<p>This contains a <a href="#">link styled with a descendant selector</a></p>p a { color: maroon; }
-
Universal Selector - Targets all elements on the page using an asterisk (*).
Example:
<body>The universal selector affects all elements.</body>* { margin: 0; }
-
Child Selector - Styles a direct child of an element using the > symbol.
Example:
<ul><li>This item is styled with a child selector.</li></ul>ul > li { color: olive; }
-
Group Selector - Applies the same style to multiple selectors at once by separating them with commas.
Example:
<h2 class="post-title">Group Selector</h2> <p id="main">Styled paragraph with <a href="#">link</a></p>.post-title, #main, a { color: #000; }
The most commonly used CSS selectors are type, class, and id. Always end each declaration with a semicolon (;) to ensure proper styling.
How to Include CSS in Your Webpage
There are four main ways to include CSS in a webpage:
-
External CSS - It is defined outside of the html and reference using the link tag.
Example:
<link href="style.css" type="text/css" rel="stylesheet" media="screen">- href: path to the CSS file
- type: type of document (text/css)
- rel: relationship to the HTML file (stylesheet)
- media: defines media type (screen, print, etc.) - Internal CSS - Defined inside the <head> of your HTML. Overrides external CSS.
Example:
<style type="text/css"> h1 { color: #ff0000; } </style> -
Inline CSS - Uses the style attribute directly on an element. Takes the highest priority.
Example:
<span style="color: #ff0000;">This is inline styled text.</span> -
@import Rule - Allows importing external CSS inside a <style> block.
Example:
<style type="text/css"> @import "style.css"; </style>
Post a Comment