Css text style names

How to Apply CSS Style to the Element Name

You can apply a CSS style to the element name by using attribute selectors that match elements based on their attributes.

Solutions with attribute selectors

In the example below, we style the name attribute of the element with the CSS background, width, height, and border properties.

Example of applying some CSS styles to the element name:

html> html> head> title>Title of the document title> style> input[name="username"] < background: #76d67e; width: 200px; height: 25px; padding: 0 5px; border: 2px solid #cccccc; > style> head> body> input type="text" name="username" autofocus> body> html>

Result

Let’s see another example, where we use two elements, one of them with the name attribute, which must be styled.

Example of applying a CSS style to the element name:

html> html> head> title>Title of the document title> style> input[name="age"] < width: 50px; > style> head> body> h1>Example of applying a CSS style to the element name: h1> form> input type="text" placeholder="Name"> input type="number" name="age" min="0" placeholder="Age"> form> body> html>

Источник

CSS styling text

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you’ll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

Note: If you are working on a computer/tablet/other device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.

When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We’ll look at all these topics in this article.

Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.

Assessments

The following assessment will test your understanding of the text styling techniques covered in the guides above.

In this assessment we’ll test your understanding of styling text by getting you to style the text for a community school’s homepage.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

CSS Text

The color property is used to set the text color. To specify the color you can use a color name (red), a HEX value (#ff0000) or an RGB value (rgb (255,0,0) ).

Example of the color property:.

html> html> head> title>Title of the document title> head> body> p style="color:#ff0000">This is some paragraph in red. p> body> html>

Result

Text Alignment

Alignment property is used for aligning text inside an element left, right, center, etc.

Text alignment has four values:

• Left (text-align: left) — aligns the text to the left
• Right (text-align: right) — aligns the text to the right
• Center (text-align: center) — puts the text in center of the page
• Justify (text-align: justify) — stretches the line of text to align both the left and right ends (like in magazines and newspapers)

Browsers by default align text to the left, and if there is need to align text to the right or put it in the center, we should use the corresponding value.

Example of the text-alignment property:

html> html> head> title>Title of the document title> head> body> p>This is some paragraph p> p style="text-align:center">Some paragraph with value center. p> p style="text-align:right">Some paragraph with value right. p> p style="text-align:justify">Some paragraph with value justify. p> body> html>

Text Decoration

Text decoration is used for setting the decoration of the text. In CSS3, it is a shorthand for the CSS text-decoration-line, CSS text-decoration-color and CSS text-decoration-style properties.

Decoration property is used to specify line decorations added to the text. The following values are valid for text-decoration property.

• Overline (text-decoration:overline) — each line of text has a line over it
• Underline (text-decoration:underline) — each line text is underlined
• Line-through (text-decoration:line-through) — each line of text has a line going through it
• None (text-decoration:none) — no text decoration is applied

Example of the text-decoration property:

html> html> head> title>Title of the document title> head> body> a style="text-decoration:none">This is link without underline a> h1 style="text-decoration:overline">Heading with value overline. h1> p style="text-decoration:line-through">Some paragraph with value line-through. p> a style="text-decoration:underline">Some hyperlink with value underline. a> body> html>

Result

Text Transform

Transform property is used for controlling text capitalization. It means that you can set your text to be uppercase, lowercase, or capitalized (title case).

Transform property has the following values:

• Uppercase (text-transform: uppercase) — converts all characters to uppercase
• Lowercase (text-transform: lowercase) — converts all characters to lowercase
• Capitalize (text-transform: capitalize) — converts the first character of each word to uppercase

Example of the text-transform property:

html> html> head> title>Title of the document title> head> body> p style="text-transform:uppercase">Paragraph with uppercase. p> p style="text-transform:lowercase">Paragraph with lowercase. p> p style="text-transform:capitalize">Paragraph with capitalize. p> body> html>

Result

Text Shadow

We use the text-shadow property when we want to give shadow to our text.

Shadow property is used to apply various shadow effects to the text. It accepts a list of values. Each item in the list can have two and more comma-separated values.

The text shadow property syntax can look like

text-shadow: h-shadow v-shadow blur color

Here you can see examples of text shadow.

Text Indentation

Text indentation property is used for specifying the length of empty space of the first line in a text block. The values below are valid for this property:

• Length , which specifies the indentation in px, pt, cm, em, etc. The default value is 0. Negative values are allowed.
• Percentage — which Specifies the indentation in percentage of the width of the containing block.
• Each-line, when the indentation affects the first line as well as each line after a forced line break, but does not affect lines after a soft wrap break.
• Hanging, which inverts which lines are indented. The first line is not indented.
• Initial, which makes the property use its default value.
• Inherit, which inherits the property from its parent’s element.

Example of the text-indent property:

html> html> head> title>Title of the document title> style> p < text-indent: 100px; line-height: 24px; font-size: 16px; > style> head> body> h2>Text Indentation Example h2> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> body> html>

Letter Spacing

CSS letter-spacing property allows to define the spaces between letters/characters in a text. The following values are supported by this property:

• Normal, which means that there won’t be extra spaces between characters. It is the default value of this property.
• Length, which defines an extra space between characters. Negative values are allowed.
• Initial, which makes the property use its default value.
• Inherit, which inherits the property from its parent’s element.

Example of the letter-spacing property:

html> html> head> title>Title of the document title> style> p < text-indent: 100px; line-height: 24px; font-size: 16px; letter-spacing: 5px; > h3 < letter-spacing: -1px; > style> head> body> h2>Example of letter-spacing property h2> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> h3> Here is some text with letter-spacing property. h3> body> html>

Line Height

The line-height property defines the line-height. It is used to set the leading of lines of a text. If the line-height value is greater than the value of the font-size of an element, the difference will be the leading of text. Here are the values supported by this property:

• Normal, which defines a normal line height. It is the default value of this property.
• Length, which defines a fixed line height in px, cm etc.
• Number, which defines a number which is multiplied with the current font size to set the line height.
• %, which defines a line height in percent of current font size.
• Initial, which makes the property use its default value.
• Inherit, which inherits the property from its parent’s element.

Example of the line-height property:

html> html> head> title>Title of the document title> style> p < line-height: 30px; > h3 < line-height: 1; > style> head> body> h2>Example of line-height property h2> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> h3> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. h3> body> html>

Word Spacing

With the help of the CSS word-spacing property we can change the space between the words in a piece of text, not the individual characters. It supports the values below:

• Normal, which specifies normal word spacing. This is the default value of this property.
• Length, which specifies an extra word spacing. Can be specified in px, pt, cm, em, etc. Negative values are valid.
• Initial, which makes the property use its default value.
• Inherit, which inherits the property from its parent’s element.

Example of the word-spacing property:

html> html> head> title>Title of the document title> style> p < word-spacing: 1em; > h3 < word-spacing: -3px; > span < display: block; word-spacing: 3rem; > style> head> body> h2>Example of word-spacing property h2> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> h3> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. h3> span> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. span> body> html>

Practice Your Knowledge

How the line under a text can be removed?

by adding text-decoration property with value line-through by adding text-transform property with value none by adding text-decoration property with value none

Источник