1. Border Properties

Border properties in CSS allow you to create and style borders around HTML elements. They are essential for defining the visual boundaries and enhancing the design of web pages. Borders can be customized in terms of style, width, color, and shape.

Key aspects of border properties include:

                /* Border Property Syntax */
                selector {
                    border: width style color;
                    border-radius: value;
                }
            

(i) . Border Style Property

dotted

border-style: dotted;

dashed

border-style: dashed;

solid

border-style: solid;

double

border-style: double;

(ii) . Border Width Property

The border-width defines the thickness of the border.

1px Width

border-width: 1px;

5px Width

border-width: 5px;

10px Width

border-width: 10px;

(iii) . Border Color Property

The border-color sets the color of the border.

Red Border

border-color: red;

Blue Border

border-color: blue;

Green Border

border-color: green;

(iv). Individual Border Properties

Target specific sides of the border.

Different Sides

                        border-top: 5px dashed red;

                        border-bottom: 5px dotted blue;

(v). Border Shorthand

Combine width, style, and color in one declaration.

Shorthand Border

border: 3px dashed orange;

(vi). Border Radius

Create rounded corners for elements.

Slight Rounding

border-radius: 10px;

More Rounding

border-radius: 50px;

Circular

border-radius: 50%;

2. Display Property

The `display` property in CSS determines how an element is displayed in the document. It influences the layout and interaction of an element with surrounding elements. Common values are:

block: The element takes up the entire width of its parent, creating a new line.
inline: The element does not start on a new line, and its width/height cannot be manually adjusted.
inline-block: Similar to inline, but allows setting width and height.

Comparison of Display Properties

Property	Width	Height	Margin	Padding
block	Can be set	Can be set	All sides apply	All sides apply
inline	Cannot be set	Cannot be set	Horizontal margins apply	Horizontal padding applies
inline-block	Can be set	Can be set	All sides apply	All sides apply

1. Display: Block

Characteristic	Description
Width	Takes full width of parent container
Line Behavior	Always starts on a new line
Dimensions	Respects width and height properties

            .block-element {
                display: block;
                width: 100%;
            }
        

Block Element 1

Block Element 2

2. Display: Inline

Characteristic	Description
Width	Only takes necessary content width
Line Behavior	Flows within text, no line breaks
Dimensions	Ignores width and height settings

            .inline-element {
                display: inline;
            }
        

Inline Element 1 Inline Element 2

3. Display: Inline-Block

Characteristic	Description
Width	Configurable content width
Line Behavior	Flows inline with other elements
Dimensions	Respects width and height properties

            .inline-block-element {
                display: inline-block;
                width: 150px;
            }
        

Inline-Block 1

Inline-Block 2

Practical Use Cases

Display Type	Recommended Use	Example Scenarios
Block	Layout Structures	Paragraphs, Divs, Sections
Inline	Text-Based Elements	Spans, Links, Bold/Italic Text
Inline-Block	Interactive Components	Buttons, Navigation Items

4. Display: Flex 🔧

What It Does: It creates a flexible layout system for arranging items in a container.
Why It’s Useful: It helps align and distribute items easily, even when their sizes vary.

Flex Item 1

Flex Item 2

Flex Item 3

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
        

Property	Description	Common Values
display: flex	Creates a flex container	flex, inline-flex
justify-content	Aligns items horizontally	center, space-between, space-around
align-items	Aligns items vertically	center, stretch, flex-start

3. CSS Box Model: Comprehensive Guide

Margin

Border

Padding

Content

Content Area

/* Box Model CSS Example */
.element {
    width: 300px;          /* Content width */
    padding: 20px;         /* Internal spacing */
    border: 10px solid;    /* Element border */
    margin: 15px;          /* External spacing */
}
        

1. Box Shadow 🌓

What It Does: It adds a shadow to an element, making it look like it's lifted off the page.
Why It’s Useful: It gives depth and a polished look to elements.

.element {
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}
        

Property	Description	Value Components
box-shadow	Adds shadow effect to element	x-offset, y-offset, blur-radius, color
Horizontal Offset	Shadow position on X-axis	Positive/Negative pixels
Vertical Offset	Shadow position on Y-axis	Positive/Negative pixels

2. Box Sizing 📦

