Recently, I've come to the realization that most HTML tags within the body act as text tags with added styling features:
For example:
a {
color: blue;
text-decoration: underline;
}
b {
font-weight: 700;
}
I began to wonder about the <sup> and <sub> tags. How can I move text upwards inline? It would be intriguing to create wavy text effects. In simpler terms, what is the default styling of these tags?
Edit: It would also be great to have the flexibility to experiment with them.
The default styles for the specified tags are as follows:
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
If you want to learn more, visit this link.
Note: It would be interesting to experiment with these.
Simply utilize the provided tags.
<div>
<sup>1</sup>
<sub>2</sub>
<sup>3</sup>
<sub>4</sub>
</div>
<hr />
<div>
<sup>a</sup>
<sub>b</sub>
<sup>c</sup>
<sub>d</sub>
</div>Below is the default formatting for the sup element:
sup {
font-size: smaller;
vertical-align: super;
}
.sup {
font-size: smaller;
vertical-align: super;
}<p>E = mc<sup>2</sup> - or does it?</p>
<p>E = mc<span class="sup">2</span> - or does it?</p>And this is how the sub tag is styled by default:
sup {
font-size: smaller;
vertical-align: sub;
}
.sub {
font-size: smaller;
vertical-align: sub;
}<p>E = mc<sub>2</sub> - or does it?</p>
<p>E = mc<span class="sub">2</span> - or does it?</p>This means we have the flexibility to customize alignment as needed:
.a {
font-size: smaller;
vertical-align: sub;
}
.b {
font-size: smaller;
vertical-align: text-bottom;
}
.c {
font-size: smaller;
vertical-align: middle;
}
.d {
font-size: smaller;
vertical-align: text-top;
}
.e {
font-size: smaller;
vertical-align: super;
}<p>Yay!
<span class="a">u</span>
<span class="b">n</span>
<span class="c">i</span>
<span class="d">c</span>
<span class="e">o</span>
<span class="d">r</span>
<span class="e">n</span>
<span class="c">s</span>
</p>If numerical values are preferred for alignment, those can be used too:
.a {
font-size: smaller;
vertical-align: 0px;
}
.b {
font-size: smaller;
vertical-align: -2px;
}
.c {
font-size: smaller;
vertical-align: -4px;
}
.d {
font-size: smaller;
vertical-align: -2px;
}
.e {
font-size: smaller;
vertical-align: 0px;
}
.f {
font-size: smaller;
vertical-align: 2px;
}
.g {
font-size: smaller;
vertical-align: 4px;
}
.h {
font-size: smaller;
vertical-align: 2px;
}
.i {
font-size: smaller;
vertical-align: 0px;
}<p>Yay!
<span class="a">r</span>
<span class="b">a</span>
<span class="c">i</span>
<span class="d">n</span>
<span class="e">b</span>
<span class="f">o</span>
<span class="g">w</span>
<span class="h">s</span>
<span class="i">a</span>
<span class="h">n</span>
<span class="g">d</span>
<span class="f">u</span>
<span class="e">n</span>
<span class="d">i</span>
<span class="c">c</span>
<span class="b">o</span>
<span class="a">r</span>
<span class="b">n</span>
<span class="c">s</span>
</p>The true answer lies in the variability of browsers - each one can apply its own unique styles to different elements.
This is why many modern websites utilize reset and normalize CSS sheets to ensure consistency across platforms.
One example is the normalize.css project, where styles include:
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
Looking to incorporate the 4 standard arrows for pagination with dynamic coloring. Any advice on how to achieve this? Thanks, Javier ...
I am working with a NgStyle Tag and would like to incorporate multiple conditions, but I am encountering issues where it doesn't work or produces errors. Here is the code snippet that I have been experimenting with: <div class = "card" [ngStyle] ...
Have you checked out the site I'm referring to here? An unusual issue seems to be occurring specifically on tablets. We implemented the scroll to fixed jQuery plugin to fix the position of the sidebar after scrolling, which works perfectly on all de ...
Hey there! I've been using this JavaScript function to print a div, but now I realize that I need to switch to jQuery. Can someone lend a hand in helping me convert this to jQuery code? $(document).ready(function(){ function printData() { ...
When attempting to upload a resized image to the server, an error stating "Required MultipartFile parameter 'file' is not present" occurs. Interestingly, this error only appears when trying to upload the resized image, as uploading the original f ...
How can I retrieve information from a selected cell in an HTML file and then process it in views.py? Any suggestions on how to achieve this would be greatly appreciated. Thank you! <tbody> {% for element in qz %} <tr> ...
I am trying to customize the .text-primary class with a color of my choice. To do this, I added the following code in my override file: @include text-emphasis-variant(".text-primary",$brand-primary, true); The text-emphasis-variant is a mixin from Bootst ...
Having some trouble with submitting comments on Instagram using Python and Selenium. The comment box on the Instagram web page has the following structure: <textarea aria-label="Añade un comentario..." placeholder="Añade un comentario..." class="Ypff ...
My goal is to have three buttons aligned side by side, but I want them center-aligned instead of floated to the left. I have already set the display to inline-block and vertical align to top. div.rotateBtn input { background-image: url(""); margin-l ...
I am working on a project that involves creating a grid with 4 columns and 4 rows. The challenge I am facing is making the 4th column transition into a 5th row on small displays, instead of being displayed as a column on medium to large screens. This proje ...
I am working on a project where I need to display data on the screen based on user input received via radio buttons, and apply specific conditions. Additionally, I require assistance in retrieving the id of an object when the name attribute is chosen from ...
When designing my website, I envisioned having three different options presented upon entering the site. Depending on the size of the screen, I wanted to display varying content. For XL screens, I wanted all content to be visible, similar to the picture. ...
How can I display the results of my AJAX live search in different result divs for styling purposes? I want to style the results separately and have them appear one at a time. However, the current setup with 'element.style' is causing issues. Is ...
I am in the process of developing a weather application using The Weather API. So far, I have successfully retrieved the necessary data from the JSON and presented it in HTML format. My next goal is to extract hourly weather information from the JSON and ...
I am currently utilizing Bootstrap in conjunction with Django, and I have been attempting to establish the maximum height of a div to be 75% of the screen's height due to it containing a large image. However, my efforts to resize the parent div of the ...
I have a private server set up on my computer with a built-in REST API. The base URL for the API is: . I am now looking to develop a client application for this server using the API. To authenticate on the server, the API endpoint is baseurl/login with the ...
When working with a form that has an action attribute to call another PHP page, I want to ensure that one text field is not empty by validating it with JavaScript before submission. How can I accomplish this using the <input type"submit"> tag? ...
I am working on a script that can manipulate the size of a period symbol, making it increase and decrease in size while staying in one place. However, I have encountered an issue where the element moves up or down the page when its size changes. I tried ...
Currently, I am exploring A-Frame using a 3D model imported from Blender. Some parts of this model contain multiple meshes with two or more materials assigned to them. It is easy for me to adjust the material properties of meshes with just one material. ...
I start by creating a div in memory: var video_div = document.createElement('div'); video_div.className = "vidinfo-inline"; Next, I define some variables: var key = "data-video-srcs"; var value = '{"video1":"http://www.youtube.com/watch?v ...