Commonly Used Basic CSS Properties

Course Content

Introduction to CSS Part I

color

This property sets the color of the text. You can specify the color using a name (e.g., red), a hex code (e.g., #ff0000), or an RGB value (e.g., RGB (255, 0, 0)).

index.html

index.css

index.js

font-size

This property sets the size of the text. You can specify the size using a unit of measurement (e.g., px, em, rem).

index.html

index.css

index.js

font-family

This property sets the font family for the text. You can specify a specific font (e.g., Arial) or a generic font family (e.g., sans-serif).

index.html

index.css

index.js

background-color

This property sets the background color of an element. The value can be specified using a name, hex code, or RGB value, just like the color property.

index.html

index.css

index.js

text-align

This property sets the alignment of the text within an element. The possible values are left, center, right, and justify.

index.html

index.css

index.js

margin

Margin is used to add space outside an element, and padding is used to add space inside an element. The margin property is used to add space around the outside of an element. It can be set for each side of the element individually (top, right, bottom, left) or all sides at once.
For example, to add 20 pixels of margin to the top and bottom of an element, you can use the following CSS:

To add 20 pixels of margin to all sides of an element, you can use the following CSS:

index.html

index.css

index.js

padding

The padding property in CSS is used to add space within an element. It can add space inside an element's top, bottom, left, and right sides. Padding is different from margins, which add space outside of an element.
It is also applied similarly to how margin is:

Just like margin, padding can also be specified different values for each side of the element:

index.html