CSS 101
Make things beautiful
- Pratik Sangami

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential
CASCADING STYLE SHEETS ( CSS )

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.

Gurzu Confidential
How your website is displayed

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential

Gurzu Confidential
How familiar are you with CSS?

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

Gurzu Confidential

Gurzu Confidential
Present state of CSS

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

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

Gurzu Confidential
Power of CSS

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

Gurzu Confidential
Florida Election 2000

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

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

Gurzu Confidential

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

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

Gurzu Confidential

Gurzu Confidential
( OG: Web Designer
)

Gurzu Confidential
Ethics as a Web Engineer

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

Gurzu Confidential
v
Lets calculate carbon footprint of some sites

Gurzu Confidential
Future of CSS ?

Any Questions ??