Exploring the Power of Title and the Wildcard Universal Selector in JavaScript CSS/HTML5

What is the method for adding a title to the div below?

document.write('<div style="width:auto; margin:10px;"><table style="background-color:purple;" 
border="1" cellspacing="1" cellpadding="35">')

The script in its entirety can be found here:

<html>
<body>

<script Language="JavaScript">
rows = 6;
cols = 6;

document.write('<div style="width:auto; margin:10px;"><table style="background-color:purple;" 
border="1" cellspacing="1" cellpadding="35">')

/* Excluded from the Table */
//document.write('<h3> <center>Table </center> </h3>')

for (i = 0; i < rows; i++) {
   document.write('<tr>')

   for (j = 0; j < cols; j++)
   {
    document.write('<td style="color:orange;">' + (i*j) + '</td>')
   }
   document.write('</tr>')
}

document.write('</table></div>')

</script>
</body>
</html>

Is there a way to implement a Universal Selector (*) in order to ensure consistent font size throughout?

Answer №1

To insert a title in the table, simply include a <caption> element:

document.write('<div style="width:auto; margin:10px;"><table style="background-
color:purple;" border="1" cellspacing="1" cellpadding="35"><caption>Title</caption>')

If you want to apply CSS styling using the * universal selector, use this code:

<style type="text/css>"
    * {
        font-size: 12px;
    }
</style>

Answer №2

Give this a shot:

const allElements = document.getElementsByTagName("*");
for (let i = 0; i < allElements.length; i++) {
    let element = allElements[i];
    element.style.fontSize = "20px";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Material Design auto-complete textbox with assertive selection

Presently, I am utilizing Angular Material Design and everything is functioning as expected. However, I am now looking to implement autocomplete (Angular Material Design) in a way that forces the user to always choose an option without the ability to manua ...

How to dynamically insert an em tag into a table header cell using Asp.net

In my code, I have a table with dynamically generated table headers. One of the headers is for a textbox column. var thc = new TableHeaderCell { Text = "Iteration", CssClass = "iteration" } Now, I need to modify the logic to display a label indicating wh ...

Three fluid horizontal DIVs aligned side by side

Is there a way for me to align three divs beside each other, each with unique background images? The center div should be 989px wide, while the widths of the left and right divs can vary. ...

Is separating Jssor Slider CSS effective?

Having a bit of trouble with the Jssor slider here. I'm trying to separate the slider styles into an external CSS document and running into issues. For instance: <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 11 ...

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

HTML - Lists Not Displaying Properly in Numerical Order

My goal with HTML is to: Produce 2 Numbered Lists Nest an Unordered List within Each Ordered List and add elements inside Unfortunately, my numbering isn't displaying correctly. Instead of 1. 2. etc., I'm seeing 1. 1. Below is the code I am u ...

Off-center alignment in left margin with Bootstrap 3

When using bootstrap 3, I have noticed that the left margin starts to indent gradually with each row. Here is a screenshot demonstrating the issue: please see here The code for the first two rows in the image looks like this: <div class="row"> ...

The background image is failing to load

Why isn't my background image showing up? Check out the jsFiddle here CSS Styles .arrow_icon { display: block; width: 320px; // 25 height: 240px; // 25 background-image: url(http://s12.postimg.org/yi7yl766z/5b8nbn.jpg); backgrou ...

Angular 6 is showcasing dates in a quirky manner

In my Angular app, users can enter comments. The comments are displayed automatically with the date they were added. However, there is an odd behavior that I've noticed: When a user enters a comment, the time displayed is incorrect. (Check the ...

Displaying values in form fields when a specific class is present

Whenever I input and submit the form fields correctly using #submit_btn, my values disappear. However, when they are not valid, this issue does not occur. I attempted to address this problem with jQuery: $('#submit_btn').click(function() { i ...

What are the disadvantages of not incorporating the main CSS file directly into the web page?

Optimizing the loading time of my webpages is a priority for me, especially when it comes to first-time loading and from cache. Despite that, I still prefer to have the browser re-validate all resources to avoid any strange displays or update issues caused ...

A combination table featuring both fixed and scrolling columns

I'm struggling with a table design where I want part of it to be fixed and the rest to be scrollable. My goal is to achieve something similar to this example, but within a single table structure. If interested, you can view an example here. I found ...

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

How to create a gelatin-like effect on a rectangle using HTML5 canvas

Currently, I'm working on a platformer game project in JavaScript. The concept involves players as rectangles jumping on and off platforms. While the basic functionality is set up, I'm now aiming to incorporate a unique 'gelatine effect&apos ...

What is the best way to prevent text overflow in a div while maintaining its width without dropping down

I have a square element that measures 100 pixels in width. The overflow-x property has been applied, with a value of hidden. My intention was for this setting to conceal any text that extends beyond the boundaries of the container, rather than allowing it ...

Using JQuery to automatically set the default selection when toggling the visibility of a div

I currently have a script that toggles the visibility of a div when selected: $('.showSingle').click(function () { $('.targetDiv').hide(); $('.showSingle').removeClass('greenactive'); $(this).addCla ...

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...

How come my navigation isn't responding to the CSS grid columns I've implemented?

I am currently reviewing Responsive Grid CSS tutorials on YouTube. I am following the instructor's lesson, but I am facing challenges in formatting my nav grid. I have shared both the HTML and CSS code, as well as images showing the comparison between ...

Execute an if statement in PHP upon clicking an image, all while avoiding the need to refresh the

My goal is to trigger my PHP mail(); code with an if statement when an image is clicked. Here's what I've attempted so far: <?php $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="720013041c111d1f02131c0b321 ...

JavaScript - Retrieving the variable's name

Whenever I invoke a function in JavaScript with a variable, like this: CheckFunction(MyVariable); CheckFucntion(MyVariable2); Suppose I have a function that checks if the input is a number: function CheckFunction(SOURCE){ //THE CODE ITSELF }; I want to ...