8 Important CSS Properties You Must Know (2020)

Cascading Styles Sheets (CSS) is used to style the web pages. Let's discuss about some of the properties that are very important in CSS & should be known by every Web developer.

1. Font
2. Color
3. Background
4. Floats
5. Margin and Padding
6. Borders
7. Width and Height
8. Display

1. Font:
Fonts refer to the appearance of text in your website. There are a few things to look out for. Like other properties, font has a shorthand. Do note that it is common to see the font shorthand declaration only once in the whole CSS file. It is common to use the different properties at other times.

font-family: used to declare the typefaces and fontstack that you would like to use.
font-size: size of font. Takes a value thats the same as width and height
font-style: Style of the font. valid values are either italic or normal.
font-weight: weight of font. determines if text is bold. valid values are normal, bold, bolder, or 100 - 900.
font-variant: variant of the font. valid values are normal and small caps. Defaults to normal.
line-height: determines the amount of space above and below the text. Very important to ensure good readability.


2. Color:
Color basically refers to the color of the text. It takes on a #hex value or a rgb value as with border colors.

Syntax:
body{
color: red;
}


3. Background:
Background refers to the background of the HTML element.
Background-color: color of the background. Takes #hex value or an rgb value
background-image: url(url). Takes on the path to your image.
background-repeat: whether you like the background of your website to repeat if the width exceeds the background size. Other values are repeat, repeat-x and repeat-y.
background-position: position of the background relative to the HTML element. Two values are needed here, X and Y, where X is the amount of offset from the left and Y is the amount of offset from the top. Takes on either unit values (as with width and height) or left,center,right and top,center,bottom for left and right respectively.


4. Floats:
Floats are one of the core elements in today’s website. If you see two columns of text side by side, a sidebar / content configuration. Another commonly used area for floats are navigation items.
Floats have 3 basic properties that you can use often:left, right, none - removes the float.


5. Margin and Padding:
Margins and Paddings dictate the spaces between elements on your website. They are very similar and have the same units as Width and Height.
The only difference between margins and paddings is that the margins affect the area outside of borders whereas paddings affect areas inside the border.


6. Borders:
The CSS border properties allow you to specify the style, width, and color of an element's border.
border-width – width of the border. Same units as width and height
border-style – style of the border. Usual values are solid and dashed. For a complete list, take a look at W3 Schools Website
border-color – color of the border. Hex, and rgb values can be used.


7. Width and Height:
Width and height properties are used closely with display:block and display:inline to set the width and height of HTML elements while creating a website. Common units units for Width and Height are:
px - Pixels.
em - A unit of measurement, where 1 em = current font size.
rem - Root em. Same measurement as em, but makes life much easier without the inheritance problem
% - Percentages.
auto - highly useful unit, will explain below.


8. Display:
Display takes on many different values, but only 4 are most commonly used.
div{
display: block;
display: inline;
display: inline-block;
display: none;
}

block: Many HTML elements are set to this mode of display by browsers’ stylesheets. They include <div>, <ul> and text blocks like <p>. Block level elements by default take up as much space as they can, and they cannot be placed on the same horizontal line with any other display modes, include other block elements. (Exception: unless they are floated)
With block elements, you gain the ability to alter the element’s width and height to your liking, which is why they are used for layouts

inline: The inline mode wraps many HTML elements tighty around them and is the defaults for all elements that are not specified with any other display values. Elements can be placed side by side on the same line as inline elements. Think about the <strong> tag that bolds elements, the <em> tag that creates italics and <a> tags that allow you to link to other web pages. These are all examples of inline elements. You will not be able to change an inline element’s width and height.

inline-block: This is one display value that combines the properties of both block elements and inline elements. You get the ability to set a height and width, and the element can appear on the same horizontal line as other elements.

none: Display none hides the element from the website and it will not be shown visually. This is very useful for CSS Dropdown menus where additional options appear when you hover on navigation menus. The rationale is that elements are set to a display value of none initially, and the display value is changed to block on hover.

Conclusion:
Thank you so much for reading, and I hope you learned a bit about CSS! If you want to gain some knowledge on Important properties related to CSS3, click here.

Happy Learning!