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.

1. CSS 101
Make things beautiful
- Pratik Sangami

2. Gurzu Confidential

3. Gurzu Confidential

4. Gurzu Confidential

5. Gurzu Confidential

6. Gurzu Confidential

7. Gurzu Confidential

8. Gurzu Confidential

9. Gurzu Confidential
CASCADING STYLE SHEETS ( CSS )

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.

11. Gurzu Confidential
How your website is displayed

12. Gurzu Confidential

13. Gurzu Confidential

14. Gurzu Confidential

15. Gurzu Confidential

16. Gurzu Confidential

17. Gurzu Confidential
How familiar are you with CSS?

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

19. Gurzu Confidential

20. Gurzu Confidential
Present state of CSS

21. Gurzu Confidential
• Selectors
• Responsive Design
• Transitions and Animations
• Box Model
• Fonts
• Layout
• Colors
2
1
CSS #3

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

23. Gurzu Confidential
Power of CSS

24. Gurzu Confidential
• SEO
• Performance of app/site. Can it be affected by CSS ?
• UI/UX
• Example on: National Election Florida (2000)
2
4
CSS

25. Gurzu Confidential
Florida Election 2000

26. Gurzu Confidential
SASS, SCSS, LESS, Styled Components, Tailwind, Bootstrap

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

28. Gurzu Confidential

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

31. Gurzu Confidential

32. Gurzu Confidential
( OG: Web Designer
)

33. Gurzu Confidential
Ethics as a Web Engineer

34. Gurzu Confidential
● End user-centric ethics
○ Visually impaired users
○ Usage devices
● Environment centric ethics
○ Carbon footprint
3
4
Web ethics

35. Gurzu Confidential
v
Lets calculate carbon footprint of some sites

36. Gurzu Confidential
Future of CSS ?

37. Any Questions ??