What It Does: It decides how the size of an element is calculated (whether padding and border are included or excluded).
Why It’s Useful: It simplifies layout and ensures consistent element sizes.

Box Sizing: Border Box

.element {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 10px solid red;
}
        

Value	Description	Calculation Method
content-box	Default browser behavior	Width = content width
border-box	Includes padding and border in total width	Width = content + padding + border

3. Box Decoration Break 🎨

What It Does: Controls how decorations like borders, backgrounds, and shadows behave when content breaks into multiple lines or boxes.
Why It’s Useful: Ensures a smooth or continuous look for elements split across lines.

.element {
    box-decoration-break: clone;
}
        

Value	Description	Use Case
slice	Default behavior	Breaks background at element boundaries
clone	Repeats decoration across lines	Multi-line text with consistent styling

4. List Styles

Defines the appearance of list markers. Can change bullets to different shapes or numbers to various numbering systems.

1. List-Style-Type

Unordered List Types

disc (Default)

Standard bullet point
Solid circular marker

circle

Hollow circular marker
Open circle style

square

Solid square marker
Block-style bullet

none

No visible marker
Clean, minimalist look

/* Unordered List Type Styles */
ul { 
    list-style-type: disc;     /* Default */
    list-style-type: circle;   /* Hollow circles */
    list-style-type: square;   /* Solid squares */
    list-style-type: none;     /* No markers */
}
        

Ordered List Types

decimal (Default)

Standard numbering
1, 2, 3, 4...

decimal-leading-zero

Includes leading zero
01, 02, 03...

lower-alpha

Lowercase letters
a, b, c, d...

upper-alpha

Uppercase letters
A, B, C, D...

lower-roman

Lowercase Roman
i, ii, iii, iv...

upper-roman

Uppercase Roman
I, II, III, IV...

/* Ordered List Type Styles */
ol { 
    list-style-type: decimal;               /* 1, 2, 3 */
    list-style-type: decimal-leading-zero;  /* 01, 02, 03 */
    list-style-type: lower-alpha;           /* a, b, c */
    list-style-type: upper-alpha;           /* A, B, C */
    list-style-type: lower-roman;           /* i, ii, iii */
    list-style-type: upper-roman;           /* I, II, III */
}
        

2. List-Style-Position

Outside Position (Default)
Markers aligned to left

Inside Position
Markers inside list content

/* List Style Position */
ul { list-style-position: inside; }
        

Controls whether list markers are inside or outside the list item's content box.

3. List-Style-Image

/* Custom Image Marker */
ul {
    list-style-image: url('custom-marker.png');
}
        

Replaces standard markers with a custom image. Useful for unique or branded list styles.

4. List-Style (Shorthand)

/* Shorthand Syntax */
ul {
    list-style: square inside url('marker.png');
    /* Combines type, position, and image */
}
        

Combines list-style-type, list-style-position, and list-style-image in a single declaration.

Text Properties

Text Properties Overview

Property	Values	Example
text-align	left, right, center, justify	Centered Text
text-indent	pixels, ems, percentage	Indented first line by 30 pixels
line-height	normal, number, pixels, percentage	Double line height Increased spacing between lines
letter-spacing	normal, pixels	Increased space between characters
text-decoration	none, underline, overline, line-through	Underlined Text

/* Text Property Examples */
.text-styles {
    text-align: center;
    text-indent: 30px;
    line-height: 1.5;
    letter-spacing: 1px;
    text-decoration: underline;
}
        

Text Decoration Variations

Underline | Overline | Line Through

/* Text Decoration Combinations */
.text-decoration-demo {
    text-decoration: underline wavy red;  /* Wavy underline in red */
}
        

Font Properties

Property	Values	Example
font-family	- Generic families: serif, sans-serif, monospace - Specific fonts: Arial, Times New Roman, Helvetica - Web fonts: Google Fonts, Custom Fonts - System fonts: system-ui	Times New Roman Text Arial Text Monospace Text
font-style	- normal - italic - oblique	Normal text Italic text Oblique text
font-weight	- normal (400) - bold (700) - lighter - bolder - 100 to 900	Normal weight (400) Bold weight (700) Heavy weight (900)
font-size	- Absolute: px, pt - Relative: em, rem, % - Keywords: small, medium, large - Viewport: vw, vh	12px text size 1.5em text size Large text size
text-decoration	- none - underline - overline - line-through - Can combine with style and color	No decoration Underlined text Strikethrough text Fancy decoration

