Use Css change our webpage view improve how it looks and it’s beauty. Beautiful webpage use a lot of style and in this article we will see how to handle it.
Css style has a lot of properties, in this article we talk about more common and useful properties. To have a full understanding of css properties you need to search and notice that it’s impossible to memorise all of them. The only thing you need to remember is they are exist and how to use them and don’t forget to google it at anytime you need to settle a particular properties or option in your webpage.
CSS Basic Properties
Here are some basic CSS properties to work with.
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 |
|---|---|---|
| list-style | Sets all the properties for a list in one declaration | list-style-type, list-style-position, list-style-image, inherit |
| list-style-image | Specifies an image as the list-item marker | URL, none, inherit |
| list-style-position | Specifies where to place the list-item marker | inside, outside, inherit |
| list-style-type | Specifies the type of list-item marker | none, 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
| Property | Description | Values |
|---|---|---|
| border | Sets all the border properties in one declaration | border-width, border-style, border-color |
| border-bottom | Sets all the bottom border properties in one declaration | border-bottom-width, border-bottom-style, border-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 |
| border-bottom-width | Sets the width of the bottom border | border-width |
| border-color | Sets the color of the four borders | color_name, hex_number, rgb_number, transparent, inherit |
| border-left | Sets all the left border properties in one declaration | border-left-width, border-left-style, border-left-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 |
| border-right | Sets all the right border properties in one declaration | border-right-width, border-right-style, border-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 |
| border-style | Sets the style of the four borders | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit |
| border-top | Sets all the top border properties in one declaration | border-top-width, border-top-style, border-top-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 | Sets all the font properties in one declaration | font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar, inherit |
| font-family | Specifies the font family for text | family-name, generic-family, inherit |
| font-size | Specifies the font size of text | xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %, inherit |
| font-style | Specifies the font style for text | normal, italic, oblique, inherit |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font | normal, small-caps, inherit |
| font-weight | Specifies the weight of a font | normal, 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
One thought on “How to handle Css properties”