So far we’ve worked with HTML alone.
While HTML forms the backbone of web content, the need for customization and visual appeal leads us to Cascading Style Sheets (CSS). CSS is a web standard designed for styling HTML elements, allowing us to control the presentation and layout of our web pages.
CSS Rule Example
Here’s a basic example of a CSS rule that styles paragraph tags:
p {
color: red;
}
- Selector (
p): Identifies the HTML element to which the styling rules will be applied. - Declaration Block (
{ color: red; }): Contains one or more declarations. Each declaration comprises a property (color) and its corresponding value (red).
Applying CSS
CSS can be applied in various ways:
1. Inline Style
<p style="color: red;">This is a red paragraph.</p>2. Internal Style (Within HTML Document)
<head>
<style>
p {
color: red;
}
</style>
</head>
3. External Style (In Separate CSS File)
<head>
<link href="style.css" rel="stylesheet" />
</head>
Multiple CSS Rules
You can list multiple CSS rules to apply different styles to various elements:
p {
color: red;
}
a {
color: blue;
}
A selector can target one or more items:
p, a {
color: red;
}
Selectors and Spacing
Selectors can target one or more items, and spacing is insignificant in CSS:
p,a {
color: red;}
p,a { color: red;
}
Best Practices
- Each declaration in the declaration block should end with a semicolon (
;). - Proper indentation and spacing enhance readability but are not required by the browser.
Understanding these fundamental concepts equips you to enhance the visual aspects of your HTML documents using CSS. As you delve deeper, you’ll discover the versatility and power CSS brings to web development. Stay tuned for more insights into advanced CSS techniques and best practices.