Scribd
Upload
4 views

Unit5 CSS Presentation

CSS is a stylesheet language used to style HTML documents, controlling layout, colors, and fonts through Inline, Internal, and External methods. It includes various selectors and properties for text, boxes, and backgrounds, as well as features for animations and responsive design using media queries. Overall, CSS enhances web page appearance and user experience.

Uploaded by

sonali bhabad
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
4 views

Unit5 CSS Presentation

CSS is a stylesheet language used to style HTML documents, controlling layout, colors, and fonts through Inline, Internal, and External methods. It includes various selectors and properties for text, boxes, and backgrounds, as well as features for animations and responsive design using media queries. Overall, CSS enhances web page appearance and user experience.

Uploaded by

sonali bhabad
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/ 15

Cascading Style

Sheets (CSS)
Unit V - Web Page Designing
Presented by: S.C.Bhabad
Introduction to CSS
 CSS is used to style HTML documents.
 It controls layout, colors, fonts, and more.
 Three types: Inline, Internal, and External CSS.
Types of CSS
 Inline CSS: Applied directly to elements using the style
attribute.
 Internal CSS: Defined within a <style> tag in the
<head>.
 External CSS: Stored in a separate .css file and linked to
HTML.
Example: Inline CSS
 Example:
 <p style='color: blue; font-size: 20px;'>Hello,
World!</p>
 Output: A blue, large-sized text.
Example: Internal CSS
 Example:
 <style> p { color: red; font-size: 18px; } </style>
 <p>Hello, World!</p>
 Output: A red text styled with internal CSS.
Example: External CSS
 Example:
 styles.css:
 p { color: green; font-size: 16px; }
 HTML File:
 <link rel='stylesheet' href='styles.css'>
 Output: A green-colored paragraph.
CSS Selectors
 Class Selector: .classname {property: value;}
 ID Selector: #idname {property: value;}
 Element Selector: p {color: blue;}
CSS Properties
 Font Properties: font-size, font-family, font-weight.
 Text Properties: text-align, text-decoration.
 Box Properties: margin, padding, border.
 Color & Background: color, background-color, gradients.
Example: CSS Text Effects
 Example:
 h1 { text-shadow: 2px 2px 5px gray; }
 <h1>Shadow Text</h1>
 Output: Text with a shadow effect.
CSS 2D & 3D Transforms
 2D Transform: rotate, scale, translate.
 3D Transform: perspective, rotateX, rotateY.
Example: CSS Animations
 Example:
 @keyframes example { from { background-color: red; }
to { background-color: yellow; } }
 div { animation-name: example; animation-duration: 4s;
}
 Output: A div changing colors from red to yellow.
CSS Responsive Design
 Uses media queries to adapt layouts for different
screens.
 Viewport settings ensure proper scaling.
 Grid and Flexbox are used for layout.
Example: Media Queries
 Example:
 @media screen and (max-width: 600px) { body
{ background-color: lightblue; } }
 Output: Changes background color when screen width is
small.
Conclusion
 CSS enhances the appearance of web pages.
 Responsive design makes websites adaptable.
 Animations and effects improve user experience.
Thank You!
 Questions?

You might also like