CSS Properties

CSS has so many different properties that it is confusing to keep a track of it. Most of the tutorials available online are only useful if you try the examples. This blogspot is a cheatsheet of some of the CSS properties. List is long so I am attempting to cover only a few. If you like it, please comment down below and I will make more blogposts like these

Color:
It will change the color of the text in the tag. For ex:

p {
color: blue;
}

This will change the text color to blue in all paragraphs.

Table: 
It will help you to add table to the page.

• Border-collapse: If you decide to collapse the borders of the table then you should use border-collapse property.
• border-collapse can take up following values: 
• initial - Initial will remove the set value and revert it to the default.
• inherit - Inherit will take this property from its parent element.
• collapse - Collapse will collapse the double edged border to single property. 
• separate - Separate will separate the borders. This is the default value. 
•  For ex: table { border-collapse: separate; }
• Border-spacing: If you want to put some space between different table cells then you should use border-spacing property. 
• border-spacing can take up following values: length, initial, inherit. 
• length can be specified in px, cm, For ex:
• For ex: table { border-spacing: 10px, 20px }
• 10px will set the horizontal spacing 20px will set the vertical spacing. 

• Caption: Tables are always captioned. So you can change the alignment of the captions to top, bottom, or inherit it or change it to initial value. 
• For ex: caption { caption-side: bottom; }

• Empty-Cells: If you want to hide or show the empty cells in a table then you can use the property of table called as empty-cells. 
• For ex: table { empty-cells: hide; }
• In above example, the values can be changed to hide, show, initial, or inherit. 
• The default value is show. 

• Table-Layout: 
• Sometimes it happens that in a table you have some content that is too big to fit in its cells. You can expand the table width as much as you like but there will surely be a situation, where your table content doesn't fit in fully. 
• You can fix it by make the table-layout property to auto. It will handle the situation, where you have unknown length of content. 
• It can take following values: fixed, auto, inherit, initial
• For ex: table { table-layout: fixed; }

Hope you liked this article. If you want to read more of these then please comment down below. I will be happy to write similar articles if that helps! 

Text properties of CSS3

Font-face

In CSS3, one can download fonts from the web and use them using font-face rule. You just need to include it on your web-server. Once the user visits your website, the font will be downloaded to their machine if they don't have it. It is specified with the @font-face property. For ex:

@font-face {
 font-family: MyHelvetica;
 src: url(myHelvetica.woff);
}

If you to use it on any element then you specify it as font-family of that element as follows:

p {
 font-family: MyHelvetica;
}

Text Effects 

Overflow property: 
How will you handle a text-overflow in CSS? CSS3 introduced a new property called as text-overflow that can be defined as ellipsis or clipped. With ellipsis, the overflowing text will be replaced by ellipsis. Similarly, with clip, the overflowing text will be clipped. It is defined as follows:

div {
 text-overflow: clip;
}

div {
 text-overflow: ellipsis;
}

Moreover, there is an overflow property that can be specified with text-overflow. overflow property can take hidden or visible values. If you specify overflow as hidden then the cropped or hidden text will not be visible. if you specify overflow as visible, then you can see the cropped text. For ex:

div {
 overflow: hidden;
 text-overflow: clip;
}

div {
 overflow: visible;
 text-overflow: clip;
}

Word-wrap

If there is a very lengthy word then it might end up overflowing out of your div or p. In that case, you can specify word-wrap as break-word;

p {
 word-wrap: break-word;
}

Word-wrap can take two other values: keep-all, break-all keep-all: It will break the lengthy words at hyphens. break-all: It will break the lengthy words at any character. Ex:

p {
 word-wrap: keep-all;
}

p {
 word-wrap: break-all;
}

What is the difference between break-all and break-word? break-word will adjust the words so they do not break in middle. And it will wrap long words onto the next file. break-all will break the word at the width limit. The words that are broken can be any words(lengthy or not).

You might also like:
CSS Properties

What is 2D transform in CSS3?

CSS3 has 2D and 3D transform properties that allows to transform the elements. Transforming the elements means translating, rotating, scaling or skewing it. This will result in change of shape, size, and position of the element. Following are the properties that help you achieve 2D or 3D effects:

