- Introduction to CSS
- What is CSS
- Understanding the Basics : Syntax, Selectors, and Declarations
- Using Inline, Internal, and External Techniques to Integrate CSS into HTML
- Complete working code of using CSS into HTML
- The Box Model
- Components of the CSS Box Model
- Managing Layout with the CSS Box Model
- Box Model Properties
- Styling Text and Fonts
- Color, alignment, decoration, and transformation of text
- Font properties : Family, size, weight, and style.
- Web-Safe Fonts and Custom Fonts Integration
- Web-Safe Fonts
- Custom Fonts Integration
- Code Sample : Using Web-Safe and Custom Fonts
- CSS Layout Technique
- Static Positioning
- Relative positioning
- Absolute Positioning
- Fixed Positioning
- Sticky Positioning
- Complete working code for positioning elements
- Flexbox : Basics, alignment, and building a layout with Flexbox
- Flexbox Basics
- Alignment in Flexbox
- Building a Layout with Flexbox
- CSS Grid : Grid basics, creating layouts with grid-template columns, rows, and areas
- Grid Basics
- Creating Layouts with Grid Template Columns and Rows
- Creating Layouts with Grid Areas
- Display properties and Box manipulation
- Display Properties
- Box Manipulation
- Code Sample : Display Properties and Box Manipulation
- CSS Layout Technique : Positioning Elements
- Transitions and Animations
- CSS Transitions : Property, duration, timing function.
- Code for Transition
- CSS Animations : Keyframes and Animation Properties
- Code for Animation
- Advanced Styling with CSS
- Pseudo-classes and Pseudo-elements
- Styling Lists, Tables, and Forms
- Creating and Styling Navigation Bars and Dropdown Menus
- Visual Enhancements with CSS
- Backgrounds: Colors, Images, and Gradients
- Borders and Box Shadows for Depth and Emphasis
- Using Transitions and Animations for Dynamic Effects
- Responsive Web Design
- Media Queries for Device-Specific Styling
- Mobile-First versus Desktop-First Strategies
- Responsive Images and Videos for Faster Page Loads
- Transforms and Effects
- 2D and 3D Transforms : Rotate, Scale, Translate, and Skew
- Visual Effects: Box-Shadow, Text-Shadow, Blend Modes
- Advanced CSS Features
- CSS Variables for Maintainable Style Sheets
- Advanced Selectors and Combinator Usage
- Advanced Layout Techniques in CSS
- Multi-column Layouts, Flexbox, and Grid Advanced Techniques
- Overlapping and Layering with z-index
- SASS : Syntactically Awesome Style Sheets
- Introduction to SASS/SCSS : Variables, Nesting, and Mixins
- Organizing CSS with Partials and Imports
- Advanced SASS : Functions, Loops, and Conditionals
- Functions
- Loops
- Conitionals
- Working with SVGs and Icons in Web Design
- Implementing Scalable Vector Graphics and Icons in Web Design
- Styling and Animating SVGs with CSS
- CSS Best Practices and Optimization
- Writing Efficient, Maintainable, and Scalable CSS
- CSS Methodologies like BEM for Organizing CSS
- Performance Optimization : Minification, Concatenation, and CSS Sprites
- CSS Sample Project
- Create a home page with HTML and CSS
- HTML Structure
- CSS Styling
- Conclusion
Complete working code for positioning elements
Complete working code for positioning elements
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Positioning Example</title> <style> /* Styles for the static positioning */ .static-box { width: 200px; height: 50px; background-color: lightblue; margin: 10px; } /* Container to demonstrate relative and absolute positioning */ .container { position: relative; width: 300px; height: 200px; background-color: lightgreen; margin: 10px; } /* Relative positioning */ .relative-box { position: relative; left: 20px; top: 10px; width: 200px; height: 50px; background-color: lightcoral; } /* Absolute positioning */ .absolute-box { position: absolute; top: 50px; right: 50px; width: 100px; height: 50px; background-color: lightsalmon; } /* Fixed positioning */ .fixed-box { position: fixed; bottom: 10px; right: 10px; width: 200px; height: 50px; background-color: lightgoldenrodyellow; } /* Sticky positioning */ .sticky-box { position: sticky; top: 0; width: 100%; background-color: lightpink; padding: 10px; border: 1px solid black; } /* Additional content to demonstrate scrolling */ p { margin: 10px; height: 800px; /* Large height to enable scrolling */ } </style> </head> <body> <!-- Static positioning element --> <div class="static-box">This box is statically positioned.</div> <!-- Container for relative and absolute positioned elements --> <div class="container"> <div class="relative-box">This box is relatively positioned.</div> <div class="absolute-box">This box is absolutely positioned.</div> </div> <!-- Fixed positioning element --> <div class="fixed-box">This box is fixedly positioned.</div> <!-- Sticky positioning element --> <div class="sticky-box">This box will stick to the top of the page when you scroll.</div> <!-- Additional content to demonstrate scrolling effect --> <p>Scroll down the page to see the sticky and fixed position effects.</p> </body> </html> |
Explanation of the Code
Static Positioning: Shown as a pale blue box that flows across documents as usual.
Relative Positioning: A bright coral box in a green container that has been shifted from its usual location is used to demonstrate this technique.
The concept of absolute positioning is exemplified by using a light salmon box that is placed exactly within the green container.
Fixed Positioning: Shown by a bright yellow box with a goldenrod color that remains fixed in the viewport's lower right corner.
Sticky Positioning: Shown by a bright pink box at the top that becomes fixed as you scroll past its original place.
ChatGPT
Python
PowerShell
PL/SQL
Spring Boot
CSS
