What makes the things we look in the internet beautiful? CSS plays a big role in making the internet beautiful. But how? In this presentation, we will learn about artistic history of web, the present state and future. We will mostly talk about the current state of CSS and what might come next. Also, we will touch upon ethics of web designer and carbon footprint of websites.
10. Gurzu Confidential
1
0
What is CSS?
● CSS stands for Cascading Style Sheets.
● Define the look and formatting of web pages
● Used to describe how HTML elements should be displayed on a screen, paper, or other media.
● With CSS, web developers can control the layout, color, fonts, and other design elements of a web
page, separate from the content itself.
● This allows for greater flexibility and consistency across a website, making it easier to maintain and
update.
18. Gurzu Confidential
CSS has been used as a presentational layer styling language. It can be found used for:
● CSS for Websites
● CSS for Print
● CSS for Speech
● CSS for Digital Ads, like ads in youtube.
● Gives an engineer artistic skills
● Cross functional team
● CSS business market ( Eg: foundation, bootstrap, tailwind )
1
8
Significances of CSS
22. Gurzu Confidential
● Comparison function
● Multi-column Layout and Auto layout
● CSS Houdini
● CSS variables
● Container queries
● :has() selector
● @when / @else
● Accent-color
● and many other beautiful features
2
2
New features of CSS
27. Gurzu Confidential
• Preprocessors are software tools that extend the functionality of CSS by adding features that are not
available in standard CSS.
• Preprocessors allow developers to write CSS in a more organized and efficient way, by providing additional
functionality such as variables, mixins, functions, and nesting.
2
7
CSS pre processors
29. Gurzu Confidential
★ CSS frameworks are pre-written, standardized libraries of CSS code that provide a set of
predefined styles and layout templates that can be used to develop websites more efficiently.
★ CSS frameworks can save time and effort by providing a consistent set of styles and layouts
that can be easily customized and reused across different projects.
2
9
CSS frameworks
30. Gurzu Confidential
★ CSS architecture refers to how CSS code is organized, structured, and maintained in a project.
★ CSS architecture is important for creating scalable, maintainable, and reusable CSS code
BEM (Block Element Modifier)
SMACSS (Scalable and Modular Architecture for CSS)
OOCSS (Object-Oriented CSS)
Atomic Design
3
0
CSS Architectures