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.