CSS text properties
Basic Text Appearance
color – Sets the text color.
font-family – Defines the typeface of text.
font-size – Controls how big the text is.
font-weight – Makes text bold or light.
font-style – Makes text italic or normal.
line-height – Controls spacing between lines.
Text Alignment & Formatting (Very Common)
text-align – Aligns text left, right, centre, or justify.
text-transform – Converts text to uppercase, lowercase, etc.
text-indent – Indents the first line of a paragraph.
vertical-align – Aligns inline elements vertically.
Spacing Control (Improves Readability)
letter-spacing – Adds space between letters.
word-spacing – Adds space between words.
Decoration (Mostly for Links)
text-decoration – Adds underline, overline, or line-through.
text-shadow – Adds shadow effect to text.
Text Wrapping & Overflow (Important for
Layouts)
white-space – Controls line breaks and spacing.
text-overflow – Adds ellipsis (...) when text is cut.
word-break – Breaks long words properly.
CSS Background
Basic Background Color
background-color – Sets the background color of an element.
Background Images
background-image – Sets an image as the background.
background-size – Controls size of the background image (e.g., cover, contain).
background-repeat – Controls whether the image repeats or not.
background-position – Sets the starting position of the image.
Background Attachment
background-attachment – Defines whether background scrolls or stays fixed.
LIST STYLES (For <ul>, <ol>, <li>)
Basic List Appearance (Most Important)
list-style-type – Defines the type of marker (disc, circle, square, decimal, etc.).
list-style-position – Controls whether marker is inside or outside the content.
list-style-image – Uses an image as the list marker.
Shorthand (Very Important)
list-style – Shorthand to set type, position, and image in one line.
Example:
list-style: square inside;
Common Practice (Very Frequently Used)
list-style: none – Removes bullets or numbers completely.
LINK STYLES (For <a> tag)
Basic Link Styling (Most Important)
color – Changes link text color.
text-decoration – Removes or adds underline.
Link States (Very Important Concept)
CSS provides special pseudo-classes for links:
:link – Normal unvisited link.
:visited – Visited link.
:hover – When mouse is over link.
:active – When link is being clicked.
👉 Order matters:
:link
:visited
:hover
:active
(“LoVe HAte” rule)
Extra Styling (Learn After Basics)
cursor – Changes mouse pointer style.
transition – Adds smooth animation on hover.
Example:
a{
transition: 0.3s;
}
Spacing properties
Inside Spacing (Padding)
👉 Space inside an element (between content and border)
padding – Shorthand to set all padding sides.
padding-top – Sets top padding.
padding-right – Sets right padding.
padding-bottom – Sets bottom padding.
padding-left – Sets left padding.
Outside Spacing (Margin)
👉 Space outside an element (distance from other elements)
margin – Shorthand to set all margins.
margin-top – Sets top margin.
margin-right – Sets right margin.
margin-bottom – Sets bottom margin.
margin-left – Sets left margin.
CSS Flex
Parent (Flex Container)
👉 These properties are applied to the parent element
Enable Flex
display: flex – Makes the element a flex container.
display: inline-flex – Makes flex container behave like inline element.
Direction & Wrapping
flex-direction – Sets main axis direction (row, column, etc.).
flex-wrap – Controls whether items wrap to next line.
flex-flow – Shorthand for flex-direction + flex-wrap.
Example:
flex-direction: row;
flex-wrap: wrap;
Alignment on Main Axis (Horizontal by default)
justify-content – Aligns items along main axis.
Common values:
flex-start
center
space-between
space-around
space-evenly
Alignment on Cross Axis (Vertical by default)
align-items – Aligns items vertically inside container.
align-content – Aligns wrapped rows (only works with wrap).
Gap Between Items
gap – Adds spacing between flex items.
row-gap – Space between rows.
column-gap – Space between columns.
Child (Flex Items) – Applied to Children
👉 These properties are applied to individual flex items
Size & Growth Control (Very Important)
flex-grow – Defines how much item can grow.
flex-shrink – Defines how much item can shrink.
flex-basis – Sets initial size before growing/shrinking.
flex – Shorthand for grow, shrink, and basis.
Example:
flex: 1;
Alignment of Individual Item
align-self – Overrides align-items for a single item.
Order Control
order – Changes visual order of items.
CSS Grid
Parent (Grid Container)
👉 These properties are applied to the parent element
Enable Grid
display: grid – Makes the element a grid container.
display: inline-grid – Grid container behaves like inline element.
Define Columns & Rows (Very Important)
grid-template-columns – Defines number and size of columns.
grid-template-rows – Defines number and size of rows.
grid-template – Shorthand for rows + columns.
Example:
grid-template-columns: 1fr 1fr 1fr;
Gap Between Grid Items
gap – Sets space between rows and columns.
row-gap – Space between rows.
column-gap – Space between columns.
Alignment (Inside Grid Container)
Align on Row Direction (Horizontal)
justify-items – Aligns items horizontally inside their cells.
justify-content – Aligns entire grid horizontally.
Align on Column Direction (Vertical)
align-items – Aligns items vertically inside their cells.
align-content – Aligns entire grid vertically.
Named Areas (Intermediate)
grid-template-areas – Defines named layout areas.
grid-area – Assigns item to a named area.
Example:
grid-template-areas:"header header" "sidebar content";
Child (Grid Items) – Applied to Children
👉 These properties are applied to individual grid items
Alignment for Single Item
justify-self – Aligns one item horizontally.
align-self – Aligns one item vertically.
Auto Placement (Learn After Basics)
grid-auto-columns – Size of auto-generated columns.
grid-auto-rows – Size of auto-generated rows.
grid-auto-flow – Controls automatic item placement.