8/25/22, 11:31 AM CSS Basic Properties

Back to Class Three page »

CSS Basic Properties

Here are some basic CSS properties to work with.

Text Properties
List Properties
Border Properties
Font Properties

Text Properties
Property Description Values
color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, length, %
letter-spacing Increase or decrease the space between characters normal, length
text-align Aligns the text in an element left, right, center, justify
text-decoration Adds decoration to text none, underline, overline, line-through
text-indent Indents the first line of text in an element length, %
text-transform Controls the letters in an element none, capitalize, uppercase, lowercase

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

List Properties
Property Description Values
Sets all the properties for a list in one list-style-type, list-style-position, list-style-image,
list-style
declaration inherit
list-style- Specifies an image as the list-item
URL, none, inherit
image marker
list-style- Specifies where to place the list-item
inside, outside, inherit
position marker
none, disc, circle, square, decimal, decimal-
leading-zero,
armenian, georgian, lower-alpha, upper-alpha,
list-style-type Specifies the type of list-item marker
lower-greek,
lower-latin, upper-latin, lower-roman, upper-
roman, inherit

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

Border Properties
Property Description Values
Sets all the border properties in
border border-width, border-style, border-color
one declaration
border-bottom Sets all the bottom border border-bottom-width, border-bottom-style, border-
web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html 1/2
8/25/22, 11:31 AM CSS Basic Properties

properties in one declaration bottom-color

border-bottom-color Sets the color of the bottom border border-color
border-bottom-style Sets the style of the bottom border border-style
Sets the width of the bottom
border-bottom-width border-width
border
color_name, hex_number, rgb_number,
border-color Sets the color of the four borders
transparent, inherit
Sets all the left border properties in border-left-width, border-left-style, border-left-
border-left
one declaration color
border-left-color Sets the color of the left border border-color
border-left-style Sets the style of the left border border-style
border-left-width Sets the width of the left border border-width
Sets all the right border properties border-right-width, border-right-style, border-
border-right
in one declaration right-color
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style
border-right-width Sets the width of the right border border-width
none, hidden, dotted, dashed, solid, double,
border-style Sets the style of the four borders
groove, ridge, inset, outset, inherit
Sets all the top border properties in border-top-width, border-top-style, border-top-
border-top
one declaration color
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border border-width
border-width Sets the width of the four borders thin, medium, thick, length, inherit

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

Font Properties
Property Description Values
font-style, font-variant, font-weight, font-size/line-height,
Sets all the font properties in
font font-family, caption, icon, menu, message-box, small-
one declaration
caption, status-bar, inherit
Specifies the font family for
font-family family-name, generic-family, inherit
text
xx-small, x-small, small, medium, large, x-large, xx-large,
font-size Specifies the font size of text
smaller, larger, length, %, inherit
font-style Specifies the font style for text normal, italic, oblique, inherit
Specifies whether or not a text
font-variant should be displayed in a small- normal, small-caps, inherit
caps font
normal, bold, bolder, lighter,
font-weight Specifies the weight of a font 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

Back to Class Three page »

web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html 2/2