WikiGalaxy
CSS Flexbox
Introduction to Flexbox:
Flexbox is a CSS layout module designed to provide a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown.
Flex Container Properties:
The flex container properties include display: flex;, flex-direction, flex-wrap, justify-content, align-items, and align-content.
Flex Item Properties:
Flex item properties include order, flex-grow, flex-shrink, flex-basis, flex, and align-self.
Use Cases:
Flexbox is ideal for creating responsive layouts, aligning elements vertically and horizontally, and distributing space within a container.
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
}
Example Explanation:
In this example, the container is set to display as a flexbox. The items inside are centered both vertically and horizontally, with each item taking equal space.
Console Output:
[Item 1, Item 2, Item 3]
CSS Grid
Introduction to Grid:
CSS Grid Layout is a two-dimensional layout system for the web. It allows developers to create complex layouts on the web with ease.
Grid Container Properties:
Grid container properties include display: grid;, grid-template-columns, grid-template-rows, grid-gap, and justify-items.
Grid Item Properties:
Grid item properties include grid-column-start, grid-column-end, grid-row-start, and grid-row-end.
Use Cases:
Grid is perfect for creating complex web layouts, such as dashboards, image galleries, and more.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
background-color: #ccc;
}
Example Explanation:
This example demonstrates a grid layout with three equal columns and a gap of 10px between each grid item.
Console Output:
[Grid Item 1, Grid Item 2, Grid Item 3]
CSS Positioning
Introduction to Positioning:
CSS positioning allows you to control the placement of elements on a webpage. It includes static, relative, absolute, fixed, and sticky positioning.
Static Positioning:
Static is the default positioning for elements. Elements are positioned according to the normal flow of the document.
Relative Positioning:
Relative positioning allows you to position an element relative to its normal position.
Absolute Positioning:
Absolute positioning allows you to place an element at a specific point on the page, relative to the nearest positioned ancestor.
.box {
position: absolute;
top: 50px;
left: 100px;
}
Example Explanation:
In this example, the box is positioned 50px from the top and 100px from the left of its nearest positioned ancestor.
Console Output:
Positioned Box
CSS Transitions
Introduction to Transitions:
CSS transitions allow you to change property values smoothly (over a given duration).
Transition Properties:
The transition properties include transition-property, transition-duration, transition-timing-function, and transition-delay.
Use Cases:
Transitions are used to create smooth animations for hover effects, focus effects, and more.
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #555;
}
Example Explanation:
This example demonstrates a button that changes its background color smoothly over 0.3 seconds when hovered over.
Console Output:
Hover Effect Applied
CSS Animations
Introduction to Animations:
CSS animations make it possible to animate transitions from one CSS style configuration to another.
Keyframes:
Keyframes define the styles for the element at various points during the animation sequence.
Animation Properties:
Animation properties include animation-name, animation-duration, animation-timing-function, animation-delay, and animation-iteration-count.
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
.element {
animation: slidein 3s ease-in-out infinite;
}
Example Explanation:
This example shows an element sliding in from the left to the right over 3 seconds, repeating infinitely.
Console Output:
Animation Running
CSS Media Queries
Introduction to Media Queries:
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics (such as screen resolution or browser viewport width).
Syntax:
A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.
Use Cases:
Media queries are used for responsive design, allowing different styles for different devices and screen sizes.
@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
}
Example Explanation:
This media query changes the flex direction of the container to column when the screen width is 600px or less, making it more suitable for smaller screens.
Console Output:
Responsive Design Applied
CSS Variables
Introduction to Variables:
CSS variables, also known as custom properties, are entities defined by CSS authors that contain specific values to be reused throughout a document.
Defining Variables:
Variables are defined using the --variable-name syntax and accessed using the var(--variable-name) function.
Use Cases:
CSS variables are useful for maintaining consistent theming, reducing repetition, and simplifying updates.
:root {
--main-bg-color: #333;
}
.container {
background-color: var(--main-bg-color);
}
Example Explanation:
This example defines a CSS variable for the main background color and applies it to the container, allowing for easy color updates.
Console Output:
Variable Applied
CSS Pseudo-classes
Introduction to Pseudo-classes:
Pseudo-classes are keywords added to selectors that specify a special state of the selected elements.
Common Pseudo-classes:
Common pseudo-classes include :hover, :focus, :nth-child(), and :not().
Use Cases:
Pseudo-classes are used for styling elements based on their state, such as when they are hovered over, focused, or selected.
.button:hover {
background-color: #444;
}
Example Explanation:
This example changes the background color of a button when it is hovered over, providing visual feedback to the user.
Console Output:
Hover State Applied
CSS Pseudo-elements
Introduction to Pseudo-elements:
Pseudo-elements are used to style specified parts of an element, such as the first letter or line.
Common Pseudo-elements:
Common pseudo-elements include ::before, ::after, ::first-line, and ::first-letter.
Use Cases:
Pseudo-elements are used to add cosmetic content to an element, such as icons or decorative elements.
.element::before {
content: "★";
color: gold;
}
Example Explanation:
This example adds a gold star before the content of each element, enhancing its visual appeal.
Console Output:
Star Added
