A CSS property is used to define what specific style of the CSS you are referencing. CSS will always look like this:

selector{
property: value;
property: value;
...
}

For example, to make your text red in all <p> tags, your CSS may look something like this:

p{
color:red;
}

Here is a list of CSS properties. All of these CSS properties can be used to build onto your HTML website!

  • color - this changes the color of the text. The value for this property would be the desired color.
  • font-size - this changes the size of the text. The value for this property would be the desired size (px, pt, em, %, etc).
  • font-family - this changes the type of the text. The value for the property would be the desired font family (arial, times new roman, etc).
  • background-color - this changes the color of the background. The value for this property would be the desired color.
  • background-image - this changes the image of the background. The value for this property would be the desired image. (flower.jpg, images/background-sun.jpg, etc).
  • float - this floats the element to the specified side of the screen. The value for this property is usually "left", "right", or "auto"
  • text-align - this aligns the text (or object) in a specified way. The value for this property is the desired alignment (left, right, center, etc).
  • padding - this adds padding to the element. The value for this property would be the desired amount of padding (px, pt, em, %, etc).
  • margin - this adds margins to the element. The value for this property would be the desired amount of margins (px, pt, em, %, etc).

    NOTE: There are both similarities and differences between margin and padding that are worth mentioning. First, you can define certain sides of both by adding "-bottom", "-left", "-top", or "-right" to the end of the property. For example you might want to use:

    margin-top: 5%;

    This will add 5% margin to the top of the element.

    Also keep in mind that, unlike padding, margins can be negative. For example, you may want to use:

    .move-up{
    margin-top:-15%;
    }

    Using this, you can pull objects higher their current position. This can be very helpful. For example, This may be necessary to pull text over an image.

NOTE: Keep in mind that CSS can accept hexadecimal codes for colors anywhere it can accept a color!

Some CSS properties are browser specific. For example, the following css will make a non-a tag clickable. However, notice that properties are listed multiple times because this functionality is not yet unified across all browsers.

.clickable-div{
  -webkit-user-select: none; /* Chrome/Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
  cursor: pointer;
}

The number of properties you can use in CSS is pretty much endless. Luckily, you can learn them as needed! For more CSS properties, please visit W3Schools.

Just for a quick tip, here's a responsive IFrame cheat!

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  z-index:1000;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Don't know what CSS is? Click here to learn about how to write CSS.

Startup Discount
Small Business?
Contact us for an Enormous Discount!