Tuesday, 20 August 2013

Common CSS Terms

In addition to HTML terms, there are some common CSS terms you will want to familiarize yourself with. The more you work with HTML and CSS the more these terms will become second nature.


A selector determines exactly which element, or elements, the corresponding styles will be applied to. Selectors can include a combination of different IDs, classes, types, and other attributes – all depending on how specific you wish to be. Selectors can be identified as everything that comes before the first curly brace, {.
  1. p { ... }


A property determines the style that will be applied to an element. Properties can be identified as the text coming immediately before a colon. There are an abundant number of properties you can use, and new ones are continually being added.
  1. p {
  2. color: #ff0;
  3. font-size: 16px;
  4. }


A value determines the behavior of a property. Values can be identified as the text in-between the colon and semicolon.
  1. p {
  2. color: #ff0;
  3. font-size: 16px;
  4. }

CSS Structure & Syntax

CSS works by using selectors to apply styles to HTML elements. All CSS styles cascade, allowing different styles to be inherited by multiple elements.
The following syntax demonstrates how styles would be applied to every paragraph.
  1. p {
  2. color: #ff0;
  3. font-size: 16px;
  4. }

Long vs. Short Hand

In CSS there are multiple different ways to declare values for a property. With long hand CSS you stack multiple declarations, one after the other for each property and value. With short hand CSS you use one property and list multiple values. It is best to use short hand CSS as it requires less code. Not all properties support short hand CSS so make sure you are using the correct property and value structure.
  1. /* Long Hand */
  2. p {
  3. padding-top: 10px;
  4. padding-right: 20px;
  5. padding-bottom: 10px;
  6. padding-left: 20px;
  7. }
  8. /* Short Hand */
  9. p {
  10. padding: 10px 20px;
  11. }
  12. /* Short Hand */
  13. p {
  14. padding: 10px;
  15. }