[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 75
  • Last Modified:

Help in CSS

Hi guys,
I am not very fluent with CSS and i am using a web based reporting tool (BIRT from Actuate). They give functionality to import the CSS sheets. However i can only import CSS2 style sheets and in a specific format.
Was just wondering how can i write the following code in .table-detail class within CSS.#
The code which needs to be embedded with in the class is
* {
  font-family: Helvetica Neue, Arial, sans-serif;
}

body {
  background-image: linear-gradient(#aaa 25%, #000);
}

h1,
table {
  text-align: center;
}

table {
  border-collapse: collapse;
  width: 70%;
  margin: 0 auto 5rem;
}

th,
td {
  padding: 1.5rem;
  font-size: 1.3rem;
}

tr {
  background: hsl(50, 50%, 80%);
}

tr,
td {
  transition: .4s ease-in;
}

tr:first-child {
  background: hsla(12, 100%, 40%, 0.5);
}

tr:nth-child(even) {
  background: hsla(50, 50%, 80%, 0.7);
}

td:empty {
  background: hsla(50, 25%, 60%, 0.7);
}

tr:hover:not(#firstrow),
tr:hover td:empty {
  background: #ff0;
  pointer-events: visible;
}

tr:hover:not(#firstrow) {
  transform: scale(1.2);
  font-weight: 700;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.5);
}

Open in new window


looking forward for your help.

regards
0
shah36
Asked:
shah36
2 Solutions
 
Serena HsiMarketing ConsultantCommented:
W3Schools.com is my goto tutorial reference for html and css syntax.

See here for CSS Table references.

Each formatting element within CSS allows you to 'standardize' how something will look on a web page. To add additional classes or to modify a table class, go to line 14 of your example and add it there.

However, in your case, you need to add an additional CSS entry (and not use Table as I had previously suggested) and call it:

table-detail { whatever whatever ; }

When you are calling that CSS format in HTML, it would look something like this:

<div class="table-detail">
  <table class="table-detail">
    ...
  </table>
</div>

Open in new window

0
 
Julian HansenCommented:
I am not sure I understand what you are asking.

Why the requirement for CSS2 - is the report being rendered somewhere other than in a browser?

In your styles you have transitions which are CSS3?
0
 
DonnaCommented:
whether or not you use table is irrelevant, and does not answer your question. Some things require a table, simple as that. While nowadays it's better form to use a div tag, that doesn't not rescind every need to use a table either...and it HTML and has absolutely nothing to do with CSS, so I don't know why she wrote that.

CSS for the most part, is backwards compatible, with the exception of those attributes that have been deprecated. And from what I understand, BIRT is no longer BIRT but is now called "Open Text Analytics" which is premium software...so are you sure you are using their latest package? Because I can't imagine in this day & age, that their software would not be CSS3 compliant.

Anyways, without getting off the basic question, there is no difference between CSS2 and CSS3 filewise, except for internally possibly having a depracated feature. The file name/type/extension is all the same, it's just somefile.css ...nothing special. And a CSS file is basically just text and opens with any notepad. And the only thing that is different, is the addition of a LOT of new features added to CSS3...it's grown. But CSS2 is a part of CSS3...as is CSS1...a development environment would tell you if an attribute was deprecated or not.

To know if anything is deprecated, you can I suppose look up each item on W3C (that part of her post was good info) , but if you are getting some error specifically on BIRT, maybe go to them for the support of their product? (most logical)

Good luck.
0
 
shah36Author Commented:
Thank you very much for your answers. It gave me help to learn bit of CSS. However BIRT does supports only one style at a time. So for instance we can not apply a whole style sheet on a BIRT table but can only apply a class from a style sheet on BIRT table.

thanks a lot
0
 
DonnaCommented:
well you dont have to use birt...try programmer's notepad...its free. Open the whole stylesheet, and edit what you want. Get CSS info on syntax from W3C
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now