• Tweet

There are a number of CSS properties... they are innumerable. Some, however, you won't even use except when writing really strict code because doing so would be too tedious--for which programming languages exist. Therefore, in this lesson, you will only learn those that are most common and useful. Please visit the CSS tutorials page for a more extensive coverage on CSS properties and rules and complex syntax structures for a gorgeous website design.

Using CSS Properties

Before going straight into learning CSS properties, you must become accustomed to writing them in their syntax. Here is the syntax.

Properties

• The color property specifies the color of the designated selector. For example, if I use the selector 'p' for all <p> elements in my HTML page, and add the rule: color: red; then all of the 'p' elements will be made red. The color property can accept different values including hex code, RGB value, and color name (limited).
• There are also broader properties with many subsets. For example, the background property, which is not useful by itself, but has many widely used and extremely common properties. What follow are some of the most common properties of the subset background:
• background-color: specifies and sets the color of the background, if applicable, to a block-level element. It can accept the same values as the color property, including hex code, RGB values, and some color names, like blue.
• background-image: besides specifying the color of the background of the block-level element, you can also specify an image that you want to be applied as a background. Be careful, though, as images repeat across planes and may or may not show how you intended them to. Be sure to test them out on different window sizes and browser types (important ones like Chrome, Safari, Firefox).
• Another property is the font-family property. This property sets the font for the selector. So, if use make the body your selector, then all the text in the body will be in this font. If you don't have a specific font to attribute as a value, always include either serif (with curly tails) or sans-serif (without). This takes in multiple values, going from top priority to lowest priority.
• The text-align property is extremely useful for setting the visual display on text on your website. With this property, you can set the text to align left, center, right, or justify (align with the left and right of the document). It therefore accepts the values: center, and left and right and justify, among others.
• The text-decoration property is very commonly used for adding popular effects such as underline, overline, strikethrough, and blink. Thus, its values are: underline, overline, line-through, and blink.

Now that you have some foundation with basic CSS knowledge, lets start using it with some more HTML.

 Next Lesson