Cascading Style Sheet – CSS

Cascading Style Sheets, generally called CSS for short, is a language used to control the appearance and layout of websites. It works with HTML (HyperText Markup Language), which is responsible for the content and structure of a web page.

CSS separates the design and style from the web page content to make it easier for non-technical users to understand how the information will look.

CSS’s specific focus on presentation and flexibility allows web designers to create visually appealing and well-organized websites.

CSS History

Over the years, new versions of CSS improved its capabilities and made it easier for non-technical users to create visually appealing websites:

• CSS1 (1996): The first version of CSS provided basic styling options like font properties, colors, and simple layout control.
• CSS2 (1998): This version added more features like positioning, layering elements, and support for various media types (e.g., print and handheld devices).
• CSS3 (starting from 1999): CSS3 was divided into smaller, independent parts called modules to make it easier to add new features. Some notable features include advanced ways to select elements, animations, smooth transitions between styles, and new layout options like Flexbox (a flexible way to arrange elements on a page). 

Language Syntax

CSS uses a simple structure to specify how different parts of a website should look. It consists of three main components: selectors, properties, and values. Selectors identify the part of the website you want to style (e.g., headings, paragraphs), properties describe the aspect you want to change (e.g., color, font), and values specify the exact change (e.g., blue, large).

For example: h1 { color: blue; font-size: 24px; } In this example, ‘h1’ is the selector (headings), ‘color’ and ‘font-size’ are properties (attributes to change), and ‘blue’ and ’24px’ are the values (the desired appearance).  

Cascading 

The “cascading” in CSS means that the styling rules can come from different sources (e.g., external files, embedded in the HTML, or in-line with the content).

CSS has a system that determines the priority of these rules when they conflict, ensuring that the final appearance is consistent and predictable.  

Inheritance

In CSS, some style properties are automatically passed down from parent elements (e.g., a section) to their child elements (e.g., paragraphs within that section).

This inheritance helps maintain a consistent look throughout the website without specifying the same style for every element.  

Box Model

CSS uses a simple concept called the box model to manage the space and layout of elements on a web page.

A rectangular box represents each element so that you can control the spacing between these boxes using padding (space inside the box), borders (lines around the box), and margins (space outside the box).  

Responsive Design

CSS allows websites to adapt to different screen sizes and devices, ensuring they look good on smartphones, tablets, and desktop computers.

CSS uses specific rules called media queries, which apply different styles based on the characteristics of the device or browser.  

Conclusion

CSS is essential for creating beautiful and organized websites, even for non-technical users.

Separating design and style from content makes websites easier to maintain, more accessible, and better performing across different devices.

CSS in 100 seconds