Understanding CSS Rule
The declaration black contains one or more declaration Separated by semicolons(;)
Each decoration includes a css property name and a value, Separated by a colon.
Multiple css declarations are separated with. semicolons, and decorations, and declaration blocks are surrounded by curly braces.
Example:
P {
color: red;
Text-align: center
}
P: is a selector in css.
color is a property, and red is a property's value.text-align: is a property, and the center is the property's value.
(1) simple selector, Present by simple (P). P {…..}
(2) (ID) id Selector. Present by (#) #main {…..}
(3) Class selector. Present by (.) .main {…..}
(4) Universal Selector. Present by (*) * {…..}
(5) Grouping Selector. h1, P, h2, P that's by present.
h1 {….} |
P {….} | h1, p, h2, p { Methods }
h2 {….} |
P {….} |
A CSS rule is the fundamental
building block of CSS and consists of two main parts:
Selector
·
The
selector specifies the HTML element(s) that the rule will apply to.
For example:
h6 {
/* The 'h6' is the selector targeting all <h6> elements */
}
Declaration Block
· The declaration block contains one or more style declarations enclosed in curly braces { }.
· Each declaration is a combination of a property (what you want to style) and a value (how you want to style it), separated by a colon :.
· Multiple declarations are separated by semicolons;.
For
example:
h1 {
color: lightblue; /* Property: color, Value: lightblue */
font-size: 2em; /* Property: font-size, Value: 2em */
}
Example of a Complete CSS Rule:
p {
color: gray; /* Changes the text color of all <p> elements to gray */
line-height: 1.6; /* Sets the spacing between lines of text */
margin: 10px 0; /* Adds vertical spacing around the paragraph */
}
Explanation:
· Selector: p – Applies styles to all <p> elements (paragraphs) in the HTML document.
· Declaration Block: { color: gray; line-height: 1.6; margin: 10px 0; } – Contains the styles to be applied.
Key Points to Remember:
· Selectors: Identify the HTML element(s) to style (e.g., h1, p, .class, #id).
· Declaration Block: Defines the styles to apply, enclosed in { }.
· Properties: Define how you want to style an element, like its color, text size, or spacing.
· Values: Define the specifics of the styling (e.g., blue, 16px, 20px).
· Semicolon Usage: Each declaration ends with a semicolon ;, though the last declaration in the block can omit it (but it’s best practice to include it).
CSS Rule in Context:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Rule Example</title>
<style>
h1 {
color: darkblue; /* Applies a dark blue color to all <h1> elements */
text-align: center; /* Centers the heading text */
}
p {
font-size: 1.2em; /* Sets the paragraph text size */
color: gray; /* Changes paragraph text color to gray */
}
</style>
</head>
<body>
<h1>Understanding CSS Rules</h1>
<p>
This is an example of a CSS rule, which includes a selector and a set of style declarations.
</p>
</body>
</html>
This simple example shows how selectors and declaration blocks work together to style web content.