Translate: 
It will take two values, one for x-axis and other for y-axis. It is specified as follows: translate(10px, 50px). In this case, it will move 10px on x-axis and 50px on y-axis. For ex:

div {
 transform: translate(100px, 75px);
}

Rotate: 
It will rotate the element clockwise or anticlockwise. The values are degrees. It is specified as rotate(20deg) or rotate(-20deg). It will rotate the element by 20 degrees in clockwise or anticlockwise direction For ex:

div {
 transform: rotate(50deg);
}

Scale: 
It will increase the size of the element. It is specified as scale(x, y). The first value will increase the width of the element, and second value will increase its height. If scale(10,20) is specified, then width will be increase by 10 times and height will be increase by 20 times. For ex:

div {
 transform: scale(9, 7);
}

SkewX: 
It will skew the element along the X-axis. The value of skew is specified in degrees. If skewX(20deg) is specified then it will be skewed on X axis by 20 degrees. The value can be negative too. For ex:

div {
 transform: skewX(50deg);
}

SkewY: 
It is similar to SkewX with only difference of element being skewed along Y-axis. For ex:

div {
 transform: skewY(50deg);
}

Skew: 
It is similar to SkewX or SkewY with only difference that two values are specified X and Y. First specified value being X and second specified value being Y. For ex:

div {
 transform: skew(50deg, 50 deg);
}

Explain transition property of CSS3?

Transition allows you to smoothly update the property values. You specify the time period and the property to the changed. The property update will happen during the specified time period. It is specified as follow: transition: width 2s. This means that width will change to its new value in 2 seconds. For ex:

div {
 width: 10px;
 height: 20px
 transition: width 2s, height 4s;
}

div:hover {
 width: 20px;
 height: 40px;

 transition: width 2s, height 4s
}

In the above example, upon hover over div width will change from 10px to 20px within 2s. And height will change from 20px to 40px within 4s.



Timing:
 You can specify the transition timing function as linear, ease, ease-in, ease-out, ease-in-out for the effect to take place.

• Ease will make transition effect with a slow start then fast, then slow in the end. 
• Ease-in makes transition effect to remain at same speed from start to end. 
• Ease-out starts out the transition effect as slow then it moves at normal speed. 
• Ease-in-out starts out the transition as slow and ends it as slow. For ex:

div {
 transition-timing-function: ease;
}

Delay: 
Since transition is all about timing an effect on a specific element, we can delay our timing as well. It can be specified by transition-delay: 1s.

div {
 transition-delay: 2s;
 }

Explain animation in CSS3

One of the coolest property of CSS3 is animations. You can create an animation with only a CSS to your file. Since animation is like a series of frames, you will have to specify properties of different frames at different times. For each frame, you will have to specify the animation name, duration. Then in the animation name you will have to specify the from and to values of each property that you want to change. For ex:

div {
 width: 50px;
 height: 50px;
 background-color: #d8d8d8;
 animation-name: animateDiv;
 animation-duration: 4s;
}

