Basic

1. CSS Coding
• An introduction to CSS (Cascading Style Sheets) for styling web pages.
• Prepared for: Students
• Presented by: Shuvojeet Biswas

2. What is CSS?
• • CSS stands for Cascading Style Sheets.
• • Used to style and layout HTML elements on web pages.
• • Separates content (HTML) from design (CSS).

3. Why Use CSS?
• • Enhances visual presentation of websites.
• • Controls layout, colors, fonts, spacing, and more.
• • Makes websites responsive and user-friendly.

4. CSS Syntax
• • CSS rules have a selector and a declaration block.
• • Example:
• selector { property: value; }

5. Selectors in CSS
• • Element selectors (e.g., h1, p)
• • Class selectors (e.g., .classname)
• • ID selectors (e.g., #idname)
• • Attribute and pseudo-class selectors

6. CSS Properties
• • Text properties: color, font-size, font-family
• • Box properties: width, height, margin, padding, border
• • Background properties: background-color, background-image
• • Layout properties: display, position, float

7. Colors in CSS
• • Named colors (e.g., red, blue)
• • Hex codes (e.g., #ff0000)
• • RGB/RGBA (e.g., rgb(255,0,0))
• • HSL/HSLA (e.g., hsl(0,100%,50%))

8. Fonts and Text
• • font-family, font-size, font-weight, font-style
• • text-align, text-decoration, line-height
• • Using web fonts with @font-face

9. Box Model
• • Every HTML element is a rectangular box.
• • Components: content, padding, border, margin
• • Important for spacing and layout.

10. Positioning
• • position: static, relative, absolute, fixed, sticky
• • top, right, bottom, left properties
• • z-index for stacking order

11. Flexbox
• • Flexible layout module for aligning items.
• • display: flex
• • justify-content, align-items, flex-direction
• • Makes responsive layouts easier

12. Grid Layout
• • CSS Grid is for two-dimensional layouts.
• • display: grid
• • grid-template-columns, grid-template-rows
• • grid-gap, place-items

13. Responsive Design
• • Makes websites look good on all devices.
• • Media queries: @media (max-width: 768px) { ... }
• • Flexible images, fluid layouts

14. CSS Animations &
Transitions
• • transition: smooth property changes
• • @keyframes for animations
• • transform: rotate, scale, translate

15. Conclusion
• • CSS is essential for modern web design.
• • Mastering selectors, properties, and layouts improves web development
skills.
• • Practice and experimentation are key to learning CSS.