properties of CSS
Here are some of the most commonly used properties in CSS, along with a brief explanation of what they do:
1. background :
This property sets the background color, image, and other related properties of an element.
background-position: center center;
2. color :
This property sets the color of the text content of an element.
This property sets the font family used for the text content of an element.
This property sets the size of the text content of an element.
font-size: 16px ;
This property sets the horizontal alignment of the text content of an element.
text-align: center ;
This property sets the space between the content of an element and its border.
This property sets the space between an element's border and the neighboring elements.
This property sets the border style, width, and color of an element.
border : 2px solid #333;
This property sets how an element should be displayed on the page.
This property sets the horizontal alignment of an element with respect to its container.
These are just a few of the many properties available in CSS.
Cascade and specificity :
Cascade and specificity are two important concepts in CSS that determine how conflicting styles are resolved.
The cascade refers to the process by which styles are applied to an element based on their origin and importance. CSS styles can be defined in multiple places, such as in an external stylesheet, a
<style> element in the HTML document, or directly in the HTML tag using the
style attribute. The cascade determines which styles take precedence when there are conflicting styles. The order of precedence is as follows:
- Browser default styles
- External stylesheets
<style>elements in the HTML document
styleattributes on HTML tags
If two or more styles conflict, the style with the highest precedence will be applied.
Specificity refers to the way that conflicting styles are resolved when they have the same level of importance. Each CSS selector has a specificity score, which is calculated based on the following factors:
- IDs in the selector (e.g.
#my-element) – score = 100
- Classes, attributes, and pseudo-classes in the selector (e.g.
:hover) – score = 10
- Elements and pseudo-elements in the selector (e.g.
::before) – score = 1
The specificity score is calculated for each selector in a style rule, and the rule with the highest specificity score is applied.
For example, consider the following CSS code:
If an element has both an
my-element and a
my-class, the text color will be red because the
#my-element selector has a higher specificity score than the
.my-class selector. If an element has no
class but is a
div element, the text color will be green because the
div selector has a higher specificity score than the element selector.
Understanding cascade and specificity is important for writing maintainable and predictable CSS code. By following best practices for these concepts, you can avoid conflicts and ensure that your styles are applied consistently across your website or application.
Inheritance is an important feature of CSS that allows styles to be passed down from parent elements to their children. In other words, properties that are set on a parent element can be inherited by its child elements.
When a property is marked as inheritable, its value is automatically passed down to all child elements of the parent element, unless they have explicitly defined a value for that property. This can save time and effort in writing CSS, as it eliminates the need to define the same styles for each individual element.
Some of the properties that can be inherited in CSS include:
- Font properties:
- Text properties:
- List properties:
- Table properties:
Here is an example of how inheritance works:
font-family: Arial, sans-serif; color: #333;
In this code, the
color properties are set on the
body element. Since these properties are marked as inheritable, all child elements of the
body element, such as the
p elements, will inherit these styles. This means that the
p elements will have the same
color as the
body element by default.
In addition to inherited properties, CSS also provides the
inherit keyword, which can be used to explicitly inherit a property from the parent element. For example, if you wanted to set the
font-family of an element to be the same as its parent element, you could use the following code:
This will set the
font-family of the
h2 element to be the same as its parent element.
It’s important to note that not all properties are inheritable, and even for those that are, inheritance doesn’t always work the way you might expect. For example, the
background-color property is not inheritable, so you would need to set this property explicitly on each individual element if you want it to have a background color.
Overall, inheritance is a powerful feature of CSS that can save time and make your code more efficient. By understanding which properties are inheritable and how to use the
inherit keyword, you can take advantage of inheritance to create more consistent and predictable styles for your website or application.
click here to go back