Full dictionary of CSS properties and Terms


This is our full CSS dictionary, each link from the list below will teleport you to the complete CSS property guide including explanations, links, and code examples, you can also search for the CSS property you want information about and our search engine will find it for you, then click on the link.














Learn about CSS Margin


the Margin Property wrap the content, the CSS Margin is the outermost layer, CSS margin define an empty space that creates a space between one element and another.


learn more in our CSS margin tutorial


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
margin-bottom creates the bottom margin of an element Try yourself >>
margin-left creates the left margin of an element Try yourself >>
margin-right creates the right margin of an element Try yourself >>
margin-top creates the top margin of an element Try yourself >>
margin be efficient and specify all the margin properties at once example: margin: 80px 80px 50px 120px; Try yourself >>










Learn about CSS Padding


the Padding property defines the padding (space around the element but inside the borders) area of an HTML element


learn more in our CSS padding tutorial


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
padding-bottom creates the bottom padding of an element Try yourself >>
padding-left creates the left padding of an element Try yourself >>
padding-right creates the right padding of an element
padding-top creates the top padding of an element Try yourself >>
padding be efficient and specify all the padding properties at once example: padding: 30px 50px 60px 100px; Try yourself >>










Learn about CSS Borders


the Border properties sets and control the style and size of an HTML border elements


learn more in our CSS borders tutorial


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
border-radius Add rounded corners to borders Try yourself >>
border-style defines a style for the border such as dotted, solid etc. Try yourself >>
border-color defines a color for the CSS border Try yourself >>
border-width CSS border-width sets the width of an HTML element borders Try yourself >>
border-image defines an image as the border of the HTML element: Try yourself >>
border-image-outset Move the CSS border image outside of the border edge Try yourself >>
border-image-repeat decides how to repeat the CSS border image Try yourself >>
border-image-slice Divides the image into regions Try yourself >>
border-image-source sets the image source (location) Try yourself >>
border-image-width defines the width of the CSS border image: Try yourself >>
border be efficient, and define multiple CSS border values, even diffrenet values in one property Try yourself >>










Learn about CSS Backgrounds


The CSS background properties are responsible for creating the background effects of an HTML element


