Scribd
Upload
11 views

Presentation - CSS and Framework

Uploaded by

khushioopsjava
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Presentation - CSS and Framework

Uploaded by

khushioopsjava
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS + Framework

Prepared By :
Batch A2 , G8
Arpan Vyas 0801IT221037
Atharv Gupta 0801IT221043
What is CSS ?
CSS stands for Cascading Style Sheets.

CSS is a stylesheet language used to describe the presentation of a


document written in HTML or XML.

• Cascading: Refers to the procedure that determines which style will apply
to a certain section if multiple style rules exist.
• Style: Describes how you want a certain part of your page to look. You
can set aspects like color, margins, fonts, etc., for elements like tables,
paragraphs, and headings.
• Sheets: Acts as templates or a set of rules for determining how the
webpage will look.
Why CSS ?
•Separation of Content and Design: CSS allows you to separate the structure (HTML)
from the presentation (CSS), making code cleaner and easier to maintain.

•Improved Website Performance: CSS reduces HTML file size by eliminating inline
styling, enabling faster page loads.

•Reusability: A single CSS file can style multiple web pages, reducing duplication and
effort.

•Consistency: CSS ensures uniform styling across all web pages of a website.

•Ease of Maintenance: Updating a single CSS file applies changes globally, saving time
and effort.
Why CSS ?
•Accessibility: CSS enables responsive designs that adapt to various screen sizes and
devices, improving user experience.

•Rich Styling Options: CSS offers advanced styling features, such as gradients,
animations, and transitions, enhancing visual appeal.

•Cross-Browser Compatibility: CSS enables websites to appear consistent across


different web browsers.

•Improved Readability: External and internal stylesheets make HTML code less
cluttered and more readable.

•Customizability: CSS allows for easy personalization of themes, layouts, and visual
elements.
CSS Syntax
•Selector:
Specifies the HTML element(s) you want to style
(e.g., h1, p, .className, #idName).

•Property:
Defines the style attribute you want to change
(e.g., color, font-size, margin).

•Value:
Specifies the value of the property (e.g., red,
16px, 10px).
CSS Styles Decalaration
•Inline CSS: This is used to apply styles directly within an HTML element
using the style attribute. It's written within the tag itself.
CSS Styles Decalaration
•Internal CSS: This is written inside the <style> tag within the <head>
section of an HTML document. It affects only the elements within that
specific page.
CSS Styles Decalaration
•External CSS: This involves creating a separate .css file and linking it to
your HTML document using the <link> tag in the <head> section. It
allows you to apply the same styles across multiple web pages.
CSS Selectors
CSS Selectors - Examples
CSS Properties – Text and Font
CSS Properties – Box Model
CSS Properties - Background
CSS Properties – Flexbox and Layout
CSS Properties – Styling and Effects
What is a CSS Framework ?
A CSS framework is a pre-written library that simplifies and speeds up
the process of web design by providing pre-defined styles and layouts.

It includes ready-to-use CSS classes and components to create


responsive and visually appealing websites.

Purpose of CSS Frameworks:


•To streamline web development by offering a consistent structure and
design pattern.
•To reduce repetitive coding tasks for common UI elements like
buttons, grids, navigation bars, and forms.
Why CSS Framework ?
•Saves time and effort with predefined styles and components.

•Ensures responsive design for various screen sizes.

•Provides consistency across web pages.

•Handles cross-browser compatibility efficiently.

•Offers rich UI components like buttons, forms, and navigation bars.

•Comes with extensive documentation and community support.

•Allows customization and scalability for projects.


Popular CSS Frameworks
Bootstrap
•Easy to use, with a mobile-first design.
•Includes a responsive grid system, pre-designed components, and utilities.

Tailwind CSS
•Utility-first framework for maximum customizability.
•Provides low-level utility classes for designing without writing custom CSS.

Foundation
•Advanced framework with a flexible grid system.
•Includes built-in accessibility features and responsive design tools.
Popular CSS Frameworks
Bulma
•Lightweight and based on Flexbox.
•Simple to use and easy to customize for responsive layouts.

Materialize
•Based on Google's Material Design principles.
•Offers components and animations that follow Material Design guidelines.

Semantic UI
•Provides a user-friendly, human-readable syntax.
•Focuses on simplicity, with lots of themes and components.

UIKit
•Lightweight and modular, suitable for building fast and accessible websites.
•Offers a variety of components and JavaScript tools for interactions.
CSS Frameworks - Comparison
Bootstrap : Overview
A popular, open-source CSS framework for building responsive, mobile-first websites.

Key Features:
•Predefined grid system and components (buttons, navbars, forms, modals, etc.).
•Built-in JavaScript plugins (e.g., carousels, tooltips).
•Mobile-first design approach for responsiveness.
•Extensive documentation and community support.

Pros:
•Easy to use for beginners.
•Fast prototyping with ready-to-use components.
•Cross-browser compatibility.

Cons:
•Can be bulky if only specific components are needed.
•Websites may look similar unless heavily customized.
Tailwind CSS : Overview
A utility-first CSS framework for creating custom designs without writing custom CSS.

Key Features:
•Provides utility classes for styling (e.g., padding, margin, colors, typography).
•No predefined components; you build your own UI with utility classes.
•Highly customizable with a config file for defining colors, fonts, and breakpoints.

Pros:
•Full control over the design and layout.
•Small file size if unused utilities are purged.
•Encourages consistency across the design.

Cons:
•Steeper learning curve, especially for beginners.
•Can result in lengthy HTML code with many utility classes.
How to choose a CSS Framework ?
•Project Requirements: Match the framework to your project’s needs (e.g., small
site vs. large app).
•Learning Curve: Choose based on your team's skill level (e.g., Bootstrap for
beginners, Tailwind for advanced users).
•Customization: Consider how much customization is needed (e.g., Tailwind for
high customization).
•Community Support: Opt for frameworks with active support and good
documentation.
•Performance: Consider the framework's size and performance impact.
•Compatibility: Ensure compatibility with your tech stack (e.g., React, Vue).
•Browser Support: Ensure good cross-browser compatibility.
•Responsiveness: Check for built-in responsive design features.
Thank You !!!
Prepared By :
Arpan Vyas 0801IT221037
Atharv Gupta 0801IT221043

You might also like