How to add inline CSS styles to an element for which the source of the CSS is a file (and not inline text) that you can't feasibly edit?

593 Views Asked by Joshua Mitchell At 04 January 2018 at 20:33

I have an html page (index.html) and css page (styles.css) with various elements (including a table) and styles:

index.html:

<!DOCTYPE html>
<html>
    <head>
        ...
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        ...
        <table>
        ...
    </body>
</html

styles.css:

...
*various styles*
...

I want to apply the pure[1] css styles to only the table (i.e. have all the styles.css styles apply, and then have any applicable pure styles override those of styles.css).

Something like this (so that the pure CSS doesn't influence any of the other elements):

index.html:

...
<table class="pure-table" css-src="https://unpkg.com/[email protected]/build/pure-min.css">
...

I haven't been able to find a way to do this feasibly. I know I could comb through the pure CSS file and copy/paste/tweak styles into styles.css until it looks similar, but seems like there should be a better way (some kind of locally scoped CSS).

[1] https://purecss.io/start/

Original Q&A

There are 1 best solutions below

Mr. Hugo On 05 January 2018 at 19:47

I did a copy paste after searching for 'table' in this file: https://unpkg.com/[email protected]/build/pure.css. It comes down the following CSS, which can be used like this, as I think it will not break anything else.

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial, sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,
.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: 0.5em 1em;
}

.pure-table td:first-child,
.pure-table th:first-child {
    border-left-width: 0;
}

.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
.pure-table-odd td {
    background-color: #f2f2f2;
}

.pure-table-striped tr:nth-child(2n-1) td {
    background-color: #f2f2f2;
}

.pure-table-bordered td {
    border-bottom: 1px solid #cbcbcb;
}
.pure-table-bordered tbody > tr:last-child > td {
    border-bottom-width: 0;
}

.pure-table-horizontal td,
.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}
.pure-table-horizontal tbody > tr:last-child > td {
    border-bottom-width: 0;
}

How to add inline CSS styles to an element for which the source of the CSS is a file (and not inline text) that you can't feasibly edit?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in JEKYLL

Related Questions in GITHUB-PAGES

Related Questions in YUI-PURE-CSS

Trending Questions

Popular # Hahtags

Popular Questions