Mastering CSS: The Foundation of Web Design by Infinite Web Solutions.pptx
- 1. Introduction to CSS The Basics of Creating Web Pages InfiniteWebSolutions 1
- 2. I W S Introduction to CSS What is CSS? • Cascading Style Sheets • CSS is used to control the style and layout of web pages. InfiniteWebSolutions 2 Without CSS With CSS
- 3. I W S Purpose • Separation of Concerns: Keeps HTML structure and presentation separate. • Consistency: Ensures a consistent look across multiple pages. • Efficiency: Reuse styles across multiple pages or elements. InfiniteWebSolutions 3
- 4. I W S How CSS Works? • Selectors: Target HTML elements. • Properties: Define what aspect of the element to style. • Values: Specify the style details. Example: InfiniteWebSolutions 4
- 5. I W S CSS Syntax • Selector: HTML element to style. • Declaration Block: Contains one or more declarations. • Declaration: A property and value pair. Example: InfiniteWebSolutions 5
- 6. I W S Types of CSS Inline CSS: • Styles applied directly within an HTML element. InfiniteWebSolutions 6
- 7. I W S Internal CSS: • Styles defined within a <style> tag in the HTML document. InfiniteWebSolutions 7
- 8. I W S External CSS: • Styles defined in an external .css file linked to the HTML document. InfiniteWebSolutions 8 Index.html Style.css
- 9. I W S CSS Selectors Basic Selectors: • Element, ID, and Class. InfiniteWebSolutions 9 Index.html Style.css
- 10. I W S Combinator Selectors: • Descendant, Child, Adjacent Sibling, General Sibling. InfiniteWebSolutions 10 Index.html Style.css
- 11. I W S Pseudo-class Selectors: • Hover, Active, First-child, etc. InfiniteWebSolutions 11 Index.html Style.css
- 14. I W S CSS Positioning CSS positioning controls how elements are placed and layered on a web page. • Static: Default positioning; elements are placed according to the normal document flow. InfiniteWebSolutions 14
- 15. I W S • Relative: Elements are positioned relative to their normal position, with top, right, bottom, and left offsets. InfiniteWebSolutions 15
- 16. I W S • Absolute: Elements are positioned relative to their nearest positioned ancestor or the initial containing block if none exists. InfiniteWebSolutions 16
- 17. I W S • Fixed: Elements are positioned relative to the viewport, remaining in the same place even when scrolling. InfiniteWebSolutions 17
- 18. I W S Sticky: Elements are positioned based on the user's scroll position, toggling between relative and fixed depending on the scroll. InfiniteWebSolutions 18
- 19. I W S CSS Flexbox CSS Flexbox (Flexible Box Layout) is a layout model that allows you to design complex layouts with ease by aligning and distributing space among items in a container, even when their size is unknown or dynamic. Features: • Flexible Sizing: Allows items to grow and shrink proportionally based on available space, making it easy to create responsive layouts. • Alignment and Justification: Provides powerful alignment options, such as justify-content and align-items, to control the distribution and alignment of items within a container. • Order Control: Enables reordering of items with the order property without changing the HTML structure. InfiniteWebSolutions 19
- 21. I W S Centering Items Horizontally and Vertically InfiniteWebSolutions 21
- 23. I W S Align Items to the End InfiniteWebSolutions 23
- 25. I W S CSS Grid CSS Grid is a layout system that enables precise and flexible arrangement of elements in a two-dimensional grid of rows and columns. Features: • Two-Dimensional Layout: Allows simultaneous control over both rows and columns, providing precise placement of items in a grid. • Grid Areas: Enables defining named areas within the grid, making layout management and item placement straightforward. • Flexible Sizing: Supports flexible and adaptive sizing of grid items using units like fractions (`fr`), and responsive design with media queries. InfiniteWebSolutions 25
- 26. I W S Grid Types • Basic Grid Container: Defines a simple grid layout with equal-width columns. InfiniteWebSolutions 26
- 27. I W S • Explicit Grid: Creates a grid with fixed-size columns. InfiniteWebSolutions 27
- 28. I W S • Fractional Units: Uses fractional units (fr) for flexible column widths. InfiniteWebSolutions 28
- 29. I W S • Named Areas: Assigns specific grid areas with names for layout. InfiniteWebSolutions 29
- 30. I W S Responsive Design Responsive design with CSS adjusts layout and content to fit different screen sizes and devices using techniques like media queries and flexible grids. Media Queries: • @media (max-width: 600px) { ... } Flexible Layouts and Units: • Percentages, em, rem InfiniteWebSolutions 30
- 31. I W S View Port • viewport is the visible area of a web page on a device screen. • It represents the portion of the web page currently visible to the user. • CSS provides units like vw (viewport width) and vh (viewport height) to help create responsive designs that adapt to different screen sizes. InfiniteWebSolutions 31
- 35. I W S Animations and Transitions Animations: • Keyframes to define animation • @keyframes name { ... } InfiniteWebSolutions 35
- 36. I W S Transitions: • Smooth change from one style to another • transition: property duration; InfiniteWebSolutions 36
- 37. I W S CSS Frameworks CSS frameworks are pre-built libraries that provide standardized styles and components to accelerate web development and ensure consistency. Popular CSS frameworks: • Bootstrap • Tailwind CSS Benefits: • Speed and Efficiency • Consistency • Responsiveness InfiniteWebSolutions 37
- 38. I W S Best Practices • Maintainability: Use clear, meaningful class names. • Reusability: Use classes and avoid inline styles. • Performance: • Minimize CSS, use shorthand properties, etc. InfiniteWebSolutions 38
- 39. I W S Conclusion • Recap key points about CSS. • Practice by building small projects, explore advanced topics like animations. InfiniteWebSolutions 39
- 40. I W S Q&A Open the Floor for Questions InfiniteWebSolutions 40