CSS Basic Syntax
CSS syntax is a set of rules that define how style rules are written. Each style rule consists of a selector and a declaration block. The selector targets an HTML element, and the declaration block contains one or more declarations.
Anatomy of a CSS Rule
A CSS rule consists of the following parts:
selector {
property: value;
/* Additional properties and values */
}
- Selector: Targets HTML elements.
- Property: The attribute you want to style.
- Value: The value assigned to the property.
Universal Selector
The universal selector ('*') selects all elements on a page.
* {
margin: 0;
padding: 0;
}
Type Selector or Element Selecter
Targets elements of a specific type.
h1 {
color: blue;
}
Class Selector
Targets elements with a specific class.
.button {
background-color: green;
}
ID Selector
Targets a specific element with a unique ID.
#header {
font-size: 24px;
}
Importance of Cascading
CSS rules are applied based on specificity. More specific rules take precedence.
#header {
color: red; /* More specific */
}
header {
color: blue;
}
Use '!important' to give a rule the highest priority.
p {
color: green !important;
}
Understanding CSS syntax is crucial for effective styling. By mastering selectors, declaration blocks, and the rules of specificity, you'll be able to create well-organized and efficient stylesheets. Experiment with different selectors, and always keep in mind the cascading nature of CSS. Happy Coding! ❤️