Lecture 8

                                          Hyper text and Markup Language

                                             and CSS

How to give font to content through CSS?

To give a font to your content through CSS, you can use the "font-family" property. For example, you can set the font to Arial by using the following CSS code:

selector {

  font-family: Arial, sans-serif;

}

In this example, "selector" refers to the HTML element or class that you want to apply the font to. "Arial" is the name of the font you want to use, and "sans-serif" is a fallback font in case Arial is not available on the user's device.

then the out will be:

How to set border and border-radius to content through CSS?

To set a border and border radius to the content through CSS, you can use the "border" and "border-radius" properties. Here's an example:

selector {

  border: 1px solid black;

  border-radius: 10px;

}

Replace "selector" with the HTML element or class that you want to apply the border and border radius to. Adjust the pixel value (1px in this example) and the color (black in this example) to your desired border style. The border-radius property determines the roundness of the corners, and you can adjust the pixel value (10px in this example) to your desired level of roundness.

Then the output will be:

How to align the content in css?

To align content through CSS, you can use the "text-align" property. For example, to align text to the center, you can use the following CSS code:

selector {

  text-align: center;

}

Replace "selector" with the HTML element or class that you want to apply the alignment to. You can also use other values like "left" or "right" to align the content accordingly.

then the output will be;

How to padding left and right the content through css?

To add padding to the left and right of the content through CSS, you can use the "padding-left" and "padding-right" properties. Here's an example:

selector {

  padding-left: 10px;

  padding-right: 10px;

}

Replace "selector" with the HTML element or class that you want to apply the padding to. Adjust the pixel value (10px in this example) to your desired padding width. This will add equal padding to the left and right sides of the content within that element.

What is the purpose of padding left and right?

Padding left and right is used to create space or separation between the content and the edges of its container. It helps to improve the readability and visual appeal of the content by providing breathing room and preventing it from touching the container's edges.