List of CSS Properties

In the world of web development, CSS plays a vital role in designing visually appealing and user-friendly websites. While HTML provides the structure of a web page, CSS is what brings that structure to life adding color, layout, spacing, fonts, animations, and more.

At the heart of CSS are properties, the building blocks that define how elements on a page should appear. Each property targets a specific aspect of an element’s style, such as its size, color, font, position, or behavior. Get in touch with us to get a software coding certification and get high-paying international jobs.

This article provides a comprehensive list of properties used in CSS, making it a handy reference for both beginners who are learning the basics and experienced developers looking to refresh or expand their knowledge.

Whether you’re styling a simple blog or a complex web application, understanding CSS properties is essential to mastering front-end development. You can also learn more about CSS by reading this article on what is CSS.

CSS properties define how HTML elements are styled and displayed. They cover everything from layout and spacing to colors, fonts, and animations. To make them easier to learn, we’ve grouped this list of properties into categories based on their function. Let’s explore each group to understand how these properties shape the look and feel of a webpage.

1. Layout and Display Properties

These properties control how elements are arranged on the page and interact with each other in the document flow.

display

Defines how an element is displayed in the layout. Common values include:

block – takes up the full width available.
inline – flows within the content without breaking to a new line.
inline-block – behaves like inline but allows setting width and height.
none – hides the element completely.

position

Determines how an element is positioned in the document. Possible values:

static (default) – normal flow of the document.
relative – positioned relative to its normal position.
absolute – positioned relative to the nearest positioned ancestor.
fixed – stays in the same position even when scrolling.
sticky – toggles between relative and fixed based on scroll position.

top, right, bottom, left

Used alongside the position property to move an element in a specific direction. These properties shift the element from its reference point based on the chosen positioning method.

z-index

Controls the stack order of overlapping elements. Higher values bring the element to the front. Only works on positioned elements (relative, absolute, fixed, or sticky).

float

Allows elements to be taken out of the normal flow and floated to the left or right of their container. Commonly used for text wrapping around images.

clear

Specifies what elements can float beside a given element. Often used to prevent layout issues caused by floating elements. Values include:

none (default)
left
right
both

overflow

Determines what happens when content overflows an element’s box. Values include:

visible – content is not clipped (default).
hidden – excess content is clipped and not visible.
scroll – scrollbars appear regardless of content size.
auto – scrollbars appear only if needed.

2. Box Model Properties

The CSS box model is a fundamental concept that describes how elements are structured and spaced. Every element is treated as a rectangular box made up of several layers: content, padding, border, and margin.

margin

Defines the space outside the element’s border. It creates space between elements.

padding

Defines the space between the content and the element’s border. It adds inner spacing.

border

