Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
CSS Properties Complete Reference
Next article icon

CSS Properties Complete Reference

Last Updated : 21 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

CSS properties are the foundation of web design, used to style and control the behaviour of HTML elements. They define how elements look and interact on a webpage.

  • Used to control layout, colors, fonts, spacing, and animations on web pages.
  • It is essential for making web pages responsive and accessible across devices.
  • Help maintain consistency and efficiency in web design and development.

Example: In this example, we will see the use of many properties usage, all the keywords mentioned inside of { and } braces are properties.

HTML
<!--Driver Code Starts--> <html> <head> <!--Driver Code Ends-->      <style>         #myDIV {             width: 400px;             height: 299px;             background-color: green;             background-repeat: no-repeat;             background-image:               url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");             background-blend-mode: normal;             background-size: contain;         }     </style>  <!--Driver Code Starts--> </head> <body>     <div id="myDIV"></div> </body> </html> <!--Driver Code Ends--> 

CSS Properties

The list of complete CSS properties is given below.

Properties

Descriptions

@charset RuleSpecifies the character encoding used in the style sheet.
@keyframes RuleCSS @keyframes specify the animation rule.
@media RuleSet of styles for different media/devices using the Media Queries.
align-contentIt is used to change the behavior of the flex-wrap property.
align-itemsSet the alignment of items inside the flexible container or in the given window.
align-selfAlign the selected items in the flexible container.
allSet all the elements' values to their initial or inherited values.
animation-delaySpecifies the delay for the start of an animation.
animation-directionIt defines the direction of the animation.
animation-durationIt defines how long an animation should take to complete one cycle.
animation-fill-modeIt defines how styles are applied before and after animation.
animation-iteration-countThis specifies the number of times the animation will be repeated.
animation-nameThis specifies the name of the @keyframes describing the animation.
animation-play-stateIt specifies whether the animation is running or paused.
animation-timing-functionIt specifies how animation makes transitions through keyframes.
backface-visibilityDecides whether the back face of an element might be visible or not to the user.
background-attachmentSets whether a background image scrolls with the rest of the page or it will be fixed.
background-blend-modeDefines the blending mode of each background layer of the webpage.
background-clipThis property defines how far the background color or image should extend.
background-colorSet the background color of an element.
background-imageSet background images for an element, You can set one or more images as well.
background-originAdjusting the background image of the webpage.
background-positionSets the initial position for the background image.
background-repeatIt is used to repeat the background image horizontally and vertically.
background-sizeIt set the size of the background image.
borderThis is used to style the border of an element.
border-bottomSet all bottom border properties in one line.
border-bottom-colorSet the color of the bottom border of an element.
border-bottom-left-radiusDefine the radius of the bottom left corner of the border.
border-bottom-right-radiusDefine the radius of the right bottom corner of the border of a given element.
border-bottom-styleSet the style of the bottom border of an element.
border-bottom-widthSet a specific width to the bottom border of an element.
border-collapseSet the borders of the cell present inside the table and tells..
border-colorSet a color to the border of an element.
border-imageIt creates a border using an image instead of a normal border.
border-image-outsetIt is a shorthand property used to specify the distance.
border-image-repeatIt is used to scaling and tiling the border images.
border-image-sliceIt divides or slices an image specified by the border-image-source property.
border-image-sourceIt specifies the image source which is to be set as the border of an element.
border-image-widthSet the width of the border image. It can be set by providing multiple values.
border-leftSet the width, style, and color of the left border.
border-left-colorSet the color of the left-border in an Element.
border-left-styleSet the style of the left border of an element.
border-left-widthSets the width of the left-border of an Element.
border-radiusIt is used to round the corners of the outer border edges of an element.
border-right-colorSet the color of the right border in an Element.
border-rightSet the width, style, and color of the right border.
border-right-styleSet the style of the right border of an element..
border-right-widthSet the width of right-border of an element.
border-top-colorSet the color of the top border in an Element.
border-topSet the width, style, and color of the top border.
border-top-left-radiusIt specifies the radius of the top left border corner of an element.
border-top-right-radiusIt specifies the radius of the top right border corner of an element.
border-top-styleIt specifies the style of the top border.
border-top-widthSet a specific width to the top border of an element.
border-styleSets the border line style for all four sides of an element’s border.
border-spacingSet the distance between the borders of neighboring cells in the table.
border-widthSet the border line width of all four sides of an element.
bottomIt allows the vertical position of an element to be altered.
box-shadowSet a shadow-like effect to the frames of an element.
box-decoration-breakControl the box decoration after the fragmentation of the paragraph.
box-sizingDefines how the user should calculate the total width and height of an element.
caption-sideIt specifies the position where the table caption is placed. It is used in HTML Tables.
caret-colorSet the color of the cursor in inputs, text area, or other editable areas.
clearSpecify which side of floating elements are not allowed to float.
clipSpecify a rectangle to clip an absolutely positioned element.
column-countDivide a portion of content inside any HTML element into a given number of columns.
column-fillSpecify whether the columns will be filled in a balanced manner or not.
column-gapSpecify the amount of gap between the columns.
columnsSet the number of columns and the width of the columns.
column-rule-colorSet the color of the rule between the column.
column-ruleDefine the width, style, and color of the rules between the columns.
column-rule-styleSet the style of the column rule between the columns on a multi-column layout.
column-rule-widthSet the width of the column rule.
column-spanSets the number of columns an element can span across.
column-widthIt is used to define the width of the columns.
contentGenerate the content dynamically (during run time).
cursorSpecify the mouse cursor to be displayed while pointing to an element.
counter-incrementIt is used to increment/decrement the value of a counter.
counter-resetCreate or reset the CSS counter for elements.
directionDefine the direction of text/writing within any block element
displayDefine the components(div, hyperlink, heading, etc) are going to be placed on the web page
empty-cellsIt specifies whether to display the borders or not in the empty cells in a table.
filterSet the visual effect of an element.
flexIt is the combination of flex-grow, flex-shrink, and flex-basis properties.
flex-basisSet the initial size of the flexible item.
flex-directionSet the direction of the flexible items of a div.
flex-flowIt is used to make the flexible item reversible and wrapped if required.
flex-growSpecifies how much the item will grow compared to other items inside that container.
flex-shrinkSpecifies how much the item will shrink compared to other items inside that container.
flex-wrapIt specifies whether flex items are forced into a single line or wrapped onto multiple lines.
font-familySet the font of an element.
font-kerningControl the usage of the Kerning Information that has been stored in the Font
font-size-adjustAdjusts the font size based on the height of the lowercase.
font-sizeSet the font size of the text in an HTML document.
font-stretchSet the text wider or narrower.
font-styleStyle the given particular text in a normal, italic, or oblique face from its font family.
font-variantConvert all lowercase letters into uppercase letters.
font-weightSet the weight or thickness of the font being used with the HTML Text.
gridOffers a grid-based layout system, with rows and columns
grid-areaSet a grid item size and location in a grid layout.
grid-auto-columnsSpecify the size for the columns of implicitly generated grid containers.
grid-auto-flowIt specifies exactly how auto-placed items get flowed into the grid.
grid-auto-rowsSpecify the size for the rows of implicitly generated grid containers.
grid-columnSpecify a grid item's size and location within a grid column.
grid-column-endExplains the number of columns an item will span, or on which column line the item will end.
grid-column-gapSet the gap size between the columns in a grid layout.
grid-column-startSet on which column the line item will start.
grid-gapSets the gap size between the rows and columns in a grid layout.
grid-rowSpecify the size and location in a grid layout.
grid-row-endit defines the grid items' end position.
grid-row-gapSet the gap size between the grid elements.
grid-row-startDefines the grid items' start position.
grid-templateIt defines grid columns, rows, and areas.
grid-template-areasIt specifies the area within the grid layout.
grid-template-columnsSet the number of columns and size of the columns of the grid.
grid-template-rowsSet the number of rows and height of the rows in a grid.
hanging-punctuationPprovides web designers some upper hand over typography on the webpage.
heightSet the height of an element.
hyphensIt defines how the words should be hyphenated to create soft wrap opportunities within words.
isolationDefine whether an element must create new stacking content.
justify-contentAlignes the flexible containers item when there is available space.
leftIt specifies the horizontal position of a positioned element
letter-spacingSet the spacing behavior between text characters .
line-heightSet the amount of space used for lines, such as in the text.
list-styleIt is used to set the list style.
list-style-imageSet images that will be used as the list item marker.
list-style-positionSpecifies the position of the marker box with respect to the principal block box.
list-style-typeIt specifies the appearance(such as a disc, character, or custom counter style) of the list item marker.
margin-bottomSpecify the margin to be used on the bottom of an element.
margin-leftSet the width of the margin on the left of the desired element.
margin-rightSet the right margin of an element.
margin-topSet the top margin of an element.
max-heightSet the maximum height of an element.
max-widthDefine the maximum width of an element.
min-heightSet the minimum height of an element.
min-widthDefine the minimum width of an element.
mix-blend-modeDefine the minimum width of an element.
mask-imageTo set the mask of an image for a particular element.
object-fitSpecify the blending of an element’s background with the element’s parent.
object-positionSpecifies how an image or video element is positioned with x/y coordinates inside its content box.
orderSet the order of each flexible item in relation to other items inside the flexible container.
outline-colorSets the outline color of an element
outline-offsetSets the amount of space between an outline and the edge or border of an element. 
outline-styleSet the appearance of the outline of an element.
outline-widthIt specifies the width of this outline for a specific element.
overflow-xIt specifies whether to add a scroll bar horizontally.
overflow-y.It specifies whether to add a scroll bar vertically.
padding-bottomSet the padding on the bottom of an element.
padding-leftSet the padding on the left side of an element.
padding-rightSet the padding on the right-side of an element.
padding-topSet the padding on the top of an element.
page-break-afterAdd a page-break after the stated element.
page-break-beforeAdd a page-break-before the specified element.
page-break-insideAdd page breaks inside the element to which it is applied while printing.
perspectiveGive perspective to 3D objects.
perspective-originDefine the position at which the user is looking 3D object i.e. the vanishing point of the 3D object. 
pointer-eventsSpecify whether an element show pointer events and whether or not show on the pointer.
quotesSet the quotation mark for quotations used in the sentence.
resizeResize the element according to user requirements.
rightAffects the horizontal position of the element as but has no effect on non-positioned elements.
scroll-behaviorSet smooth animation of scroll position instead of a scroll jump
cssTextSet or return the value of an inline style declaration of an element.
lengthFind the number of style declarations used for the particular element.
parentRuleReturn the CSS Rule Object that represents a CSS rule-set that contains a selector and declaration block.
table-layoutIt is used to display the layout of the table.
tab-sizeIt specifies the width of a tab character.
text-alignSet the horizontal alignment of text in an element.ie.
text-align-lastSet the last line of the paragraph just before the line break.
text-decorationIt is used to "decorate” the content of the text.
text-decoration-colorSet the color of decorations(overlines, underlines, and line-throughs) over the text.
text-decoration-lineSets various kinds of text-decoration.
text-decoration-styleSet the text decoration of an element.
text-indentSet the indentation of the first line in each block of text.
text-justifySet the text-align to justify, which spreads the words into a complete and fixed-width line.
text-overflowSpecify that some text has overflown and is hidden from view.
text-transformControl the capitalization of the text.
text-shadowAdd shadows to the text.
topSet the top position of an element. The top property varies with the position of the element.
transformChange the coordinate space of the visual formatting model.
CSS transition PropertyIt is used to make some transition effects.
transition-delayDefine the time to start the transition.
transition-durationSet the time duration (in seconds or milliseconds) to complete the transition effect.
transition-propertyDisplay the change in the property of an element over a specified duration. 
unicode-bidiDetermine how the bidirectional text is handled in a document. 
user-selectIt specifies whether the text can be selected by the user or not.
vertical-alignSet the vertical alignment of the table box or inline element.
visibilitySpecify whether an element is visible or not.
white-spaceControl the text wrapping and white-spacing./td>
word-breakSpecify how to break the word when the word reached at end of the line.
word-spacingIncrease or decreases the white space between words.
word-wrapIt breaks long words and wraps them into the next line.
will-changeSpecify the browser how an element is expected to change.
writing-modeSpecify whether the lines of text are laid out horizontally or vertically.
z-indexDefine the order of elements if they overlap with each other.

Best Practices for CSS Properties

  • Always use descriptive names for classes and IDs to maintain readability.
  • Group similar properties together to enhance code organization.
  • Use shorthand properties where possible to reduce redundancy.

Next Article
CSS Properties Complete Reference

K

kartik
Improve
Article Tags :
  • Web Technologies
  • CSS
  • CSS-Properties

Similar Reads

    Pure CSS Forms Complete Reference
    Pure CSS is a popular framework & an open-source tool, developed by Yahoo, for creating responsive websites & web applications by making use of the responsive CSS modules, that help to develop a better user experience with high efficiency. It can be used as an alternative to Bootstrap. The F
    1 min read
    Primer CSS Marketing Complete Reference
    Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other Primer CSS Marketing Buttons Primer CS
    1 min read
    Primer CSS Utility Complete Reference
    Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other Primer CSS Animations Primer CSS Fade
    2 min read
    Primer CSS Components Complete Reference
    Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every otherPrimer CSS AlertsPrimer CSS Alerts Defa
    3 min read
    Foundation CSS Controls Complete Reference
    Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Controls use to create different types of switches, buttons, sliders, and tra
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences