Scribd
Upload
197 views

Complete CSS Documentation

This is a Complete CSS Documentation for Beginners

Uploaded by

triumphantogie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
197 views

Complete CSS Documentation

This is a Complete CSS Documentation for Beginners

Uploaded by

triumphantogie
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Complete CSS Documentation

1. Introduction to CSS

What is CSS?

​ CSS (Cascading Style Sheets) is a stylesheet language used to control the layout
and presentation of web pages written in HTML or XML.
​ It separates content from design, allowing for easier maintenance and styling.

Key Concepts

​ Cascading: Styles can cascade from one style sheet to another, allowing for
multiple sources of styling.
​ Selector: A pattern used to select the elements you want to style.
​ Declaration Block: Contains properties and values that apply to the selected
elements.

2. CSS Syntax

Basic Structure

​ A CSS rule consists of a selector and a declaration block.


​ Example:
​ css

selector {
property: value;
}

Comments

​ Use /* comment */ for multi-line comments.

3. CSS Selectors

Basic Selectors

​ Universal Selector: * - Selects all elements.


​ Type Selector: div - Selects all <div> elements.
​ Class Selector: .class-name - Selects elements with a specific class.
​ ID Selector: #id-name - Selects an element with a specific ID.

Combinators

​ Descendant Selector: div p - Selects all <p> elements inside <div>.


​ Child Selector: div > p - Selects all <p> elements that are direct children of
<div>.
​ Adjacent Sibling Selector: h1 + p - Selects the first <p> element immediately
after an <h1>.
​ General Sibling Selector: h1 ~ p - Selects all <p> elements that are siblings of
<h1>.

Attribute Selectors

​ [attribute] - Selects elements with a specific attribute.


​ [attribute="value"] - Selects elements with a specific attribute value.

Pseudo-Classes

​ Examples:
​ :hover - Applies styles when the element is hovered over.
​ :focus - Applies styles when the element is focused.
​ :nth-child(n) - Selects the nth child of a parent.

Pseudo-Elements

​ Examples:
​ ::before - Inserts content before an element.
​ ::after - Inserts content after an element.
​ ::first-letter - Styles the first letter of an element.

4. CSS Properties

Text Properties

​ color: Sets the text color.


​ font-family: Specifies the font.
​ font-size: Sets the size of the font.
​ font-weight: Sets the thickness of the font.
​ line-height: Sets the height of a line of text.
​ text-align: Aligns the text (left, right, center, justify).
​ text-decoration: Adds decoration to text (underline, overline, line-through).

Box Model

​ Width and Height: Set the dimensions of an element.


​ Padding: Space between the content and the border.
​ Border: Thickness and style of the border around an element.
​ Margin: Space outside the border.

Background Properties

​ background-color: Sets the background color.


​ background-image: Sets an image as the background.
​ background-size: Controls the size of the background image.
​ background-repeat: Defines how the background image is repeated.
​ background-position: Sets the starting position of a background image.

Display Properties

​ display: Controls how an element is displayed (block, inline, inline-block,


flex, grid, none).
​ visibility: Controls whether an element is visible.
​ opacity: Sets the transparency level of an element.

Positioning

​ static: Default positioning.


​ relative: Positioned relative to its normal position.
​ absolute: Positioned relative to the nearest positioned ancestor.
​ fixed: Positioned relative to the viewport, stays in place during scrolling.
​ sticky: Toggles between relative and fixed positioning based on scroll position.

Float and Clear

​ float: Allows elements to be taken out of the normal document flow and
positioned to the left or right.
​ clear: Specifies whether an element can be next to floating elements or if it
should be moved below them.

5. Layout Techniques

Flexbox

​ A one-dimensional layout model for aligning items in rows or columns.


​ Key properties include:
​ display: flex;
​ flex-direction: Defines the direction of the flex items (row or column).
​ justify-content: Aligns items along the main axis.
​ align-items: Aligns items along the cross axis.
​ flex-wrap: Determines whether flex items should wrap onto multiple
lines.

Grid

​ A two-dimensional layout model for arranging items in rows and columns.


​ Key properties include:
​ display: grid;
​ grid-template-columns: Defines the number and size of columns.
​ grid-template-rows: Defines the number and size of rows.
​ grid-area: Assigns an item to a specific grid area.
​ gap: Sets the space between grid items.

CSS Multi-Column Layout

​ Allows content to be split into multiple columns.


​ Key properties include:
​ column-count: Specifies the number of columns.
​ column-gap: Sets the space between columns.
​ column-rule: Defines the style, width, and color of the line separating
columns.

6. CSS Transitions and Animations

Transitions

​ Control the change of property values smoothly over a specified duration.


​ Example:
​ css

.box {
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}

​
Animations

​ Create complex animations using @keyframes.


​ Example:
​ css

@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}

.animated {
animation: slide 2s infinite;
}

7. Media Queries

​ Used for responsive design to apply styles based on device characteristics.


​ Example:
​ css

@media (max-width: 600px) {


body {
background-color: lightblue;
}
}

8. CSS Variables (Custom Properties)

​ Allow you to define reusable values throughout your CSS.


​ Example:
​ css

:root {
--main-color: #3498db;
}

body {
background-color: var(--main-color);
}

9. CSS Functions

Color Functions

​ rgba(): Defines a color with red, green, blue, and alpha (transparency).
​ hsl(): Defines a color using hue, saturation, and lightness.
​ var(): Used to access CSS variables.

Positioning Functions

​ calc(): Performs calculations to set values.


​ clamp(): Constrains a value between a defined range.

10. Advanced CSS Techniques

CSS Grid Layout Techniques

​ Nested Grids: Creating grids within grids for more complex layouts.
​ Grid Template Areas: Using named areas for easier layout management.

Responsive Design Techniques

​ Mobile-First Approach: Designing for mobile devices first and then using media
queries for larger screens.
​ Fluid Layouts: Using relative units like percentages and vw/vh for responsive
designs.

You might also like