CSS – Cascading Style Sheets
In 1994, while working with Tim Berners-Lee, the creator of the World Wide Web, Hkon Wium Lie made the initial proposal for CSS, which stands for "Cascading Style Sheets." Since there was no proper way to style pages back then, HTML was only used to structure content. As a result, all of the pages looked very plain. The World Wide Web Consortium (W3C) officially released CSS in December 1996 as CSS Level 1. It became CSS2 in 1998 and the more powerful CSS3 in the 2000s and beyond, introducing animations, flexbox, grid layout, shadows, and media queries.
HTML Style Sheets
In HTML, a style sheet is used to control the appearance of elements on a webpage, such as colors, fonts, spacing, and layout. CSS (Cascading Style Sheets) is the most common method for styling HTML.
What is CSS?
The style sheet language CSS is used to control how HTML documents look and feel. Without changing the HTML structure, you can change colors, fonts, spacing, layouts, animations, and more. Websites can be made to be responsive to various devices, consistent across multiple pages, and visually appealing using CSS.
Why "Cascading"?
The term "cascading" refers to the ability for styles to be applied in a priority order, with the most specific rule taking precedence (internal styles, external style sheets, browser defaults, and inline styles). CSS is made powerful and flexible by this system for controlling complicated designs.
There are three main ways to apply CSS in HTML:
Inline CSS
Because you use the style attribute to write the CSS code inside the tag, inline CSS is the easiest way to style an HTML element. This approach is useful for making rapid styling adjustments to a single element without affecting the page's other elements. Without altering the rest of the website, you could, for instance, make one paragraph red or increase the font size of a specific heading. However, because it combines HTML and CSS, inline CSS is not recommended for large projects because it makes the code harder to update and maintain in the future.
Internal CSS
An internal CSS is defined in the <head> section of an HTML page, within a <style> element. This method allows you to apply styles to the entire page without needing a separate CSS file. All the styling rules are in one place, which makes it easier to manage than inline CSS when working on a single page. The styles described here, on the other hand, are only applicable to that particular HTML file and cannot be used on other pages unless manually copied, which can be inefficient for larger websites.
External CSS
External CSS is the most professional and widely used method for styling websites. In this approach, you write all your CSS rules in a separate .css file and link it to your HTML document using the <link> tag in the <head> section. This lets you reuse the same CSS file across multiple pages of a website, keeps styling separate, and makes your HTML clean. External CSS is easier to maintain because if you change a style, you only need to update one file, and the change will affect every page that is linked to it. This makes external CSS easier to maintain.