Quick Contact

    CSS Text

    Formatting Text with CSS

    CSS offers a number of properties that make it simple and efficient to specify different text styles, including colour, alignment, spacing, decoration, transformation, etc.

    The most often used text properties are: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, and more.These properties provide you fine control over how the characters, words, spaces, and other elements look visually.

    Let’s look more closely at how to establish these text properties for an element.

    Text Color

    The CSS colourattribute determines the text’s colour.

    The default text colour for the page will be determined by the style rule in the example below.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Text Color using CSS< /title>
    < style>
    	h1 {
    		color: #ff0000;
    	}
    	p {
    		color: blue;
    	}
    < /style>
    < /head>
    < body>
    	< h1>This is a heading< /h1>
    	< p>This is a paragraph for text.< /p>
    < /body>
    < /html>
    

    Despite the fact that the colour property appears to belong in the CSS text, it is a separate property in CSS. For additional information on the colour property, see the CSS colour tutorial.

    Text Alignment

    The text’s horizontal alignment is controlled by the text-align attribute.

    There are four options for text alignment: left, right, centre, and justified (straight left and right margins).

    To better understand how this attribute functions, let’s look at an example.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Text Alignment using CSS< /title>
    < style>
        h1 {
    text-align: center;
        }
    p {
    width: 300px;
    text-align: justify;
        } 
    < /style>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    

    < p> Java was first released by Sun Micro-systems in 1995 and later purchased by Oracle Corporation. It is one of the most used programming languages. Java is a type of Programming language that allows users to create dynamic web pages and content. If you’re just starting to learn code, Java is an excellent choice as it is considered one of the easiest coding languages and it is supported by a long-standing open-source community.< /p>

    < /body>
    < /html>
    

    Note:
    When text-align is set to emphasize, every line is stretched out until it is the same width (except from the last line), and the left and right margins are straight. Publications like newspapers and periodicals frequently employ this layout.

    Text Decoration

    The text-decoration property is used to add or take away text embellishments.

    Underline, overline, line-through, and none are the normal values that this attribute accepts. Text that is not a link should not be underlined because it could confuse the visitor.

    To see how it essentially operates, let’s try out the following example:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Text Decoration using CSS< /title>
    < style>
        h1 {
    text-decoration:overline;
        }
        h2 {
    text-decoration:line-through;
        }
        h3 {
    text-decoration:underline;
        }
    < /style>
    < /head>
    < body>
    < h1>Heading 1< /h1>
    < h2>Heading 2< /h2>
    < h3>Heading 3< /h3>
    < /body>
    < /html>
    

    Removing the Default Underline from Links

    The HTML hyperlinks’ standard underline is frequently removed using the text-decoration property. To further distinguish it from the regular text, you can add additional visual signals. For instance, you could use a dotted border rather than a solid underlining.

    To see how it essentially operates, let’s look at the sample below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Removing the Default Underline from HTML Links< /title>
    < style>
    a {
    text-decoration: none;
    border-bottom: 2px dotted;
        }
    a:hover {
    border-bottom: none;
        }
    < /style>
    < /head>
    < body>
    < p>Place your mouse pointer < a href="#">Here!< /a>< /p>
    < /body>
    < /html>
    

    Note:
    To make it plain to readers which text is clickable, browsers’ built-in style sheets automatically underline and apply a blue colour when you create an HTML link.

    Text Transformation

    To change a text’s case, use the text-transform property.

    Mixed case is a common writing style for text. Users might, however, want to show the content in a completely different case in some circumstances. The text of an element can be converted to uppercase, lowercase, or capitalized letters using this attribute without changing the original text.

    To see how it essentially operates, let’s use the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Text Transformation using CSS< /title>
    < style>
        h1 {
    text-transform: uppercase;
        }
        h2 {
    text-transform: capitalize;
        }
        h3 {
    text-transform: lowercase;
        }
    < /style>
    < /head>
    < body>
    < h1>This is heading 1< /h1>
    < h2>This is heading 2< /h2>
    < h3>This is heading 3< /h3>
    < /body>
    < /html>
    

    Text Indentation

    The initial line of text within a block of text can be indented using the text-indent property. Usually, the blank space is inserted before the first line of text.

    You can specify the size of the indentation using a percentage (%), length values in pixels or ems, etc.

    The first line of the paragraphs will be 100 pixels indented thanks to the style rule that follows.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Text Indentation using CSS< /title>
    < style>
    p {
    text-indent: 100px;
        }       
    < /style>
    < /head>
    < body>
    < h1>CSS Text Indentation< /h1>
    

    < p>Java was first released by Sun Micro-systems in 1995 and later purchased by Oracle Corporation. It is one of the most used programming languages. Java is a type of Programming language that allows users to create dynamic web pages and content. If you’re just starting to learn code, Java is an excellent choice as it is considered one of the easiest coding languages and it is supported by a long-standing open-source community.< /p>

    < /body>
    < /html>
    

    Letter Spacing

    Extra space between text characters can be set using the letter-spacing attribute.

    The length value for this attribute can be in pixels, ems, etc. It might even take negative values. When establishing letter spacing, a length value denotes additional spacing beyond the inter-character space that is usually used.

    Let’s look at the sample below to see how it actually functions:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Letter Spacing using CSS< /title>
    < style>
        h1 {
    letter-spacing: -3px;
        }
    p {
    letter-spacing: 10px;
        }   
    < /style>
    < /head>
    < body>
    < h1>This is a heading.< /h1>
    < p>This is a simple paragraph of text.< /p>
    < /body>
    < /html>
    

    Word Spacing

    Additional word spacing can be set using the word-spacing parameter.

    The length value for this attribute can be expressed in pixels, ems, etc. Also permitted are negative values.

    To further understand how this attribute functions, let’s try out the following example:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting word spacing using CSS< /title>
    < style>
        p.one {
    word-spacing: 20px;
        }
    p.two {
    width: 150px;
    word-spacing: 20px;
    text-align: justify;
        }
    p.three {
    word-spacing: 20px;
    white-space: pre;
        }      
    < /style>
    < /head>
    < body>
    < p class="one">This is a normal paragraph.< /p>
    < hr>
    

    < p class=”two”>Note that spacing between the words of this paragraph are varying in order to justify the text even if the value of word-spacing property is set to 20px.< /p>
    < hr>
    < p class=”three”>Note that spacing between the words
    of this paragraph are higher than the normal spacing
    even if whitespace are preserved.< /p>

    < /body>
    < /html>
    

    Line Height

    The text line height is set using the line-height attribute.

    The standard method of determining the space between lines of text is known as leading.

    This property’s value can be a numeric value, a percentage (%), or a length expressed in pixels, ems, etc.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Line Height using CSS< /title>
    < style>
    p {
    line-height: 1.2;
    border: 1px solid #00ff00;
        }
    div {
    line-height: 200%;
    border: 1px solid #ff0000;
        }
    < /style>
    < /head>
    < body>
    < h1>Change the values to see how it works< /h1>
    < p>The < code>line-height< /code> property sets the height between lines of text.< br> The line height of this paragraph is specified using number.< /p>
    < div>The < code>line-height< /code> property sets the height between lines of text.< br> The line height of this paragraph is specified using percentage.< /div>
    < /body>
    < /html>
    

    Note:
    The line-height attribute cannot have a negative value. Additionally, this property makes up the CSS font shorthand.

    FAQS

    Q1. How do I use text in CSS?

    With display: list-item;, CSS can add text before or after an element or alter the content of a list item marker (such as a bullet symbol or number) before a < li> or other element. Create a rule and modify the selector by adding::before,::after, or::marker.

    Q2. What is CSS text effects?

    Different effects can be applied to text used in an HTML document. There are some characteristics that can be utilized to add effects to text. We may style web pages with CSS, which also impacts the content. The text effect’s characteristics enable us to make the text appealing and understandable.

    Q3. What is a text attribute?

    All of the font, style, alignment, and other formatting features connected to a specific character or string of characters are collectively referred to as “text attributes.”

    Q4. What is CSS example?

    Web pages are styled and laid up using CSS (Cascading Style Sheets), which can be used to change the font, colour, size, and spacing of your text, divide it into numerous columns, or add animations and other ornamental elements.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.