What is CSS
CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for
describing the presentation of a document written in a markup language like HTML. CSS
helps the web developers to control the layout and other visual aspects of the web pages. CSS
plays a crucial role in modern web development by providing the tools necessary to create
visually appealing, accessible, and responsive websites.
CSS Versions
Since the inception of CSS, several versions have came into existence. Some of the notable
versions include:
CSS1 (Cascading Style Sheets Level1) - The initial version of CSS, released in
December 1996. CSS1 provided basic styling capabilities for HTML documents,
including properties for text, colors, backgrounds, margins, and borders.
CSS2 (Cascading Style Sheets Level2) - Released in May 1998, CSS2 introduced
new features such as positioning, z-index, media types, and more advanced selectors
like attribute selectors and child selectors.
CSS2.1 - The version 2.1, published as a W3C Recommendation in June 2011,
clarified and refined CSS2, addressing inconsistencies and ambiguities in the
specification. CSS2.1 focused on improving interoperability among web browsers.
CSS3 (Cascading Style Sheets Level 3) - CSS3 is a collection of modules that
extend the capabilities of CSS. It introduces numerous new features and
enhancements, including advanced selectors, multiple column layouts, animations,
transformations, gradients, shadows, and more.
CSS4 (Cascading Style Sheets Level 4) - CSS4 is an ongoing effort to extend CSS3
with new features and enhancements.
Each version of CSS builds upon the previous ones, adding new features and refining existing
capabilities to meet the evolving needs of web developers and designers. CSS is referred as
just CSS now, without a version number.
Types of CSS
1. Inline CSS: Inline CSS is applied directly to an HTML element using the style
attribute. It has the highest priority among the three methods.
Example
<p style="color: blue; font-size: 16px;">
This line is an inline-styled paragraph. </p>
2. Internal CSS: Internal CSS is defined within the <style> tag inside
the <head> section of an HTML document.
3. External CSS: External CSS is written in a separate .css file and linked to the HTML
document using the <link> tag. This is the recommended method for large projects as
it improves maintainability.
Advantages of Using CSS
Responsive design - CSS offers features like media queries that enable developers to
create responsive layouts that adapt to different screen sizes and devices, ensuring a
consistent user experience.
Flexibility and Control - CSS provides precise control over the presentation
of HTML elements, allowing developers to customize layout, typography, colors, and
other visual properties.
Consistency and Reusability - Developers can ensure consistency across the entire
website, by defining styles in a central CSS file. Styles can be reused across multiple
pages, reducing redundancy and making updates easier.
Search Engine Optimization (SEO) - CSS can be used to structure content in a way
that improves search engine visibility.
Ease of Maintenance - Centralized CSS files make it easier to maintain and update
styles across a website. Changes can be applied globally, ensuring uniformity and
reducing the risk of inconsistencies.
Faster Page Loading - External CSS files can be cached by browsers, resulting in
faster page loading times for subsequent visits to a website. This caching mechanism
reduces server load and bandwidth consumption.
Components of CSS
CSS works by associating rules with HTML elements. A CSS rule contains two main
parts:
a selector which specifies the HTML element(s) to style.
a declaration block which contains one or more declarations separated by
semicolons.
Each declaration includes a property name and a value, specifying the aspect of the
element's presentation to control.