Understanding CSS Text Properties: Color, Alignment, Decoration, and Transformation, Css Margins And Padding With Example

Todaynews October 08, 2024




1. CSS Margins

▶  Margins are used to create space around elements, outside of any defined borders.


▶ With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
    
        
               
       ▶  Margin-top
       ▶  Margin-bottom
       ▶  Margin-left
       ▶  Margin-right


▶ EXAMPLE

       ▶<html>
<head>
<style>
h1{

margin-top:50%;
margin-left:50%;
background-color:blue;
width:70;
height:50;

}

</style>
</head>
<body>

<h1>hello</h1>


</body>

</html>


▶ OUTPUT

hello


2. CSS Padding



▶ Padding is used to create space around an element's content, inside of any defined borders. With CSS, you have full control over the padding.

▶ There are properties for setting the padding for each side of an element (top, right, bottom, and left). 

        ▶ Padding-top
        ▶ Padding-bottom
        ▶ Padding-right 
        ▶ Padding-left

▶In CSS, the term "box model" is used when talking about design and layout. 
▶The CSS box model is essentially a box that wraps around every HTML element. 
▶It consists of: margins, borders, padding, and the actual content. 

The image below illustrates the box model.








▶ Content - The content of the box, where text and images appear.
▶ Padding - Clears an area around the content. The padding is transparent.
▶ Border - A border that goes around the padding and content .
▶ Margin - Clears an area outside the border. The margin is transparent.


▶ EXAMPLE

<html>
<head>
<style>
p{
border-style:solid;
border-width:20px;
border-color:green;
margin-top:50%;
margin-left:50%;
padding-left:50px;
padding-top:50PX;
padding-right:50PX;
padding-bottom:50px


}


</style>
 


</head>

<body>



<p>hello</p>
</body>
</html>

▶ OUTPUT


 



1. CSS Text 



  •  CSS has a lot of properties for formatting text.
  •  Text Color : This property is used to set the color of the text.
  •  The color is specified by
 Example : 
  • body {  color : red; }

 CSS Text Alignment : 
  • This property is used to set the horizontal alignment of a text. 
  • A text can be left or right aligned, centered, or justified.
Example :
 H1{
 Text-align : center; 
 }

2.Text-Decoration:


 Selector{ Text-Decoration :velue }

  1. Underline: A line beneath the text, often used for emphasis or hyperlinks.
  • Example:
  1. CSS: text-decoration: underline;

  1. Overline: A line placed above the text, though less commonly used than underlining.

    1. Example: This is overlined text.
    2. CSS: text-decoration: overline;

  2. None: Removes any text decoration, often used to remove default link underlines.

    1. CSS: text-decoration: none;


3.Text Transformation


Text transform refers to the CSS property that changes the capitalization or appearance of text. It’s commonly used to control how text is displayed without altering the underlying HTML or actual content. The most commonly used text-transform values are:

  1. Uppercase: Converts all letters to uppercase (capital) letters.

    • Example: THIS IS UPPERCASE TEXT.
    • CSS: text-transform: uppercase;

  2. Lowercase: Converts all letters to lowercase.

    • Example: this is lowercase text.
    • CSS: text-transform: lowercase;

  3. Capitalize: Capitalizes the first letter of each word.

    • Example: This Is Capitalized Text.
    • CSS: text-transform: capitalize;

  4. None: Keeps the text as it is, without changing its capitalization.

    • Example: This is default text.
    • CSS: text-transform: none;

This property is helpful for applying styling that needs to conform to a specific format, such as titles or labels.


1. letter-spacing

  • Definition: Specifies the space between characters in a text. You can control how much space is added between letters.
  • Syntax:
    letter-spacing: value;
    The value can be in units like px, em, rem, etc. Positive values increase the space, while negative values decrease it.
  • Example:
    p {
      letter-spacing: 2px;
}
    This increases the space between characters by 2 pixels.

2. line-height

  • Definition: Specifies the height of a line. It's useful for controlling the spacing between lines of text.
  • Syntax:
    line-height: value;
    The value can be a number (multiplier of the font size), a unit (e.g., px, em), or a percentage.
  • Example:
    p {
      line-height: 1.5;
}
    This sets the line height to 1.5 times the size of the text.

3. text-indent

  • Definition: Specifies the indentation of the first line in a block of text.
  • Syntax:
    text-indent: value;
    The value can be in units like px, em, or percentages.
  • Example:

    p {
  text-indent: 30px;
}
    This indents the first line of a paragraph by 30 pixels.

4. white-space

  • Definition: Specifies how white-space inside an element is handled. It controls whether white-space characters like spaces, tabs, and newlines should be treated as part of the content or ignored.
  • Syntax:

    white-space: normal | nowrap | pre | pre-wrap | pre-line;
  • Example:

    p {
  white-space: nowrap;
}
    This prevents the text from wrapping and keeps it on a single line.

5. word-spacing

  • Definition: Specifies the space between words in a text.
  • Syntax:

    word-spacing: value;
    The value can be in units like px, em, rem, etc.
  • Example:
    p {
  word-spacing: 5px;
}
    This increases the space between words by 5 pixels.






 








Todaynews

Posted by Todaynews

Post a Comment

0 Comments

Post a Comment