A CSS block refers to a section of CSS code that styles a specific HTML element or group of elements. It consists of a selector and a set of properties enclosed in curly braces {}. Each property is defined by a name and a value, separated by a colon :, and properties are separated by semicolons ;.
Structure of CSS block
selector { property: value; property: value; }
Let's say we have a basic HTML page with a <p> tag (a paragraph), and we want to change its color and font size using CSS.
p {
color: darkblue; /* This changes the text color to dark blue */
font-size: 28px; /* This sets the font size to 18 pixels */
}
1. p: This is the selector. It targets all <p> elements in the HTML.
2. { ... }: These curly braces enclose the CSS rules (properties and values) for the selected elements.
3. color: blue;: This is a property and value pair. color is the property that sets the text color, and blue is the value.
4. font-size: 28px;: Another property-value pair. font-size sets the size of the text to 28 pixels.
cssBlock.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Block Example</title> <style> p { color: darkblue; /* This changes the text color to blue */ font-size: 28px; /* This sets the font size to 18 pixels */ } </style> </head> <body> <p>This is a paragraph.</p> </body> </html>
Open cssBlock in browser, you can see below screen.
No comments:
Post a Comment