CSS means Cascading Style Sheets. It is a language used to style your HTML (Hyper Text Markup Language) page. CSS is the backbone of web designs, allowing developers to control the visual presentation of their websites.
There are three types of CSS. They are:
Inline CSS
Internal CSS
External CSS
- Inline CSS:
This is the CSS or style applied to a unique element in your HTML document.
- Internal CSS:
This defines a style for a single HTML page. It is usually defined in an HTML page's headsection within a style element.
- External CSS:
This styles multiple HTML pages with a single style sheet linked to your HTML page with a linktag. The CSS rules are contained in a separate CSS file and must be linked to the HTML document to see the desired results.
When we have multiple styles being applied to the same element which is causing a conflict, that’s where what we know as cascading comes in.
CSS CASCADE: The term cascade in CSS refers to the process of resolving conflicts when multiple CSS rules are applied to the same HTML element. When multiple styles conflict, the cascade determines which style takes precedence.
Your browser will always pick the last CSS rule declared.
SELECTORS: They select HTML elements based on the tag names, classes, ID’s, attributes and relationships with other elements. Here are some common types of selectors;
Element selector:
Targets HTML element based on their tag names, for example: p, span, div, h1 etc.Class Selector:
Targets elements with a specific class attribute. To select element with a specific class attribute, you put a period (.), followed by the class name given to the element.
The class selector has a higher importance than the element name selector.ID Selector:
Targets a single element with a specific ID attribute.
It is unique within a page. It is more important than any other selector and it overrides any other CSS rule you apply to the specific element if you have applied a CSS rule to the ID attribute.
To select an element with a specific id, you write a hash (#) character, followed by the id of the element.Universal Selector:
This selector selects all HTML elements to apply CSS rules.
Example,
*{
background-color:grey;
font-size:16px;
color:green;
}
SPECIFICITY: It determines which CSS rule is applied to an element when multiple rules have conflicting selectors, it also determines which element is most specific using a scoring program. This is because you can have the same element with the same properties but different values. The one with the higher specificity wins.
When comparing specificity, the selector with the highest specificity wins regardless of the order in which the rules are defined in the stylesheet. Incase specificity is equal, the last rule defines that precedence due to the cascade.
By understanding the concept of cascade, selector and specificity, web developers can create more efficient and maintainable CSS stylesheets, ensuring consistent and visually appealing designs across different web pages and devices.
Top comments (0)