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!