The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
Let us look at an example:
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
If there are two or more CSS rules that point to the same element, the selector with the highest specificity will “win”, and its style declaration will be applied to that HTML element.
Think of specificity as a hierarchy that determines which style declaration is ultimately applied to an element.
Look at the following examples:
Here, we have used the “p” element as selector, and specified a red color for this element. Result: The text will be red:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
CSS has several different units for expressing a length.
Many CSS properties take “length” values, such as width, margin, padding, font-size, etc.
Length is a number followed by a length unit, such as 10px, 2em, etc.
Set different length values, using px (pixels):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
CSS counters are “variables” maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.
CSS counters are like “variables”. The variable values can be incremented by CSS rules (which will track how many times they are used).
To work with CSS counters we will use the following properties:
counter-reset – Creates or resets a countercounter-increment – Increments a counter valuecontent – Inserts generated contentcounter() or counters() function – Adds the value of a counter to an elementTo use a CSS counter, it must first be created with counter-reset.
The following example creates a counter for the page (in the body selector), then increments the counter value for each <h2> element and adds “Section <value of the counter>:” to the beginning of each <h2> element:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Use the width property to determine the width of the input field:
input {
width: 100%;
}
The example above applies to all <input> elements. If you only want to style a specific input type, you can use attribute selectors:
input[type=text] – will only select text fieldsinput[type=password] – will only select password fieldsinput[type=number] – will only select number fieldsIt is possible to style HTML elements that have specific attributes or attribute values.
The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
a[target] {
background-color: yellow;
}
