Scribd
Upload
252 views

Complete CSS Documentation

This is a Complete CSS Documentation for Beginners

Uploaded by

triumphantogie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
252 views

Complete CSS Documentation

This is a Complete CSS Documentation for Beginners

Uploaded by

triumphantogie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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