Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Help in CSS

Posted on 2016-08-17
5
Medium Priority
?
72 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 20

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 59

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

618 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