What is CSS ?

CSS stands for Cascading Style Sheets and plays an important role in providing the styles to the HTML elements, which helps to make web pages presentable. 

CSS is essential for providing distinctive styles to elements and ensuring responsiveness across diverse screen sizes. Inline CSS commands the highest priority in styling. Web browsers implement the default styles to elements, which can be customized using CSS.

Significance of Cascade

The Cascade is an algorithm that defines combining the property values that originate from different sources. The significance of Cascade is to prioritize & resolve the conflict issues for determining the order of the final styling that will be applied to the HTML element if there exist multiple stylings(cascade layer) for the same element. This helps to set the value for a property on an element according to precedence when declared.

CSS Integration Techniques

The following techniques can be used to include the CSS in the HTML File:

Techniques	Descriptions	Syntax
Internal CSS	Internal CSS can be written in the HTML document, defining the style element wrapped inside the head element, and giving properties and their corresponding values inside the style element.	<style> h1 {    color: crimson; } </style>
External CSS	External CSS is a separate stylesheet created with a .css extension and links the sheet to the HTML document.	<link rel=”stylesheet” href=”style.css”>
Inline CSS	Inline Styling is a styling implemented to the specific element using the style attribute and gives properties and their corresponding values according to the requirement.	<p style=”color:green;”> GeeksforGeeks </p>

How to Style Elements in CSS?

There are 2 approaches through which the HTML Elements can be styled interactively:

CSS Selectors

A CSS selector selects the HTML element(s) for styling purposes. CSS selectors select HTML elements according to their id, class, type, attribute, etc. The HTML Elements can be styled either as a single or grouped with the help of the following CSS Selectors, depending on the styled-type used:

Selectors	Descriptions	Syntax
Element Selector	It is used to select elements inside the elements.	element element {      /* CSS Property */ }
CSS id Selector	This selector is used to set the style of the given id.	#id {    // CSS property }
Class Selector	It is used to select all elements which belong to a particular class attribute.	.class {    // CSS property }
Universal(*) Selector	It is used to select all the elements in an HTML document.	* {    // CSS property }
Attribute Selector	This Selector is used to select an element with some specific attribute or attribute value.	element[attribute] {  // Property
Pseudo-classes Selector	This Selector is used to define the special state of an element.	selector: pseudo-class{    property: value; }
Pseudo Elements Selector	The pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements.	selector::pseudo-element {     property: value; }

CSS Frameworks

CSS Framework is a pre-prepared, ready-to-use library that contains different styles and templates that help to standardize the steps for designing and developing, along with enhancing the process of designing and styling web pages by providing the leverage to expedite the Developers. There are various frameworks available that can be used to style the HTML Elements in an interactive manner.

Frameworks	Descriptions
Bootstrap 5	Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic website layouts and web applications.
Tailwind CSS	Tailwind CSS is a Utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need.
Foundation CSS	A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device.
Pure CSS	Pure CSS is an open-source CSS framework for building responsive websites and web applications.

CSS Specificity

CSS Specificity of the Selectors can be determined when more than one set of CSS rules applies to the same element, the browser will have to decide which specific set will be applied to the element. The Styles can be cascaded into new styles with the following priority if there exist different styles for HTML elements:

• The Inline styles will be the 1st Priority, 
• The External and internal styling will be the next
•  Browser default will be the highest Priority
• The ! important has the highest priority, it overrides all the other styles.

CSS Properties

CSS Property is used to set the style or assign behavior of HTML elements. The CSS property contains two parts, property_name, and property_value. The property_value is enclosed within double quotes (” “).

Syntax

property: "value";

CSS offers a wide range of properties and values to give you more flexibility to style, animate the elements, and make pleasing web pages. The values are the settings assigned to the corresponding property, and it is assigned to keep in mind how HTML elements should be styled, and their values determine the specific characteristics or behaviors applied to those elements.

Example: The below example illustrates the basic implementation of CSS with all three methods.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                  initial-scale=1.0">
    <title>What is CSS</title>
    <link rel="stylesheet"
          href="style.css">
    <style>
        .Internal_styling {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div style="color: green;
                font-size: 20px;">
        The CSS styling using Inline CSS
    </div>
    <div class="Internal_styling">
        The CSS styling using Internal CSS
    </div>
    <div id="Ext_sty">
        The CSS styling using External CSS
    </div>
</body>

</html>

CSS

#Ext_sty{
    color: blueviolet;
    font-size: 20px;
}

Output:

Advantages and Disadvantages

Advantages of CSS

• Responsive Design: CSS facilitates media queries for making web pages responsive and works well on all screen sizes.
• Animations and Transitions: CSS provides a feature of animation that makes the website more attractive.
• Reusability: If the project is large-scale we can reuse the stylesheet and we can also create custom utility classes and CSS variables that can be used many times

Disadvantages of CSS

• Learning Curve: Understanding the box model, positioning, and responsive design concepts can be complex, and mastering advanced CSS features like animations requires time and practice.
• Performance Impact: Large files with multiple levels of nesting and intricate selectors, can impact page loading times. Optimization of code is required.
• Debugging: It takes a lot of time to debug the CSS code due to overlapping styles.