Combined Example:

This text combines multiple font properties

Background Properties

Background Demonstrations

Background Color

Background Image

Background Position

Background Properties Table

Property	Values	Example
background-color	color name, hex, rgb, rgba	background-color: blue; background-color: #3498db; background-color: rgb(52, 152, 219);
background-image	url(), linear-gradient(), radial-gradient()	background-image: url('image.jpg'); background-image: linear-gradient(to right, red, blue);
background-position	top, bottom, left, right, center, px, %	background-position: center; background-position: 25% 75%; background-position: 50px 100px;
background-size	cover, contain, px, %	background-size: cover; background-size: contain; background-size: 200px 150px; background-size: 50% 100%;

Shorthand Background Property

/* Background Shorthand */
background: 
    #ff6b6b               /* color */
    url('image.jpg')      /* image */
    no-repeat             /* repeat */
    center center         /* position */
    / cover;              /* size */
        

CSS Position Properties

Position Property Overview

The CSS position property defines how an element is positioned in a document. It can change an element's layout behavior and its relationship to other elements.

Position Demonstration

Static

Relative

Absolute

Sticky

Fixed

Position Properties Table

Property Value	Description	Example
static	Default positioning. Element follows normal document flow.	position: static; /* Default behavior, no special positioning */
relative	Positioned relative to its normal position. Doesn't affect other elements.	position: relative; top: 20px; /* Moves 20px down / left: 30px; / Moves 30px right */
absolute	Removed from normal document flow. Positioned relative to nearest positioned ancestor.	position: absolute; top: 50px; right: 100px;
fixed	Positioned relative to the browser window. Stays in the same place during scrolling.	position: fixed; bottom: 20px; right: 20px; /* Stays in bottom-right corner */
sticky	Toggles between relative and fixed positioning based on scroll position.	position: sticky; top: 0; /* Sticks to top when scrolled */

Positioning Context

The positioning of elements depends on their context:

Static and relative positioned elements remain within the normal document flow.
Absolute positioned elements are taken out of the flow and positioned relative to their nearest positioned ancestor.
Fixed and sticky elements are positioned relative to the browser viewport.

CSS Table Properties

Table Properties Overview

CSS provides powerful properties to style and control HTML tables, allowing for more dynamic and visually appealing table designs.

Table Properties Breakdown

Property	Description	Example
border	Controls table and cell border appearance	table { border: 2px solid #333; } td { border: 1px solid #ddd; }
border-collapse	Defines how table borders are rendered	/* Combines adjacent cell borders / table { border-collapse: collapse; / or */ border-collapse: separate; }
width & height	Set table and cell dimensions	table { width: 100%; height: 400px; } td { width: 50%; height: 50px; }
text-align	Horizontal alignment of cell content	td { text-align: left; /* left, center, right */ }
vertical-align	Vertical alignment of cell content	td { vertical-align: middle; /* top, middle, bottom */ }

Table Style Demonstrations

Hoverable Table

Name	Role
Alice	Developer
Bob	Designer
Charlie	Manager

Striped Table

Product	Price
Laptop	$999
Smartphone	$599
Tablet	$399
Headphones	$199

Detailed Explanations

1. Table Border

Table borders define the visual boundaries of tables and cells. You can control:

Border width: Thickness of the border
Border style: solid, dashed, dotted, etc.
Border color: Color of the border

2. Border Collapse

This property determines how table borders are rendered:

collapse: Combines adjacent cell borders into a single border
separate: Keeps cell borders distinct with spacing

3. Table Width and Height

Control table and cell dimensions using percentage or pixel values:

Table width can be set to fixed or responsive percentages
Individual cell heights and widths can be customized

4. Horizontal and Vertical Alignment

Positioning content within table cells:

text-align: Aligns content horizontally (left, center, right)
vertical-align: Aligns content vertically (top, middle, bottom)

5. Hoverable Tables

Add interactivity by changing background on hover using :hover pseudo-class

6. Striped Tables

Improve readability by adding alternating background colors using :nth-child() selector

CSS Properties