CSS Basic Properties

Here are some basic CSS properties to work with.

Text Properties

PropertyDescriptionValues
colorSets the color of a textRGB, hex, keyword
line-heightSets the distance between linesnormal, number, length, %
letter-spacingIncrease or decrease the space between charactersnormal, length
text-alignAligns the text in an elementleft, right, center, justify
text-decorationAdds decoration to textnone, underline, overline, line-through
text-indentIndents the first line of text in an elementlength, %
text-transformControls the letters in an elementnone, capitalize, uppercase, lowercase

For more information, visit the w3schools.com page on CSS Text.

List Properties

PropertyDescriptionValues
list-styleSets all the properties for a list in one declarationlist-style-type, list-style-position, list-style-image, inherit
list-style-imageSpecifies an image as the list-item markerURL, none, inherit
list-style-positionSpecifies where to place the list-item markerinside, outside, inherit
list-style-typeSpecifies the type of list-item markernone, disc, circle, square, decimal, decimal-leading-zero,
armenian, georgian, lower-alpha, upper-alpha, lower-greek,
lower-latin, upper-latin, lower-roman, upper-roman, inherit

For more information, visit the w3schools.com page on CSS Lists


Border Properties

PropertyDescriptionValues
borderSets all the border properties in one declarationborder-width, border-style, border-color
border-bottomSets all the bottom border properties in one declarationborder-bottom-width, border-bottom-style, border-bottom-color
border-bottom-colorSets the color of the bottom borderborder-color
border-bottom-styleSets the style of the bottom borderborder-style
border-bottom-widthSets the width of the bottom borderborder-width
border-colorSets the color of the four borderscolor_name, hex_number, rgb_number, transparent, inherit
border-leftSets all the left border properties in one declarationborder-left-width, border-left-style, border-left-color
border-left-colorSets the color of the left borderborder-color
border-left-styleSets the style of the left borderborder-style
border-left-widthSets the width of the left borderborder-width
border-rightSets all the right border properties in one declarationborder-right-width, border-right-style, border-right-color
border-right-colorSets the color of the right borderborder-color
border-right-styleSets the style of the right borderborder-style
border-right-widthSets the width of the right borderborder-width
border-styleSets the style of the four bordersnone, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
border-topSets all the top border properties in one declarationborder-top-width, border-top-style, border-top-color
border-top-colorSets the color of the top borderborder-color
border-top-styleSets the style of the top borderborder-style
border-top-widthSets the width of the top borderborder-width
border-widthSets the width of the four bordersthin, medium, thick, length, inherit

For more information, visit the w3schools.com page on CSS Borders


Font Properties

PropertyDescriptionValues
fontSets all the font properties in one declarationfont-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar, inherit
font-familySpecifies the font family for textfamily-name, generic-family, inherit
font-sizeSpecifies the font size of textxx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %, inherit
font-styleSpecifies the font style for textnormal, italic, oblique, inherit
font-variantSpecifies whether or not a text should be displayed in a small-caps fontnormal, small-caps, inherit
font-weightSpecifies the weight of a fontnormal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
Careful, many of these are not supported!

For more information, visit the w3schools.com page on CSS Font

Leave a Reply