CSS Selectors
Link Element:
The '<link>' element is used in the HTML head section to connect an external stylesheet to the HTML document. It requires the 'href' attribute to specify the path to the stylesheet file, the 'rel' attribute to indicate the relationship (usually "stylesheet" for CSS), and the 'type' attribute to define the MIME type of the linked file.
Example:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Write CSS in Separate Files:
Storing CSS in separate files improves code organization and maintainability. Create a file (e.g., "styles.css") and place your CSS rules there, then link it in your HTML using the '<link>' element.
Example:
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
Write CSS in HTML File:
You can also write CSS directly within an HTML file using the '<style>' element within the '<head>' section. This is useful for small-scale styling.
Example:
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
Inline Styles:
Inline styles are added directly to HTML elements using the 'style' attribute. While not recommended for extensive styling, they provide quick one-off styling changes.
Example:
<p style="color: green;">This is a green paragraph.</p>CSS Type Selectors:
Type selectors target HTML elements by their tag name and apply styling to all instances of that tag.
Example:
p {
font-size: 16px;
}
CSS Class Selectors:
Class selectors target elements with specific class attributes, allowing you to apply the same styling to multiple elements.
Example:
.button {
background-color: blue;
color: white;
}
CSS ID Selectors:
ID selectors target a single element with a specific 'id' attribute.
Example:
#header {
font-size: 24px;
}
HTML Attributes with Multiple Values:
HTML attributes like 'class' can have multiple values separated by spaces, allowing an element to be associated with multiple styles.
Example:
<div class="box red-border"></div>Class and ID Selectors:
You can use class and ID selectors together to create more specific styling rules.
Example:
#main-content .highlight {
background-color: yellow;
}
Groups of CSS Selectors:
You can apply the same styling to multiple selectors by separating them with commas.
Example:
h2, h3 {
font-weight: bold;
}
Selector Chaining:
Selectors can be chained together to target specific nested elements.
Example:
article p {
margin-left: 20px; }
Selector Specificity:
Specificity determines which CSS rule takes precedence when multiple rules conflict.
Example:
/* Specificity: 0,0,0,1 */
p {
color: red;
}
/* Specificity: 0,0,1,0 */
#main-content {
color: blue;
}
/* Specificity: 0,1,0,0 */
.button {
color: green;
}
/* Specificity: 1,0,0,0 */
h1 {
color: orange;
}
CSS Descendant Selector:
The descendant selector targets elements that are descendants of a specified element.
Example:
ul li {
list-style: disc;
}