Adds a line around the padding and content. You can set the border’s width, style, and color (e.g., 1px solid #000).

width

Sets the horizontal size of an element’s content area. Accepts values in pixels, percentages, etc.

height

Sets the vertical size of an element’s content area.

box-sizing

Controls how the total width and height of an element are calculated.

content-box (default): width and height include only the content.
border-box: width and height include padding and border, making layout easier to manage.

3. Typography and Text Properties

These properties control the appearance, spacing, and alignment of text on a webpage. They help create a readable and visually consistent layout.

font-family

Specifies the typeface for text. You can list multiple fonts as fallbacks (e.g., font-family: Arial, sans-serif;).

font-size

Sets the size of the text. Common units include px, em, rem, and %.

font-weight

Defines the thickness of the font. Common values include normal, bold, or numeric values like 400, 700.

line-height

Controls the vertical space between lines of text. Helps improve readability.

text-align

Aligns text horizontally. Values include left, right, center, and justify.

text-decoration

Adds decorative lines to text, such as:

underline
line-through
none

letter-spacing

Adjusts the space between individual letters (also called tracking).

word-spacing

Adjusts the space between words.

text-transform

Controls the capitalization style of text:

uppercase – all letters capitalized
lowercase – all letters lowercase
capitalize – first letter of each word capitalized

4. Color and Background Properties

These properties control text colour, background styles, and visual layering to enhance the design of a webpage.

color

Sets the color of the text. Values can be named colors (red), hex codes (#ff0000), RGB, or HSL formats.

background-color

Defines the background color of an element. Works the same as color but applies to the entire element’s background.

background-image

Adds an image as the background of an element. Use a URL like:
background-image: url(‘image.jpg’);

background-size

Specifies the size of the background image. Common values:

cover – fills the container while maintaining aspect ratio.
contain – scales the image to fit inside the element.
Specific values like 100px 100px.

background-position

Defines where the background image is placed within the element. Examples: top left, center, 50% 50%.

background-repeat

Controls whether the background image repeats. Options:

repeat (default)
no-repeat
repeat-x
repeat-y

opacity

Sets the transparency of an element, from 0 (fully transparent) to 1 (fully opaque).

5. Flexbox and Grid Properties

Grid and Flexbox are modern layout systems in CSS that make it easier to align, space, and organize elements in a responsive and efficient way.

Flexbox:

Flexbox is ideal for one-dimensional layouts laying items in a row or column.

display: flex

Turns the container into a flex container, enabling flex layout for its children.

flex-direction

Defines the direction of the main axis:

row (default)
row-reverse
column
column-reverse

justify-content

Aligns items along the main axis (horizontal by default):

flex-start, center, flex-end
space-between, space-around, space-evenly

align-items

Aligns items along the cross axis (vertical by default):

stretch, center, flex-start, flex-end, baseline

flex-wrap

Controls whether items wrap to a new line:

nowrap (default)
wrap
wrap-reverse

flex-grow, flex-shrink, flex-basis

flex-grow: defines how much an item will grow relative to others.
flex-shrink: controls how an item shrinks when space is limited.
flex-basis: sets the initial size of the item before growing or shrinking.

Grid:

Grid is perfect for two-dimensional layouts, handling rows and columns together.

display: grid

Turns the container into a grid layout.

grid-template-columns, grid-template-rows

Define the number and size of columns and rows in the grid.
Example:
grid-template-columns: 1fr 2fr; creates two columns.

grid-gap

Sets the spacing (gutter) between rows and columns. Can be split into:

row-gap
column-gap

justify-items, align-items

justify-items: aligns items horizontally within their grid cell.
align-items: aligns items vertically within their grid cell.

6. Animation and Transition Properties

These properties add movement and smooth visual effects to elements, improving user experience and interactivity.

transition

A shorthand property to define how an element changes between styles smoothly over time. Example:
transition: all 0.3s ease-in-out;

transition-property

Specifies the CSS property to animate (e.g., background-color, width).

transition-duration

Defines how long the transition takes (e.g., 0.5s, 2s).

animation

A shorthand for defining CSS keyframe animations. Includes several sub-properties like name, duration, and timing.

animation-name

Refers to the name of the @keyframes rule that defines the animation sequence.

animation-duration

Sets how long the animation lasts from start to finish.

animation-timing-function

Controls the speed curve of the animation. Common values:

ease (default)
linear
ease-in
ease-out
ease-in-out

animation-delay

Specifies the wait time before the animation starts.

7. Visual Effects and Transformation Properties

These properties allow you to create dynamic and interactive visual effects, enhancing the user interface and providing a more engaging experience.

box-shadow

Adds shadow effects around an element’s box. Can define horizontal and vertical offsets, blur radius, spread radius, and color.
Example:
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

text-shadow

Creates a shadow effect for text. Similar to box-shadow but specifically for text.
Example:
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

transform

Allows you to apply 2D or 3D transformations, such as scaling, rotating, translating, and skewing elements.
Example:
transform: rotate(45deg);
Other values include scale(), translate(), skew().

filter

Applies visual effects like blur, brightness, contrast, or grayscale to an element.
Example:
filter: blur(5px);

visibility

Controls the visibility of an element.

visible (default) – the element is visible.
hidden – the element is hidden but still takes up space in the layout.

8. List and Table Properties

These properties control the style of lists and tables, allowing you to customize how they appear and behave.

List Properties:

list-style

A shorthand property to set all list-related properties (type, position, and image) in one line.
Example:
list-style: disc inside url(‘image.jpg’);

list-style-type

Defines the marker style for list items (e.g., disc, circle, square, none).
Example:
list-style-type: square;

list-style-position

Determines where the list marker is positioned in relation to the list item:

inside – the marker is inside the list item.
outside – the marker is outside the list item (default).

Table Properties:

border-collapse

Specifies whether table borders should collapse into a single border or be separated.

collapse – borders collapse into one.
separate – borders remain distinct.

border-spacing

Defines the space between borders of adjacent cells when border-collapse is set to separate.
Example:
border-spacing: 10px;

table-layout

Controls the algorithm used to lay out the table. Values:

auto (default) – table width is determined by content.
fixed – table width is defined by the first row of cells.

caption-side

Sets the position of the table caption (if present).

top (default) – places the caption above the table.
bottom – places the caption below the table.

9. Pseudo-Classes and Pseudo-Elements

Pseudo-elements and pseudo-classes enable you to style elements based on their state or structure, without needing additional classes in the HTML.

Pseudo-Classes: Pseudo classes include:

:hover, :focus, :active

:hover – applies styles when an element is hovered over by the mouse.
:focus – applies styles when an element gains focus (e.g., form input).
:active – applies styles when an element is in the active state (e.g., when clicked).

:nth-child(), :first-child

:nth-child() – selects elements based on their position in a parent (e.g., :nth-child(2) targets the second child).
:first-child – targets the first child element of a parent.

Pseudo-Elements:

::before, ::after

::before – inserts content before the element’s actual content.
::after – inserts content after the element’s actual content.
Both are commonly used for adding decorative content, icons, or other visual effects.

10. Miscellaneous and Advanced Properties

These properties offer more specialized control over elements, providing advanced styling options for interactivity and visual effects.

cursor

Defines the type of mouse cursor to display when hovering over an element. Common values include:

pointer (hand cursor)
default (arrow cursor)
crosshair, move, text

pointer-events

Controls how an element reacts to pointer events (e.g., clicks, hover).

auto (default) element reacts to pointer events.
none element is ignored by pointer events (useful for invisible elements).

user-select

Controls whether the user can select text within an element. Values include:

auto (default)
none (prevents text selection)
txt (allows selection)

visibility

Controls the visibility of an element:

visible (default) – element is visible.
hidden – element is hidden but still occupies space in the layout.
collapse – similar to hidden, but specifically for table rows or columns.

clip-path

Allows you to define a clipping region, where content is only visible within the specified area. It can create shapes like circles, ellipses, polygons, etc.
Example:
clip-path: circle(50%);

content

Used with ::before and ::after pseudo-elements to insert content into the page. This can be text or other data like images.
Example:
content: ‘New Text’;

In conclusion, knowing a wide range of CSS properties is crucial for any web developer. These properties allow you to control the layout, design, and interactivity of a website, helping you create more polished and responsive web pages. Bookmark this list of properties for future reference as you continue building your CSS skills. And if you’re serious about turning those skills into a professional career, our software development course in Kenya is the perfect place to start to become a job-ready developer in just 10–12 months.