Scribd
Upload
14 views12 pages

Css Vs Css3 Krish

Uploaded by

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

Css Vs Css3 Krish

Uploaded by

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

KRISH KUMAR GUPTA

KAUSHAL KUMAR GUPTA


PRATEEK KUMAR
TOPIC:
:

CSS VS CSS3
TABLE OF CONTENT
• INTRODUCTION TO CSS AND CSS3
• DIFFERENCES BETWEEN CSS AND CSS3
• ADVANCE FEATURES IN CSS3
• MEDIA QUERIES IN CSS3
• STYLING OPTION IN CSS3
• CONCLUSION
INTRODUCTION TO CSS AND CSS3

What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the
presentation of a document written in HTML or XML. It controls the layout,
colors, fonts, and overall appearance of web pages. CSS helps separate content
from design, making it easier to manage and update styles.

What is CSS3?
CSS3 (Cascading Style Sheets Level 3) is the latest version of CSS used for styling
web pages. It enhances the capabilities of CSS by introducing new features and
module to improve design and flexibility.
DIFFERENCES BETWEEN CSS AND CSS3
CSS .
1. Version and Release: Refers to the original specifications that were established in the late 1990s.
2. Transitions and Animations: Lacks built-in support for transitions and animations.
3. Web Fonts: Limited support for fonts, primarily relying on standard system fonts.
4. Selectors: Has basic selectors like element, class, and ID selectors.

CSS3 .
1. Version and Release: This latest version, introduced in 1999 and gradually developed with new
features added over time.
2. Transitions and Animations: Allows for smooth transitions and animations using properties like
transition and animation , enabling more dynamic interfaces.
3. Web Fonts: Supports @font-face, allowing the use of custom fonts and enhancing typography on
web pages.
4. Selectors: Introduces more advanced selectors (e.g., :nth-child(), :last-of-type, attribute selectors)
that allow for more precise targeting of elements.
ADAVANCE FEATURES IN CSS
1. Flexbox
Use display: flex to create flexible layouts.
-Align items horizotally/vertically with justify-content and align-items.
- Change direction with flex-direction.
2. CSS Grid:
-Use display: grid to create grid layouts.
- Define rows/columns with grid-template-rows and grid-template-column
- Place items with grid-row and grid-column.
3. Media Queries-
- Use @media to apply styles based on screen size, orientation, or resolution.
- Common breakpoints: max-width, min-width, orientation.
4. CSS Transitions-
-Use transition to animate property changes.
-Specify duration, timing function, and properties to transition.
5. CSS Animations:
- Use animation to define keyframe animations.
- Specify duration, timing function, and iteration count.
6. CSS Variables (Custom Properties):
- Define reusable values with --variable-name.
- Use var() to reference variables.
7. Pseudo-Elements:
- Use ::before and ::after to add content before/after elements.
- Style pseudo-elements like regular elements.
8. CSS Positioning:
- Use position to control element placement.
- Values: static, relative, absolute, fixed, sticky.
MEDIA QUERIES IN CSS3

Media queries in CSS3 are a way to apply different styles to your webpage based on the size or
features of the device it's being viewed on, like the screen width, height, orientation, or resolution.

SYNTAX
The general syntax for a media is:

@media media-type and


(media-features: value) {
/* CSS rules */
}

Common Media Types:


screen: used for computers screens, tablets,smartphones, etc…
print: Used for printers.
all: Default, applies to all media type
Common Media Features:
1. Width and Height Features
2. orientation
3. Resolution
4. Aspect Ratio
5. Color Features

Usage in Responsive Web Design:


Media queries are essential for making websites responsive, adapting to different screen sizes and
improving user experience across devices. By defining different style rules for various devices, media
queries help maintain layout consistency and usability.
CONCLUSION OF CSS AND CSS3

CSS (Cascading Style Sheets) is a language used to style and design web pages. It
helps to control how the content (like text, images, and buttons) looks on a
website. Without CSS, websites would be plain and hard to use.

CSS3 is the latest version of CSS, which brought many new features that make web
design easier and more exciting.

In short, CSS and CSS3 make websites look nice and work well across different
devices. With CSS3, designers can create modern, interactive, and responsive
websites easily. It makes web pages faster, more attractive, and easier to manage.

You might also like