WikiGalaxy
CSS Syntax Basics
Selectors
Selectors are used to target the HTML elements you want to style. They can be simple, like element names, or more complex, like class and ID selectors.
Properties
Properties are the aspects of the elements you want to change, such as color, font-size, margin, etc.
Values
Values are assigned to properties to define how they should be styled. For example, a color property might have a value of 'red'.
Declaration Block
The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
Ruleset
A ruleset consists of a selector and a declaration block. It defines the styling for the selected elements.
Comments
Comments are used to explain the code and are ignored by browsers. They are written inside /* */.
/* This is a comment */
body {
background-color: #f0f0f0;
color: #333;
}
h1 {
font-size: 2em;
color: #444;
}
Example Explanation
In the example above, the body selector targets the entire page, setting a light gray background and dark text color. The h1 selector targets all h1 elements, setting their font size and color.
Console Output:
No console output for CSS
CSS Selectors
Element Selector
Targets all elements of a specific type. For example, p will select all paragraph elements.
Class Selector
Targets elements with a specific class attribute. It is denoted by a period (.) followed by the class name.
ID Selector
Targets a single element with a specific id attribute. It is denoted by a hash (#) followed by the id name.
Universal Selector
Selects all elements in the document. It is represented by an asterisk (*).
Attribute Selector
Selects elements based on an attribute or attribute value. It is written inside square brackets.
/* Element Selector */
p {
color: blue;
}
/* Class Selector */
.intro {
font-weight: bold;
}
/* ID Selector */
#main-header {
text-align: center;
}
/* Universal Selector */
* {
box-sizing: border-box;
}
/* Attribute Selector */
input[type="text"] {
border: 1px solid #ccc;
}
Selector Explanation
The example demonstrates different types of selectors. The element selector styles all paragraphs, the class selector styles elements with the class "intro", and the ID selector targets the element with the id "main-header". The universal selector applies a box-sizing rule to all elements, and the attribute selector styles text input fields.
Console Output:
No console output for CSS
CSS Box Model
Content
The content area is where text and images appear. It is the innermost part of the box model.
Padding
Padding is the space between the content and the border. It is transparent and can be set using padding properties.
Border
The border surrounds the padding (if any) and content. It can be styled with border properties.
Margin
Margin is the outermost layer. It is the space outside the border and separates the element from other elements.
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
Box Model Explanation
In the example, the .box class sets a width for the content area, adds padding inside the border, defines a solid border, and sets a margin outside the border. This illustrates how the box model affects layout.
Console Output:
No console output for CSS
CSS Flexbox
Flex Container
A flex container is an element with display: flex. It enables flexible layouts by aligning its children in various ways.
Flex Items
Flex items are the children of a flex container. They can be arranged along the main axis and cross axis.
Main Axis
The main axis is the primary axis along which flex items are laid out. It can be horizontal or vertical.
Cross Axis
The cross axis is perpendicular to the main axis. It determines how flex items are aligned in the opposite direction.
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
padding: 10px;
}
Flexbox Explanation
In the example, the .container class is a flex container with items spaced evenly. The .item class makes each item flexible, allowing them to grow and shrink as needed.
Console Output:
No console output for CSS
CSS Grid
Grid Container
A grid container is an element with display: grid. It allows for complex layouts using rows and columns.
Grid Items
Grid items are the children of a grid container. They can be placed in specific grid areas.
Grid Lines
Grid lines are the dividing lines that create the structure of the grid. They can be referenced to position items.
Grid Areas
Grid areas are defined sections of the grid, created by combining multiple grid cells.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
text-align: center;
}
Grid Explanation
The example shows a grid container with three equal columns and a gap between items. Each grid item is styled with a background color and centered text.
Console Output:
No console output for CSS
CSS Positioning
Static Positioning
Static is the default positioning for elements. They are positioned according to the normal flow of the document.
Relative Positioning
Relative positioning allows elements to be moved relative to their normal position without affecting the layout of surrounding elements.
Absolute Positioning
Absolute positioning removes elements from the normal document flow and positions them relative to their nearest positioned ancestor.
Fixed Positioning
Fixed positioning positions elements relative to the viewport, meaning they stay in the same place even when the page is scrolled.
.static-element {
position: static;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 50px;
right: 30px;
}
.fixed-element {
position: fixed;
bottom: 0;
right: 0;
}
Positioning Explanation
The example illustrates different positioning methods. Static elements follow the normal flow, relative elements are offset from their original position, absolute elements are positioned relative to their ancestor, and fixed elements remain in place during scrolling.
Console Output:
No console output for CSS
CSS Transitions
Transition Property
The transition property is used to specify the name of the CSS property to which the transition is applied.
Transition Duration
The transition-duration property specifies how long the transition effect takes to complete.
Transition Timing Function
The transition-timing-function property specifies the speed curve of the transition effect.
Transition Delay
The transition-delay property specifies when the transition effect will start.
.button {
background-color: blue;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: green;
}
Transition Explanation
In the example, the .button class has a transition applied to the background-color property. When hovered over, the background color smoothly changes from blue to green over 0.5 seconds.
Console Output:
No console output for CSS
CSS Animations
Keyframes
Keyframes define the styles an element will have at certain times during the animation sequence.
Animation Name
The animation-name property specifies the name of the @keyframes animation.
Animation Duration
The animation-duration property specifies how long an animation should take to complete one cycle.
Animation Timing Function
The animation-timing-function property specifies the speed curve of the animation.
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
.slide {
animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in-out;
}
Animation Explanation
The example defines a slidein animation that moves an element from left to right over 3 seconds. The .slide class applies this animation, creating a smooth sliding effect.
Console Output:
No console output for CSS
CSS Media Queries
Responsive Design
Media queries are used to apply styles based on the conditions like screen size, resolution, or orientation, enabling responsive design.
Syntax
Media queries use the @media rule followed by a condition and a block of CSS rules to apply when the condition is met.
Breakpoints
Breakpoints are specific screen sizes at which the layout changes to provide an optimal user experience.
/* Default styles */
.container {
width: 100%;
}
/* Styles for screens larger than 600px */
@media (min-width: 600px) {
.container {
width: 80%;
}
}
/* Styles for screens larger than 900px */
@media (min-width: 900px) {
.container {
width: 60%;
}
}
Media Query Explanation
The example uses media queries to adjust the width of a .container element based on screen size. It starts at 100% width and reduces to 80% and 60% at larger breakpoints, respectively.
Console Output:
No console output for CSS
