WikiGalaxy
CSS Flexbox
Introduction to Flexbox:
Flexbox is a powerful layout module that allows you to design complex layouts with ease. It provides a more efficient way to lay out, align, and distribute space among items in a container.
Flex Container Properties:
The flex container properties allow you to control the layout of the flex items. Some key properties include display: flex;, flex-direction, and justify-content.
Flex Item Properties:
Flex items can be individually controlled using properties like flex-grow, flex-shrink, and flex-basis.
Aligning Items:
Alignment of items is made simple with properties like align-items, align-self, and align-content.
Responsive Design with Flexbox:
Flexbox is inherently responsive, adapting to different screen sizes without the need for media queries.
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}
Example Explanation:
In this example, the container is set to display as a flexbox. The items within the container are arranged in a row, spaced evenly, and aligned at the center. Each item grows to fill the available space but does not shrink below 200px.
Console Output:
Flexbox container with items aligned and spaced.
CSS Grid
Introduction to Grid:
CSS Grid Layout is a two-dimensional layout system that provides a way to create grid-based user interfaces with rows and columns.
Grid Container Properties:
You can define the grid structure using properties like display: grid;, grid-template-columns, and grid-template-rows.
Grid Item Placement:
Grid items can be placed precisely using properties such as grid-column-start, grid-column-end, grid-row-start, and grid-row-end.
Responsive Grids:
CSS Grid makes it easy to create responsive designs by adjusting the grid layout with media queries or using auto-fit and auto-fill.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #4CAF50;
padding: 20px;
text-align: center;
}
Example Explanation:
This example creates a grid container with three equal columns and a gap of 10px between them. Each grid item is styled with a background color and centered text.
Console Output:
Grid layout with evenly spaced items.
CSS Animations
Understanding Animations:
CSS animations allow the animation of most HTML elements without using JavaScript or Flash. They consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style.
Keyframes:
Keyframes define the changes in the animation. You can specify styles for keyframes using the @keyframes rule.
Animation Properties:
You can control the timing, duration, and other aspects of the animation using properties like animation-name, animation-duration, animation-timing-function, and animation-delay.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Example Explanation:
This example demonstrates a simple animation where a div element changes its background color from red to yellow over a duration of 4 seconds.
Console Output:
Animated div changing colors.
CSS Transitions
What are Transitions?
CSS transitions allow you to change property values smoothly (over a given duration). They are useful for creating simple animations and effects without the need for keyframes.
Transition Properties:
You can specify which properties should transition and how by using properties like transition-property, transition-duration, transition-timing-function, and transition-delay.
button {
background-color: blue;
transition: background-color 2s;
}
button:hover {
background-color: green;
}
Example Explanation:
This example shows a button that changes its background color from blue to green over 2 seconds when hovered over, providing a smooth transition effect.
Console Output:
Button with smooth color transition.
CSS Variables
Introduction to Variables:
CSS variables, also known as custom properties, allow you to store values you want to reuse throughout your CSS. They make it easier to manage and maintain your stylesheets.
Defining Variables:
Variables are defined using the syntax --variable-name: value; and are accessed using the var(--variable-name) function.
Using Variables:
You can use variables anywhere in your CSS where you would use a value, such as color, size, or any other CSS property.
:root {
--main-bg-color: lightblue;
--main-text-color: darkblue;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
Example Explanation:
In this example, two CSS variables are defined for the main background color and text color. These variables are then used in the body selector to apply consistent styling.
Console Output:
Styled page using CSS variables.
CSS Pseudo-classes
What are Pseudo-classes?
Pseudo-classes are keywords added to selectors that specify a special state of the selected elements. They allow you to style elements based on their state or position in the DOM.
Common Pseudo-classes:
Some common pseudo-classes include :hover, :focus, :nth-child(), and :first-child.
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
}
Example Explanation:
This example styles anchor tags to have a black color and no underline by default. When hovered over, the color changes to red, indicating an interactive element.
Console Output:
Interactive links with hover effect.
CSS Selectors
Understanding Selectors:
CSS selectors are patterns used to select and style elements. They are the first part of a CSS rule and determine which elements the rule applies to.
Types of Selectors:
There are several types of selectors, including element selectors, class selectors, ID selectors, attribute selectors, and more.
/* Element Selector */
p {
color: blue;
}
/* Class Selector */
.intro {
font-weight: bold;
}
/* ID Selector */
#main-heading {
font-size: 2em;
}
Example Explanation:
This example demonstrates different types of selectors: an element selector for paragraphs, a class selector for elements with the class "intro", and an ID selector for the element with the ID "main-heading".
Console Output:
Styled elements using various selectors.
CSS Box Model
What is the Box Model?
The CSS box model is a fundamental concept that describes the rectangular boxes generated for elements in the document tree and consists of margins, borders, padding, and the actual content.
Box Model Properties:
Key properties include margin, border, padding, and width/height which determine the space around, between, and inside elements.
.box {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Example Explanation:
This example defines a box with a specified width and height, padding, border, and margin. The total size of the box is calculated by adding the padding, border, and margin to the width and height.
Console Output:
Box model with defined dimensions and spacing.