@keyframes animateDiv {
 from {background-color: #d8d8d8; }
 to {background-color: #d0d0d0; }
 from {width: 50px; }
 to {width: 150px; }
 from {height: 50px; }
 to {height: 100px; }
}

In the above example, we specified animation-name & animation-duration in the div section. Animation-name is animateDiv, for which we specify from and to values of different properties. All the from to to values will take effect for the properties within 4s. If you don't want to change the animation from just one value to second value, you can specify the change to take place at specific percent. If you specify 10%{height: 10px;}, 20%(height: 20px} then height will change to 10px at 10% of animation-duration, 20px at 20% of animation-duration. For ex:

@keyframes animateDev {
 0% {height: 10px}
 20% {height: 20px}
 40% {height: 30px}
 60% {height: 40px}
 80% {height: 50px}
 100% {height: 60px}
}

In the above example, the height changes to 10px at 0% of animation-duration, to 20px at 20%, and so on


Animation Delay:
It will start the animation at a specified delay. It is specified as animation-delay: value; For ex:

div {
 animation-delay: 2s;
}

Animation Iteration:
Sometimes you don't want to run an animation only once, you might want to run it a lot of times. In that case, you can specify the iteration-count. And if you want to run an animation forever, you just need to specify the value to infinite. You specify the property and value as animation-iteration-count: infinite For ex:

div {
 animation-iteration-count: 3;
}

OR 

div {
 animation-iteration-count: infinite;
}

Animation Direction:
You can run the animation in reverse or alternate cycle manner. You specify it as animation-direction: reverse; or animation-direction: alternate. If you specify alternate direction, then the animation will run in clockwise and anti-clockwise direction on alternate iterations. For ex:

div {
 animation-direction: reverse;
}

What are gradients in CSS3?

What is linear gradient in CSS?

• Gradient allows for smooth transitions between colors, which helps to reduce download speed and lowers bandwidth requirements.
• It is applicable on the background property.
• There are two types of gradient in CSS3: Linear and radial
• For linear gradient you must specify 2 colors and direction in which the color. For ex: background: linear-gradient(top, red, blue); //This will make the color change from red to blue starting from top to bottom.
• Different directions can be: top, left, right, bottom
• Top to bottom is default value for the linear gradient. In that case the definition looks like: linear-gradient(red, blue). If direction is omitted, by default top direction is assumed.
• For different browsers linear gradient property is referred as:
• -webkit-linear gradient: For Safari
• -0-linear gradient: For Opera
• -mox-linear gradient: For: For Firefox
• linear gradient: For standard syntax
• To specify gradient direction as diagonal 2 endpoints are supposed to be mentioned.
• For ex: linear-gradient(to bottom right, red, black) //It will move from bottom right starting with red color and gradually change it to black
• You can specify angles in the linear gradient as follows: linear-gradient(180deg, red, blue)
• You can specify multiple colors too like this: linear-gradient(red, green, blue, black)
• Gradient can be made transparent to generate a fading effect. For transparency, rgba function with 0 to 1 can be added.
• 0 indicates: full transparency
• 1 indicates: full color and zero transparency.
• For ex:
• linear-gradient(rgba(255,0,0,0), rgba(255,2,3,1))

What is radial gradient in CSS?

• Linear gradient allows you to transform the color from the sides and corners of a shape. However, radial gradient allows you to transform color from center.
• It is similar to linear gradient wherein you have to specify at least 2 colors. 
• For ex: radial-gradient(red, blue)
• You can specify different width for the color stops like this: radial-gradient(red 5%, blue 95%) //Red will only occupy 5% and blue will occupy 95%
• If you have to repeat the result of a radial gradient across an element then you should use, repeating-radial-gradient. 
• For ex: repeating-radial-gradient(red, blue 40%, green 35%)

Explain border radius property of CSS3

• border-radius property of Css3 allows to give a web page element the looks of rounded corners.

• You can specify it like this:
• border-radius: 10px

• You can specify different radius value for each corner of the element. You can specify 4 values for each corner, 3 values, 2 values, and 1 value for all corner:
• If 4 values are specified then 1st, 2nd, 3rd, 4th value will apply to top-left, top-right, bottom-right, bottom-left corner respectively.
• For ex: border-radius: 40px, 30px, 20px, 10px; top-left = 40px top-right = 30px bottom-right= 20 px bottom-left = 10px
• If 3 values are specified then 1st, 2nd, 3rd value will apply to top-left, top-right, and (bottom-left & bottom-right) respectively. For ex: border-radius: 40px, 30px, 20px;
• In above ex: top-left = 40px top-right = 30px bottom-left and bottom-right = 20 px
• If 2 values are specified then 1st and 2nd value will apply to following 2 sets respectively. For ex:
• border-radius: 40px, 30px;
• In above ex: top-left and top-right= 40px bottom-left and bottom-right = 30px
• If only value is specified then all corners will have the same value: 
• For ex: border-radius: 40px;

• You can create elliptical corners too: 
• For ex: border-radius: 40px/20px;

• If you have to specify only one border than you can specify it as follows
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius