CSS, which stands for Cascading Style Sheets, is a styling language used to describe the presentation of a document written in HTML or XML. It's the technology that brings visual appeal and layout structure to web pages, separating the design from the content.
CSS serves several crucial purposes in web development:
Styling: It controls the visual appearance of web elements, including colors, fonts, spacing, and more.
Layout: CSS enables responsive design, allowing content to adapt to different screen sizes and devices.
Consistency: It ensures a uniform look across multiple pages of a website.
Efficiency: CSS allows for centralised styling, reducing redundancy in code.
Animation: It can create simple animations and transitions without the need for JavaScript.
CSS is used to enhance the visual presentation of web content. It works in conjunction with:
HTML for structure and content
JavaScript for dynamic behavior and interactivity
SVG for scalable vector graphics
Together, these technologies create engaging and responsive web experiences.
CSS was proposed by Håkon Wium Lie in 1994 while working at CERN. The need arose from the desire to have more control over web document presentation as the Web was growing rapidly.
Key milestones in CSS's history:
1996: CSS 1 becomes an official W3C Recommendation
1998: CSS 2 is released, adding support for different media types
2011: CSS 3 modules begin to be standardized separately
2023: Many CSS 4 modules are in development or implemented
Håkon Wium Lie, inventor of CSS.
https://www.wiumlie.no/en
When rendering a web page with CSS, a browser follows these steps:
Parsing: The browser parses the HTML to create the Document Object Model (DOM).
CSS Loading: It loads all associated CSS files and style elements.
Cascading: The browser determines which CSS rules apply to each element, considering specificity and inheritance.
Calculating Values: It computes the final values for each property on every element.
Layout: The browser calculates the position and size of each element on the page.
Painting: It draws the elements with their styles applied.
Compositing: The browser combines the painted layers into the final image displayed on screen.
This process is part of the browser's rendering engine and happens in conjunction with HTML parsing and JavaScript execution.