Customizing the font style on a CSS changing table

Below is the CSS code snippet I am using:

table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px;}
table.Table12 a:link { font-weight: bold;}

Additionally, here is the HTML code:

<table class="Table12" align="right">
<tr><td><a href="http://www.example.com/test1.php">test1</a></td>
<td><a href="http://www.example.com/test2.php">test2</a></td></tr>
<tr><td><a href="http://www.example.com/test3.php">test3</a></td>  
<td><a href="http://www.example.com/test4.php">test4</a></td></tr>
</table>

Currently, all tables have a bold font style applied. However, I want to change the font of "test3" to normal in the CSS. Is this achievable?

htmlcssfonts

Answer №1

Give this CSS a try:

table.Table12 td:nth-child(3) { font-weight: normal; }

Oops, I overlooked the last line of your CSS code. This one should work better:

table.Table12 tr:nth-child(2) td:nth-child(2) a { font-weight: normal; }

For more insights on the nth-child syntax, check out this resource: How can I get the second child using CSS?

Answer №2

According to Nik, the correct way to add styling is in the CSS rather than directly in the HTML code. This should be included at the end of the CSS file. Here is an example:

table.Table12 { border:1px solid blue; }
table.Table12 td { border:1px solid blue; width:200px; }
table.Table12 a:link{ font-weight: bold; }
/*Solution*/
table.Table12 td:nth-child(2) { font-weight: normal; }

This implementation will take effect immediately.

You can also assign a class to the style and reuse it later on:

.normal-font { font-weight: normal; }

In your HTML file, you can use this class as follows:

<table class="Table12" align="right">
<tr><td><a href="http://www.example.com/test1.php">test1</a></td>
<td><a href="http://www.example.com/test2.php">test2</a></td></tr>
<tr><td><a href="http://www.example.com/test3.php" class="normal-font">test3</a></td>  
<td><a href="http://www.example.com/test4.php">test4</a></td></tr>
</table>

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

The addition of input fields on keyup creates problems in the initial field of each row

I am currently working with a table and attempting to calculate the sums as follows: td(1) + td(2) + td(3) = td(4), td(5) + td(6) + td(7) = td(8), td(9) + td(10) + td(11) = td(12). This is the code I have implemented: $(document).ready(function () { ...

javascriptjqueryhtml

Having trouble getting @media queries to work effectively across various screen sizes

Currently, I am using Sass with Bootstrap and facing some challenges when implementing different media queries. Despite most discussions revolving around CSS problems only, I am uncertain of the source of my issue and how to effectively address it. The sty ...

htmlcsssassbootstrap-4

If the option is 'Gel', use an if statement to console log

I'm trying to console.log the option from the data() function that is equal to 'Gel'. I attempted to use an if statement, but it doesn't seem to be working. Anyone have any ideas on how to make this work? data(){ return { ...

javascripthtmlvue.js

Click anywhere outside the sidemenu to close it

I want the menu to behave like the side menu on Medium. When the side menu is open and the user clicks outside of #sidebar-wrapper, the side menu should close. Currently, I have to click the toggle X to close the menu. html <a id="menu-toggle" href="# ...

javascriptjqueryhtmlcssmenu

What is preventing NgClass from applying the CSS styles?

I'm currently facing an issue in Angular2 where I am trying to apply different styles using ngClass within an 'NgFor' loop, but for some reason, it's not working as expected. Apologies for any language errors. <div class='line ...

cssangular

Ways to extract specific HTML from a jQuery element

When fetching html from a website, how can I extract specific html content instead of getting all of it? I have attempted the following method: Before appending data to the target below container.html(data); I would like to perform something like data.f ...

javascriptjqueryhtmlcss

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

The HTML output is essential for creating the content of a Bootstrap carousel

Is there a way to populate my bootstrap carousel with the content of an HTML page instead of images? I attempted to create a div and use CSS to load the contents from ac1_div using content:url(carousel_content.html), but it was unsuccessful. <!-- our ...

htmlcsstwitter-bootstrapcarousel

Bottom section of a multi-level website with horizontal dividers

I was struggling with aligning divs next to each other, but I managed to find a solution. The only issue is that the text now aligns to the right instead of going below as it should. Typically this wouldn't be an issue since all content is within the ...

htmlcss

How can I prevent placeholder text from being included when submitting a form using serialize()?

After submitting my form, I save the data using an $.ajax function with $("#formName").serialize() call. One issue I'm facing is that the placeholder text gets submitted along with the serialize() action. I have a function in place to reset the plac ...

htmljqueryplaceholder

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

cssgoogle-chromepdfprintingresume

The active link color for navigation in Bootstrap 4

I am trying to update the active menu links to display in green on my website. Despite various attempts, I have not been successful in changing the color. Can anyone provide guidance on how to proceed? My website is built with Bootstrap 4 and mdbootstrap. ...

cssbootstrap-4navigationbar

What is the best way to manage photos from your phone without having to upload them online?

I'm currently developing an application using AngularJS/Javascript, HTML, and CSS within a cloud-based environment on c9.io. My next task is to create and test an app that can access the phone's photo album, apply filters to images, and I'm ...

javascripthtmlcssangularjsimage-processing

Assigning a price to a list of pizza options within a dropdown menu

//The goal is to assign a numerical price to each pizza in the array. We must maintain the structure of the array within the select form. Next, we need to display it in another PHP file, how do we retrieve the values? <fieldset> ...

phphtmlarraysformsselect

Is the embedded audio player not showing up on the screen?

I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't ...

htmlcssembed

Revamp your Redux Form with a fresh new 'Field' label style

Is there a way to style the label of a Redux Form field? The Redux Form API does not provide information on how to apply styles to the label. Despite applying the classes.formField class, the label itself remains unstyled. Could this be an issue with inhe ...

cssreactjsmaterial-uiredux-form

Opt for text links over browse forms

My requirement is to have a simple text link that triggers a browse-window opening. The idea is that when users click on certain words (such as 'upload an image'), a browser window appears allowing them to select and upload an image of their choo ...

htmlcssformsupload

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration

Upon completing the installation of @angular/material, @angular/cdk, and @angular/animations through npm install --save, I attempted to reconstruct the flat tree example provided by Angular. Unfortunately, even after addressing the error message stating Co ...

cssangulartreeangular-material

Is there a way to automatically click the 'next' arrow on my image slider?

I'm currently working on a website that uses the Semplice theme in Wordpress. The built-in slider doesn't have an autoplay feature, so I attempted to use jQuery to automatically click the 'next' arrow every 5 seconds. However, I ran int ...

jqueryhtmlcsswordpress

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

Currently, I am utilizing the next/Image component for setting an image and applying styling through tailwindcss. However, I have encountered a roadblock at this juncture. My Objective My goal is to dynamically change the src attribute of the image based ...

javascriptcssreactjsnext.jstailwind-css