?
Solved

Help in CSS

Posted on 2016-08-17
5
Medium Priority
?
69 Views
Last Modified: 2016-11-08
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
Comment
Question by:shah36
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 19

Assisted Solution

by:Serena Hsi
Serena Hsi earned 1000 total points
ID: 41759799
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
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41759844
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
 
LVL 3

Accepted Solution

by:
Donna earned 1000 total points
ID: 41759849
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
 

Author Comment

by:shah36
ID: 41765067
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
 
LVL 3

Expert Comment

by:Donna
ID: 41879629
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month12 days, 6 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question