CSS Properties In Function OrderS2C Home « CSS Properties In Function Order
Click on a Property Name to see the reference for that CSS Property.
Click on an Associated Lesson to see how the CSS Property is used.
Other CSS Visual Property Reference Tables
CSS Properties in Alphabetical Order
CSS Properties in Lesson Order
Function | CSS Property | Description | Associated Lesson |
---|---|---|---|
Backgrounds | background |
Shorthand CSS property for specifying the other background image properties. | CSS Intermedite Lesson 1 - Backgrounds |
background-attachment |
Specifies whether the background image is fixed or scrolls. | ||
background-color |
Specifies the background colour for an element. | ||
background-image |
Specifies the background image for an element. | ||
background-position |
Specifies the position of a background image within an element. | ||
background-repeat |
Specifies if and how a background image is repeated. | ||
Box Model Borders | border |
Shorthand CSS property for specifying the colour, style and width of all four borders of a box. | CSS Basic Lesson 9 - Borders |
border-bottom |
Shorthand CSS property for specifying the colour, style and width for the bottom border of an element. | ||
border-bottom-color |
Specifies the color of the bottom border for an element. | ||
border-bottom-style |
Specifies the style of the bottom border for an element. | ||
border-bottom-width |
Specifies the width of the bottom border for an element. | ||
border-color |
Shorthand CSS property for specifying the border color for all four borders of a box. | ||
border-left |
Shorthand CSS property for specifying the colour, style and width for the left border of an element. | ||
border-left-color |
specifies the color of the left border for an element. | ||
border-left-style |
Specifies the style of the left border for an element. | ||
border-left-width |
Specifies the width of the left border for an element. | ||
border-right |
Shorthand CSS property for specifying the colour, style and width for the right border of an element. | ||
border-right-color |
specifies the color of the right border for an element. | ||
border-right-style |
Specifies the style of the right border for an element. | ||
border-right-width |
Specifies the width of the right border for an element. | ||
border-style |
Shorthand CSS property for specifying the border style for all four borders of a box. | ||
border-top |
Shorthand CSS property for specifying the colour, style and width for the top border of an element. | ||
border-top-color |
specifies the color of the top border for an element. | ||
border-top-style |
Specifies the style of the top border for an element. | ||
border-top-width |
Specifies the width of the top border for an element. | ||
border-width |
Shorthand CSS property for specifying the border width for all four borders of a box. | ||
Box Model Dimensions | height |
Specifies the content height for a box model element. | CSS Intermediate Lesson 2 - Finishing The Box Model |
line-height |
Specify a minimal height for line boxes within a box model element | ||
max-height |
Specifies a maximum content height for a box model element. | ||
max-width |
Specifies a maximum content width for a box model element. | ||
min-height |
Specifies a minimum content height for a box model element. | ||
min-width |
Specifies a minimum content width for a box model element. | ||
vertical-align |
Specify the vertical alignment of an element | ||
width |
Specifies the content width for a box model element. | ||
Box Model Margins | margin |
Shorthand CSS property for specifying the other margin properties. | CSS Basic Lesson 8 - Padding & Margins |
margin-bottom |
Specifies the margin space below the padding and border for an element. | ||
margin-left |
Specifies the margin space to the left of the padding and border for an element. | ||
margin-right |
Specifies the margin space to the right of the padding and border for an element. | ||
margin-top |
Specifies the margin space above the padding and border for an element. | ||
Box Model Padding | padding |
Shorthand CSS property for specifying the other padding properties. | CSS Basic Lesson 8 - Padding & Margins |
padding-bottom |
Specifies the padding space below the element content. | ||
padding-left |
Specifies the padding space to the left of the element content. | ||
padding-right |
Specifies the padding space to the right of the element content. | ||
padding-top |
Specifies the padding space above the element content. | ||
Display | cursor |
Specifies the type of cursor to be displayed when pointing at an element | CSS Intermediate Lesson 8 - Display |
display |
Specifies the type of box generated by an element. | ||
overflow |
Specify what to do with the content of a block container, that overflows the element's box. | ||
visibility |
Specify whether the box generated by an element is rendered. | ||
Fonts | font |
Shorthand CSS property for specifying the other font properties. | CSS Basic Lesson 6 - Using Fonts |
font-family |
Specify the font family to use for an element. | ||
font-size |
Specify the font size to use for an element. | ||
font-style |
Specify the font style to use for an element. | ||
font-variant |
Specify the font variant to use for an element. | ||
font-weight |
Specify the font weight to use for an element. | ||
Generated Content | content |
Used to generate content in a document in conjunction with the :before and :after pseudo-elements. | CSS Advanced Lesson 1 - Generated Content |
counter-increment |
Increments one or more counters set with the content CSS property. |
||
counter-reset |
Resets one or more counters set with the content CSS property. |
||
quotes |
Specifies quotation marks for any number of embedded quotations. | ||
Lists | list-style |
Shorthand for specifying the other list style properties. | CSS Advanced Lesson 3 - Styling Lists |
list-style-image |
Specifies an image to use for the list-item marker. | ||
list-style-position |
Specifies a position for the list item-marker with respect to the list element content. | ||
list-style-type |
Specifies a type to use for the list-item marker. | ||
Outlines | outline |
Shorthand CSS property for specifying the outline-color , outline-style and outline-width for an element. |
CSS Advanced Lesson 8 - Other Properties |
outline-color |
Specify the outline color for an element. | ||
outline-style |
Specify the outline style for an element. | ||
outline-width |
Specify the outline width for an element. | ||
Positioning | bottom |
Set a distance from the bottom of the page or containing block element for positioned elements. | CSS Intermediate Lesson 7 - Positioning |
clear |
Position an element under floated elements. | ||
clip |
Specify the displayable dimensions, of a visible, absolutely positioned element. | ||
float |
Move an element to the left or right edge of its containing element. | ||
left |
Set a distance from the left of the page or containing block element for positioned elements. | ||
position |
Specify a box position for an element. | ||
right |
Set a distance from the right of the page or containing block element for positioned elements. | ||
top |
Set a distance from the top of the page or containing block element for positioned elements. | ||
z-index |
Specify a stack order along the z-axis for positioned elements. | ||
Printing | orphans |
Specifies the minimum number of lines to display at the bottom of a page, when a page break occurs inside a block-level element. | CSS Advanced Lesson 7 - The Printed Page |
page-break-after |
Specifies page break behaviour to occur after this block-level element. | ||
page-break-before |
Specifies page break behaviour to occur before this block-level element. | ||
page-break-inside |
Specifies whether a page break should occur within a block-level elements generated box. | ||
widows |
Specifies the minimum number of lines to display at the top of the next page, when a page break occurs inside a block-level element. | ||
Tables | border-collapse |
Specifies whether table borders are collapsed (collapsed border model), or separated (separated border model). | CSS Advanced Lesson 4 - Styling Tables |
border-spacing |
Specifies a distance between cells when the separated border model is used. | ||
caption-side |
Specifies a position for a table caption. | ||
empty-cells |
Specifies whether empty cells display borders and backgrounds when the separated border model is used. | ||
table-layout |
Specifies the table layout algorithm to use when laying out a table. | ||
Text | color |
Specify the foreground colour of our text. | CSS Basic Lesson 5 - Styling Text |
letter-spacing |
Specify the spacing between text characters. | ||
text-align |
Align text for block-level elements, table cells and inline blocks. | ||
text-decoration |
Specify some text to decorate for an element. | ||
text-indent |
Allows us to indent text by a particular amount. | ||
text-transform |
Allows us to transform text in certain ways. | ||
white-space |
Specify how whitespace is displayed for an element. | ||
word-spacing |
Specify the word spacing between words in some text. | ||
Text Direction | direction |
Specifies the base writing direction of blocks, embeddings and overrides, table columns and incomplete lines of justified text for the Unicode bidirectional algorithm. | CSS Advanced Lesson 8 - Other Properties |
unicode-bidi |
Used in conjunction with the direction CSS property for handling birectional text. |