learn more in our CSS backgrounds tutorial


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
background be efficient and specify all the background properties in one declaration Try yourself >>
background-color defines the background color of a page or an element Try yourself >>
background-image sets a background-image for the page using CSS Try yourself >>
background-repeat repeat a background-image according to the position you decalare Try yourself >>
background-size sets the size of a background-image Try yourself >>
background-position sets the position of the background image Try yourself >>
background-attachment Locks the image and make it fixed (image won't scroll down) Try yourself >>
background-clip specify how far the background may extend Try yourself >>
background-origin determines from which point the image will appear Try yourself >>










Learn about CSS Color


The CSS Color properties sets the color and opacity of an HTML Element or Image


learn more in our CSS Colors tutorial


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
color sets the color of an element Try yourself >>
opacity sets the opacity/transparency of an element Try yourself >>










Learn about CSS Fonts


The CSS Font properties sets the Element boldness, font size, font family, style of the text and more


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
font-style The font-style property declare the font of an Element Try yourself >>
font-weight The font-weight property declare the font weight of an Element Try yourself >>
font-size The font-size property declare the font size of an Element Try yourself >>
font-family The font-family property declare the font type of an Element Try yourself >>
font-stretch The font-stretch property makes a text wider or narrower (currently no browsers support this) Try yourself >>
font-size-adjust The font-size-adjust property cancels the font-family effect on the font size (only firefox supports) Try yourself >>
font-variant The font-variant property decides wherher or not a text will be displayed in a small-cap font Try yourself >>
font be efficient and specify all the font properties in one declaration Try yourself >>










Learn about CSS Text


The CSS Text properties sets the element's text Transformation, Decoration, Alignment, Spacing, Height, Direction and more


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
text-justify The CSS text-justify property sets the justification method of text when text-align is set to "justify" Try yourself >>
text-overflow The CSS text-overflow property sets how hidden overflow content is signaled to users Try yourself >>
text-align The CSS text-align property sets the horizontal alignment of text inside an element Try yourself >>
direction The CSS direction property defines the text direction of a block-level Element Try yourself >>
text-decoration The CSS text-decoration property sets the decoration of the Element's text Try yourself >>
text-decoration-color The CSS text-decoration-color property sets the color of the text-decoration value Try yourself >>
text-decoration-line The CSS text-decoration-line property sets the type of decoration the browser will display Try yourself >>
text-decoration-style The CSS text-decoration-style property sets the style of the under-line decoration Try yourself >>
tab-size The CSS tab-size property sets the width of a CSS tab Try yourself >>
text-indent The CSS text-indent property defines the indentation of the first line in each block of text Try yourself >>
text-shadow The CSS text-shadow property adds a shadow to Element's text Try yourself >>
text-transform The CSS text-transform property is in charge of the capitalization of text Try yourself >>
line-height The CSS line-height property defines the height of a line (only positive value) Try yourself >>
vertical-align The CSS vertical-align property defines the vertical alignment of an element Try yourself >>
letter-spacing The CSS letter-spacing property sets the space between characters in the text Try yourself >>
word-spacing The CSS word-spacing property sets the space between words in the text Try yourself >>
white-space The CSS white-space property handles the white-space inside an Element Try yourself >>
word-break The CSS word-break property decides how words should break once reached the end of the line Try yourself >>
word-wrap The CSS word-wrap property forces long words to wrap onto the next line Try yourself >>
text-align-last The CSS text-align-last property specifies how to align the last line of an Element's text Try yourself >>










Learn about CSS Lists


There are two types of CSS Lists, unordered and ordered.


CSS allows better list customization than HTML, even images can be used as lists


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
list-style be efficient and specify all the CSS list-style properties in one declaration Try yourself >>
list-style-image The CSS list-style-image property place an image instead of the list-item marker Try yourself >>
list-style-position The CSS list-style-position property defines the position of the list-item marker Try yourself >>
list-style-type The CSS list-style-type specifies the type of list-item marker Try yourself >>









Learn about CSS Visual Formatting


The CSS Visual Formatting model is in charge of how elements (divs, boxes, images, sections,) are processed for visual media such as computer, tablets, phones, and other screens


The layout of the boxes is depend on many factors, box dimensions, type of the element (block or inline), relationships between elements, positioning (normal, float, flow, absolute and more)


The CSS Visual Formatting model explains about Inline-level Elements, Block-level elements and more


You can change how an element will be displayed on a web page by understanding the CSS Visual Formatting


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
position The CSS position property controls the position and how an element will be displayed on the screen, there are several properties, fixed, static, absolute Try yourself >>
top The CSS top property affects the vertical position of a positioned element, it will not effect non-positioned elements Try yourself >>
bottom The CSS bottom property affects the vertical position of a positioned element, it will not effect non-positioned elements Try yourself >>
left The CSS left property affects the horizontal position of a positioned element, it will not effect non-positioned elements Try yourself >>
right The CSS right property affects the horizontal position of a positioned element, it will not effect non-positioned elements Try yourself >>
display The CSS display property defines the type of the rendering box of an element Try yourself >>
float The CSS float property defines how an element floats Try yourself >>
clear The CSS clear property sets wherher an elemenet must be moved below floating elements that precede it Try yourself >>
z-index The CSS z-index property defines an order of numbers, an element with greater number is always in front of an element with a lower number Try yourself >>
overflow The CSS overflow property defines what to do when an element's content is too big to fit in its block formatting context Try yourself >>
resize The CSS resize property defines whether and if a user can resize an element Try yourself >>
visibility The CSS visibility property defines if an element is visible by the user or not Try yourself >>
cursor The CSS cursor property controls the mouse cursor when a user is pointing over an element Try yourself >>
box-shadow The CSS box-shadow attaches shadows to an element Try yourself >>
box-sizing The CSS box-sizing property sets how the total width and height of an HTML element is calculated Try yourself >>










Learn about CSS Dimension


In CSS there are several dimension properties such as, height, width, max-height, min-height and more, these properties allow us to control the elements and boxes that we want to style and apply on our website or project


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
height The CSS height property defines the height of an element, it does not include padding, margin, and borders pixels Try yourself >>
max-height The max-height property sets the maximum height of an element, if the screen is smaller than the element max height, the max height will lose pixels, making the element responsive for any screen size Try yourself >>
max-width The CSS max-width property sets the maximum width of an element, max-width prevents the used value of the width property from becoming larger than the value set by max-width. Try yourself >>
min-height The CSS min-height property sets the minimum height of an HTML element, if the image or text are smaller than the minimum height, the minimum height will be applied Try yourself >>
min-width The CSS min-width property sets the minimum width of an element, if the image or text are smaller than the minimum width, the minimum width will be applied Try yourself >>
width The CSS width property defines the width of an HTML element, it does not include padding, margin, and borders pixels Try yourself >>









Learn about CSS Outline


The CSS Outlines are used to highlight elements, CSS Outlines do not take up space, since they are placed on top of the element


CSS Outlines don't change the size or position of an HTML element


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
outline The CSS outline property is a line that is drawn just outside the border edge, The outline is not a part of the element's dimensions Try yourself >>
outline-color The CSS outline-color property sets the CSS outline's color Try yourself >>
outline-offset The CSS outline-offset property adds space between an outline and the border's edge, the space is transparent Try yourself >>
outline-style The CSS outline-style property defines the style of an element's outline Try yourself >>
outline-width The CSS outline-width property defines the element's outline width Try yourself >>









Learn about CSS Print


CSS Print properties help to define how a document should behave when printed


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
page-break-after The CSS page-break-after property adds a page break after an element @media print { footer {page-break-after: always;} }
page-break-before The page-break-before property adds a page break before an element @media print { h2 {page-break-before: always;} }
page-break-inside The CSS page-break-inside property decides if a page break should be avoided @media print { pre, blockquote {page-break-inside: avoid;} }









Learn about CSS Tables


The CSS Tables properties are used to display tabular data, the benefit of the CSS Tables is that we can style them without deleting their SEO benefits, so in the end we will have beautiful web page and alot of content for the search engines.


The CSS Tables are a good way to describe and display a large amount of content easily to the reader


The content you are reading right now is also inside a CSS Table, enjoy creating your own table style!


Click to return to the CSS dictionary main menu


Property Features Short explanation Code example
border-collapse The CSS border-collapse property decides if a table border should collapse into a single border or be separated Try yourself >>
border-spacing The CSS border-spacing property sets the distance between the borders of adjacent cellsת this property applies only when border-collapse is separate. Try yourself >>
caption-side The CSS caption-side property defines the table caption placement in the web page Try yourself >>
empty-cells The CSS empty-cells property selects empty table cells, and specify whether or not to display background and border on them Try yourself >>
table-layout The CSS table-layout property controls how to lay out the table rows columns, and cells Try yourself >>












Navigation