CSS documentation covering everything from basics to advanced techniques, including layouts, responsive design, animations, frameworks, and performance optimization.
Welcome to the CSS Documentation section. This guide covers everything from the fundamentals of CSS to advanced techniques, ensuring you have all the knowledge needed to style and design modern web applications.
📌 What You’ll Learn
CSS Basics: Syntax, selectors, and properties.
Box Model: Margins, padding, and borders.
Layouts: Flexbox, Grid, and multi-column layouts.
Responsive Design: Media queries, fluid layouts, and accessibility.
Animations & Transitions: Smooth effects and keyframe animations.
Advanced CSS: Custom properties, pseudo-elements, and mixins.
CSS Frameworks: Bootstrap, Tailwind, Bulma, and more.
Preprocessors: Sass, Less, and Stylus.
Performance Optimization: Minification, lazy loading, and best practices.
Modern & Experimental CSS: Container queries, Houdini, and CSS modules.
The CSS padding properties are used to generate space around an element’s content, inside of any defined borders.
With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
Padding - Individual Sides
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
Example
Set different padding for all four sides of a <div> element:
To shorten the code, it is possible to specify all the padding properties in one property.
The padding property is a shorthand property for the following individual padding properties:
padding-top
padding-right
padding-bottom
padding-left
So, here is how it works:
If the padding property has four values:
padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px
Example
Use the padding shorthand property with four values:
div{padding:25px50px75px100px;}
If the padding property has three values:
padding: 25px 50px 75px;
top padding is 25px
right and left paddings are 50px
bottom padding is 75px
Example
Use the padding shorthand property with three values:
div{padding:25px50px75px;}
15 - CSS Variables
The var() function is used to insert the value of a CSS variable.
CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.
A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.
The Traditional Way
The following example shows the traditional way of defining some colors in a style sheet (by defining the colors to use, for each specific element):
First of all: CSS variables can have a global or local scope.
Global variables can be accessed/used through the entire document, while local variables can be used only inside the selector where it is declared.
To create a variable with global scope, declare it inside the :root selector. The :root selector matches the document’s root element.
To create a variable with local scope, declare it inside the selector that is going to use it.
The following example is equal to the example above, but here we use the var() function.
First, we declare two global variables (–blue and –white). Then, we use the var() function to insert the value of the variables later in the style sheet: