Scribd
Upload
23 views23 pages

Final PPT2

Uploaded by

kdont1472
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views23 pages

Final PPT2

Uploaded by

kdont1472
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

“THERE IS NO SHAME IN TAKING LONGER,

YOU AREN’T BEHIND NOR YOUR TIMING IS WRONG.


YOUR PATH IS JUST DIFFERENT”
CSS -
Cascading
Style Sheets
CSS is a powerful language tool which used to
control the style and layout of HTML
documents. It allows developers to create
visually stunning and responsive web pages.
It was first proposed by Hakon William Lie in
1994 A.D.
Introduction to CSS
1 Style Your Pages2 Select Elements 3 Apply Styles
Learn how to add Discover the Understand how to
colors, fonts, and different ways to apply styles inline,
backgrounds to select and target internally, and
make your web HTML elements externally to your
pages visually using CSS HTML code.
appealing. selectors.
Before CSS
After CSS
CSS
Advantages
and
Disadvantages
Cascading Style Sheets (CSS) is a powerful
tool for web design, but it also has its pros
and cons. Let's explore the advantages and
disadvantages of CSS.
Advantages of CSS:
• Flexible and Efficient Styling
• Separation of Concerns (Structure vs.
Presentation)
• Consistent Design across Multiple Pages
• Easy Maintenance and Updates
Disadvantages
of CSS
• Browser Compatibility Challenges

• Learning Curve for Beginners


• Complexity with Large Projects

• Accessibility Concerns
Present Scenario

Modern Styles Responsive Design Accessible Design


CSS allows web CSS enables seamless CSS empowers
designers to create adaptation of web designers to create
visually stunning and content for various inclusive and accessible
responsive websites. devices and screen web experiences for all
sizes. users.
Future Trends and Possibilities
1 CSS Grid Evolution
Expect advancements in CSS grid to simplify complex
layouts and enable more creative web designs.

2 Variable Fonts
Variable fonts will revolutionize typography on the web,
providing greater flexibility and creativity in font usage.

3 Augmented Reality CSS


Imagine using CSS to create immersive AR experiences,
seamlessly blending digital content with the real world.
CSS Selectors

Tag Selectors Class Selectors ID Selectors


Select and apply styles Target and style Apply specific styles to
to HTML elements based elements that belong to elements with unique
on their tag names. a specific class with IDs for precise
unique styles. customization.
Box Model
Content

The actual content, such as text or


images, within an element.
Box Model
1 Content

The actual content, such as


Padding text or images, within an
element.

The space between the content and


the element's border.
Box Model
1 Content

The actual content, such as


Padding 2 text or images, within an
element.
The space between the
content and the element's
border. Border

The line that surrounds the content


and padding.
Box Model
1 Content

The actual content, such as


Padding 2 text or images, within an
element.
The space between the
content and the element's
border. 3 Border

The line that surrounds the content


and padding.
Margin
The space between the
element and other elements
Content

Padding

Margin Border
Time For Fun
Riddles:

1} Riddle: I speak without a mouth a


without ears. I have nobody, but I co
alive with the wind. What am I?

Answer :An echo


2} Riddle: : I fly without wings. I cry w
eyes. Wherever I go, darkness follows
What am I?

Answer :A cloud.
3} Riddle: : I can be cracked, made, t
and played. What am I?

Answer :A joke!
CSS Layout
Floats Flexbox
Create multi-column Design flexible and
layouts by floating responsive layouts
elements to the left or using the powerful
right. Flexbox model.

Grid
Create complex and versatile layouts with the CSS
Grid layout system.
CSS Units & Measurements
1 Pixels (px) 2 Percentages (%)
Relative to the Relative to the
screen's pixel parent element's
density, size, useful for
recommended for responsive web
fixed sizes. design.

3 Em
Relative to the font-size of the parent element,
allowing consistent scaling.
Conclusion
Despite its challenges, CSS remains a crucial tool for web designers, allowing them
to create visually appealing, responsive, and accessible websites. By staying
updated with emerging trends and technologies, CSS will continue to shape the
future of web design.

You might also like