Skip to content

Latest commit

 

History

History
151 lines (127 loc) · 6.17 KB

css-text.md

File metadata and controls

151 lines (127 loc) · 6.17 KB
Raw

Stars Badge Forks Badge Pull Requests Badge Issues Badge GitHub contributors Visitors

Don't forget to hit the ⭐ if you like this repo.

CSS Text

CSS (Cascading Style Sheets) provides a powerful way to control the presentation of text on a web page. CSS Text properties allow you to adjust the font size, font family, font weight, line-height, text-align, text-decoration, text-transform, letter-spacing, word-spacing, and more.

Most commonly used CSS text properties:

  1. Font-size: This property allows you to specify the size of the text in a web page. You can use absolute values (like pixels) or relative values (like ems or percentages).

  2. Font-family: This property allows you to specify the font used for the text in a web page. You can list multiple fonts in order of preference, and the browser will use the first font it finds installed on the user's computer.

  3. Font-weight: This property allows you to specify the weight of the text, such as bold or normal.

  4. Line-height: This property specifies the height of each line of text. You can use absolute or relative values.

  5. Text-align: This property allows you to specify the alignment of the text within its container. Common values include left, center, and right.

  6. Text-decoration: This property allows you to add various decorations to the text, such as underlines or strikethroughs.

  7. Text-transform: This property allows you to transform the text to uppercase, lowercase, or capitalize the first letter of each word.

  8. Letter-spacing: This property allows you to adjust the space between each letter in the text.

  9. Word-spacing: This property allows you to adjust the space between each word in the text.

These are just a few of the many CSS Text properties available for controlling the presentation of text on a web page.

Code

HTML: format-text.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Text Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
      }
      h1 {
        font-size: 36px;
        font-weight: bold;
        text-decoration: underline;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      p {
        margin-bottom: 20px;
        font-size: 20px;
        font-family: "Times New Roman", serif;
        font-weight: normal;
        line-height: 1.2;
        word-spacing: 3px;
      }
      span {
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>
      This is an example of how to use CSS text properties. You can adjust the
      <span>font-size</span>, <span>font-family</span>,
      <span>font-weight</span>, <span>line-height</span>,
      <span>text-align</span>, <span>text-decoration</span>,
      <span>text-transform</span>, <span>letter-spacing</span>, and
      <span>word-spacing</span> of your text to make it look exactly how you
      want.
    </p>
  </body>
</html>

In this example, the CSS code controls the font family, font size, line height, text alignment, text decoration, and text transformation of the heading and paragraph elements. It also styles links and a span element with custom colors and font sizes. The code is embedded within the HTML document using the style tag.

HTML: format-text1.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Text Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        font-size: 16px;
        line-height: 1.5;
      }
      h1 {
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
      }
      p {
        margin-bottom: 20px;
        text-align: justify;
      }
      a {
        color: #ff0000;
        text-decoration: underline;
      }
      span {
        font-size: 24px;
        font-weight: bold;
        color: #0000ff;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <a href="#">Pellentesque</a> accumsan justo euismod imperdiet. Vestibulum
      ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
      Curae; Integer lacinia tellus at erat aliquam sodales. Duis ac orci vel
      velit molestie bibendum eget a enim. <span>Suspendisse</span> vel luctus
      mi, id lobortis justo.
    </p>
    <p>
      Maecenas ultrices felis id metus euismod, vel tincidunt quam malesuada.
      Quisque eleifend enim eget elit lobortis, in maximus odio aliquam. Sed
      vitae ex ac sapien rhoncus facilisis. Sed facilisis, lacus quis
      sollicitudin convallis, erat elit pellentesque magna, vitae sagittis justo
      ex vitae sapien.
    </p>
  </body>
</html>

Contribution 🛠️

Please create an Issue for any improvements, suggestions or errors in the content.

You can also contact me using Linkedin for any other queries or feedback.

Visitors