What are CSS Fonts

CSS fonts are used to control the appearance of text on a web page. The CSS font properties include:

1. font-family: Used to set the font family for the text.
2. font-size: Used to set the size of the text.
3. font-weight: Used to set the boldness of the text.
4. font-style: Used to set the style of the text (such as italic).
5. font: Shorthand property to set all the above properties in one line of code.

For example, the following CSS code would set the font family to be “Arial,” the size to be “16px,” and the weight to be “bold” for all the “p” elements:

Copy codep {
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
}

It is also possible to use @font-face to import custom fonts from a font file and use it in your webpage.

Copy code@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

CSS Text Styling

CSS text styling is used to control the appearance of text on a web page. The CSS text properties include:

1. text-align: Used to set the alignment of the text within an element (left, center, right, justify).
2. text-decoration: Used to add decorations to the text (underline, overline, line-through, none).
3. text-transform: Used to control the capitalization of the text (uppercase, lowercase, capitalize, none).
4. letter-spacing: Used to control the spacing between letters.
5. word-spacing: Used to control the spacing between words.
6. line-height: Used to control the height of the lines of text.
7. text-shadow: Used to add a shadow effect to the text.
8. text-overflow: Used to control how text overflows an element.

For example, the following CSS code would center the text, underline it and make it uppercase for all the “p” elements:

Copy codep {
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
}

It is also possible to use ::first-letter and ::first-line pseudo-elements to style the first letter and line of a text respectively.

Copy codep::first-letter {

CSS Padding

CSS padding is used to add space between the content of an HTML element and its border. The CSS padding properties include:

1. padding-top: Used to set the top padding of an element.
2. padding-right: Used to set the right padding of an element.
3. padding-bottom: Used to set the bottom padding of an element.
4. padding-left: Used to set the left padding of an element.
5. padding: Shorthand property to set all the above properties in one line of code.

For example, the following CSS code would add 10 pixels of padding to all sides of a “div” element:

Copy codediv {
  padding: 10px;
}

You can also set the padding properties for each side separately with properties like padding-top, padding-right, padding-bottom and padding-left.

Copy codediv {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

Padding values can be specified in different units, such as pixels (px), em, or percentages (%). It’s also possible to use negative values to reduce the padding and make the element smaller than its content. It’s important to note that the padding property does not affect the overall size of an element. It only creates space between the content and the border.

CSS Margin

CSS margin is used to add space outside of an HTML element. The CSS margin properties include:

1. margin-top: Used to set the top margin of an element.
2. margin-right: Used to set the right margin of an element.
3. margin-bottom: Used to set the bottom margin of an element.
4. margin-left: Used to set the left margin of an element.
5. margin: shorthand property to set all the above properties in one line of code.

For example, the following CSS code would add 10 pixels of margin to all sides of a “div” element:

Copy codediv {
  margin: 10px;
}

You can also set the margin properties for each side separately with properties like margin-top, margin-right, margin-bottom and margin-left.

Copy codediv {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 20px;
}

Margin values can be specified in different units, such as pixels (px), em, or percentages (%). It’s also possible to use negative values to reduce the margin and make elements closer. It’s important to note that the margin

CSS Hover

CSS hover is a pseudo-class in CSS that is used to apply styles to an element when a user hovers over it with a cursor or a pointing device.

To use the hover pseudo-class, you need to specify the styles that you want to apply to the element when the user hovers over it, after the element’s regular styles.

For example, the following CSS code would change the background color of a button to red when a user hovers over it:

Copy codebutton {
  background-color: blue;
}

button:hover {
  background-color: red;
}

You can also use the :hover pseudo-class on multiple elements, and chain it with other CSS selectors such as class or ID to target specific elements.

Copy code/* Change the color of the text inside a paragraph element when hovered */
p:hover {
  color: purple;
}

/* Change the background color of an element with a class of "highlight" when hovered */
.highlight:hover {
  background-color: yellow;
}

It is also possible to use :hover on <a> tags to change the look of links when hovered, like changing the text color or underline. It’s important to note that the :hover pseudo-class only works on elements that the user can interact with, such as links and buttons.