Font Properties

The CSS font properties define the font family, boldness, size, and style of text.

SL NO Property Value
1 Font-style Normal (default), italic
2 Font-size px, %
3 Font-weight Lighter (default), bolder
4 Font-family Any family name, e.g., Times New Roman, Algerian
5 Font-variant Normal (default), small-caps

Font-style: It will be normal by default. If we set the value to italic, it will make the text italic.

Font-size: This property is used to increase or decrease the font size.

p {
    font-size: 20px;
}

In the above example, the text inside a <p> tag will have a font size of 20 pixels.

Font-weight: This property makes the text bold if we set the value to bolder. The default value is lighter.

Font-family: This property is used to set a particular font style for the text.

Font-variant: This property is used to display the text in uppercase and small caps.

Text Properties

CSS text formatting properties are used to format and style text.

SL NO Property Value
1 Color Color name, color codes
2 Text-align Left (default), right, center, justify
3 Text-indent px, %
4 Text-decoration Underline, overline, line-through, none
5 Text-transform Uppercase, lowercase, capitalize
6 Text-shadow H-value, V-value, Blur-ratio, color
7 Letter-spacing px, %
8 Word-spacing px, %
9 Line-height px, %

Color: This property is used to add color to the text.

h1 {
    color: red;
}

In the above example, the text inside the <h1> tag will be colored red.

Text-align: This property is used to align the text.

Text-indent: This property adds a space at the beginning of the first line of a paragraph.

Text-decoration: This property decorates the text with underlines, overlines, or through lines.

Text-transform: This property transforms the text to uppercase, lowercase, or capitalizes the first letter of each word.

Text-shadow: This property adds shadows to the text. At least two values must be provided.

h2 {
    text-shadow: 2px 2px 5px gray;
}

In the above example, the text inside the <h2> tag will have a shadow effect.

Letter-spacing: This property adds space between letters.

Word-spacing: This property adds space between words.

Line-height: This property defines the space between two lines of text.

CSS Backgrounds and Gradients

CSS background properties allow you to set the background color, image, and position of an element.

SL No Property Value
1 Background-color Color name, color code
2 Background-image Image name, image path, image address, linear-gradient(colors), radial-gradient(colors)
3 Background-repeat Repeat-x, repeat-y, no-repeat
4 Background-attachment Scroll (default), fixed
5 Background-position Left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom
6 Background-size Width height, cover

Background-color: This property is used to add a background color to an element.

Background-image: This property is used to add an image as a background.

Background-repeat: This property controls the repetition of the background image.

Background-attachment: This property controls whether the background scrolls with the page or is fixed.

Background-position: This property is used to set the position of the background image.

Background-size: This property is used to define the size of the background image.

body {
    background-color: lightblue;
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

In the above example, the background of the page is set to light blue with a centered image that covers the entire page without repeating.

Note: Always try to write the values and properties in lowercase as it is a good practice.

These are some of the fundamental properties of CSS. Try experimenting with these properties in different formats. If you have any questions, feel free to ask in the comment section below, and I’ll be happy to assist you!