New to CSS, struggling with styling

DazedAndConfused

I'm sure this has been answered before, but I am struggling with formatting and styling my datatable, and cannot find an answer that is dumbed down enough for me.

I've got the tabled-striped class up and running, but need to play with several of the colors, margins, and other aspects of the table, and the supplied CSS stylesheet has way too much stuff going on to wrap my head around it, with many normal CSS calls being what appears to me to be repeated several times.

I'm looking to understand:
1) Which CSS property do I need to modify to change the colors of the striped-table border. (the visible lines between the rows)
2) Which CSS property do I need to modify to change the text color
3) Which CSS property do I need to modify to change the color of the search box and page numbers
4) How do I modify the margins between the lines? The striped rows did most of it, but I need to adjust it further.
5) Whats the best way to change the font/size/color of the column titles? Should it be done through datatables CSS or should I be applying it through the regular stylesheet for the application?

Thanks for any help you can provide.

DazedAndConfused

I found a way to change the border line color, but I'm still struggling with the rest.

Can anyone help me with where to find the proper call for the text in the columns? I need to change the color.

allan

Generally the best way to workout styling rules for something like this is to right click on the element in question and select "Inspect". The browser will show you what is applied.

For the following answers I'll assume you are using Bootstrap 5 since you mentioned table-striped.

1) Which CSS property do I need to modify to change the colors of the striped-table border. (the visible lines between the rows)

Use the --bs-table-border-color CSS variable that Bootstrap 5 offers.

2) Which CSS property do I need to modify to change the text color

-bs-table-color

3) Which CSS property do I need to modify to change the color of the search box and page numbers

div.dt-container div.dt-search input {

}

and

--bs-pagination-color respectively.

4) How do I modify the margins between the lines? The striped rows did most of it, but I need to adjust it further.

The cell padding?

.table > :not(caption) > * > * {
  padding: .5rem .5rem;
}

is the Bootstrap default.

5) Whats the best way to change the font/size/color of the column titles? Should it be done through datatables CSS or should I be applying it through the regular stylesheet for the application?

--bs-table-color-state .

See the Bootstrap documentation for more details on how they use CSS variables.

Allan

DazedAndConfused

Hi Allen, thanks for the help.

I have been using F12, but when I modify the css in the element that it says its under, none of the styles change. (For example I tried making the background color lime green, and it stayed transparent)

It is bootstrap 5.0 as far as I know, but I do not see many of these options listed in the datatables.css file when I try to include them. Is there somewhere else they need to go? Things like--bs-pagination-color and -bs-table-color are not shown as recognized attributes.

allan

If you link to the page in question, or show me what DataTables CSS and JS files you are including I'll be able to say what styling framework you are using.

Allan