HTML Tags and - Subscript and Superscript Text
Definition and Use
Tag defines subscript text. The subscript is half the height and appears below the baseline. Subscript can be used when writing chemical formulas such as H 2 O.
Tag defines superscript text. Superscript text is half the height and appears above the baseline. Superscript text can be used when writing footnotes like WWW.
Browser Support
Tags and supported by all major browsers.
Differences Between HTML and XHTML
Standard Attributes
Column DTD specifies in which document type HTML 4.01 / XHTML 1.0 DTD the attribute is allowed. S \u003d Strict, T \u003d Transitional and F \u003d Frameset.
Tags and support the following standard attributes:
| Attribute | Value | Description | DTD |
|---|---|---|---|
| class | class_name | Specifies the class name for an element | STF |
| dir | rtl ltr |
Specifies the text direction for content in an element | STF |
| id | identifier | Specifies a unique identifier for an item | STF |
| lang | language_code | Specifies the language code for the content of an element | STF |
| style | style_definition | Specifies an inline style for an element | STF |
| title | text | Specifies additional information about an item | STF |
| xml: lang | language_code | Defines the language code for element content in XHTML documents | STF |
More information on Standard Attributes.
Event Attributes
Tags and support the following event attributes:
| Attribute | Value | Description | DTD |
|---|---|---|---|
| onclick | script | Mouse-clicked script | STF |
| ondblclick | script | Double-clicked script | STF |
| onmousedown | script | Script to run on mouse click | STF |
| onmousemove | script | Script to run when the mouse pointer is moved | STF |
| onmouseout | script | Script to run when the mouse moves off the element | STF |
| onmouseover | script | Script to run when the mouse moves over an element | STF |
| onmouseup | script | Script to run when the mouse button is released | STF |
| onkeydown | script | Script to run when a key is pressed | STF |
| onkeypress | script | Script to run when a key is pressed and then released | STF |
| onkeyup | script | Script to run when a key is released | STF |
Additional information about
For a few lessons now, we've been getting used to formatting text with CSS, and this time we're learning to change the case of text. In this regard, cascading style sheets open up very wide possibilities for us, or more precisely, we can:
- Display all text in capital letters;
- Select all text in lowercase letters;
- Make the first letter of each word start with uppercase.
"This is all good, of course, but when might you need it?" - you ask. Imagine a situation where you want to display all menu items in capital letters. To do this, you do not need to type them, including the CapsLock key, or while holding down the Shift key. It will be enough to set all list items to display in uppercase by creating a corresponding rule in the CSS file. And this is just one of many possible situations.
The text-transform property
We will control the case of the text using the text-transform property. It has 4 main values \u200b\u200b- uppercase (uppercase letters), lowercase (lowercase letters), capitalize (uppercase for each first letter of the word, the rest of the values \u200b\u200bdo not change), none (no formatting is applied). At first glance, all this may seem very complicated to you.
The main thing is not to panic ... But in practice, everything is quite simple, as you will now see. The main thing is to choose the right selector, because the values \u200b\u200bof the text-transform property are inherited.
Highlighting in capital letters
The first thing I suggest is to capitalize all the text, for which we create the following CSS rule:
Body (text-transform: uppercase;)
In principle, nothing complicated, we just used the uppercase value. As they say, everything is intuitive. This is how it looks in real life:
Everything with a capital letter ... Lower case - apply to all
In the next step, let's apply lowercase letters everywhere, for which we write the following:
Body (text-transform: lowercase;)
As you might have guessed, the two meanings we just met are somewhat antonyms. And in the illustration below, you can see the result of the newly created property.
Web page with lowercase enabled Uppercase the first letter of each word
To do this, we just need to use the corresponding value:
Body (text-transform: capitalize;)
I don’t know how often you will use such a CSS rule, but it will not hurt you to know about such a possibility, especially when solving non-trivial problems. The result can be seen in the image below.
Text after capitalize applied Finally, let's take a quick look at the last value, none. As I said, it can be used to reverse inheritance from a parent. For example, let's imagine that we have all the previous rules, and for paragraphs we should cancel them, for this we write the following:
P (text-transform: none;)
I dare to assume that you understand everything, if not - ask your questions in the comments. And that's all for me. Hope you found this CSS tutorial helpful. If so:
- Repost this article on social networks so that more people can benefit from it;
- Subscribe to my mailing list so as not to miss useful and interesting blog posts.
On this I am not saying goodbye to you. Thank you for your attention and see you in the following publications!
Convert lowercase letter to lowercase and first uppercase using CSS (8)
There is no cap suggestion option in CSS. Other answers suggesting text-transform: capitalize are not correct as this parameter uses every word for every word .
Here rude a way to do it if you want to the first letter of each item was in uppercase, but that's definitely nowhere near the actual limits:
P (text-transform: lowercase;) p: first-letter (text-transform: uppercase;)
THIS IS AN EXAMPLE SENTENCE.
THIS IS ANOTHER EXAMPLE SENTENCE. AND THIS IS ANOTHER, BUT IT WILL BE ENTIRELY LOWERCASE.
How can I convert the UPPERCASE letter to lowercase and the first Uppercase letter for each sentence as shown below using CSS only?
From: THIS IS AN EXAMPLE APP.
To: This is a rough suggestion.
Update: when i use text-transform: capize; The result is still the same.
You cannot do this purely with CSS. There is a text-transform attribute, but it only accepts none, capitalize uppercase, uppercase, lowercase and inherit.
You might want to look into a JS solution or a server-side solution.
If you can make all characters lowercase on the server than you can apply:
Text-transform: capitalize
I don't think the text conversion will work with capital letters as input.
If you want to use for it won't work, for or text area you need to use Javascript
which should work well for or