Solved

Is it possible to use two CSS on a single page?

Posted on 2013-12-10
11
248 Views
Last Modified: 2013-12-12
My page has a top section and a bottom section. The top section contains a JavaScript drop-down menu. The bottom portion of the page contains text, some of which are hyperlinks. I applied a CSS to the page.

My drop-down menu is JavaScript and when scrolled over, the links are highlighted and the text change color.

My problem is this. My CSS is causing a conflict affecting a drop-down menu. Specifically, the rollover link, visited, hover, active style links.  I do not want this applied to the JavaScript, just the text on the page.

Can I have two CSS on the same page? If so, how do I point a table/section to one CSS and the other tables/section to use another CSS?

Any assistance is greatly appreciated. Thank you.
0
Comment
Question by:arendt73
  • 5
  • 2
  • 2
  • +1
11 Comments
 
LVL 11

Accepted Solution

by:
Angelp1ay earned 500 total points
ID: 39708607
Yes. It is in fact very common for websites to define styles in multiple external CSS files and inline. The key is that you need to target your CSS more precisely to ensure a correct cascade effect (with some more specific styles overriding more generic ones).

Have a look at this resource on CSS selectors:
http://www.w3schools.com/cssref/css_selectors.asp

It's hard to give a more precise answer without some example HTML / CSS but in general it should look something like this:
--- CSS ---
a:hover { ... } // Generic styles
div.jsMenu a:hover { ... } // Menu specific styles

--- HTML ---
<div class="jsMenu">
    <!-- your Javascript powered menu -->
</div>

Open in new window


CSS application type (e.g. inline, style tags, imported) and CSS selectors (e.g. class, id, tag) have an order of precedence. This is a good article:
http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence

In short...

Precedence of definition types (highest to lowest)
1) Inline styles
2) Embedded styles
3) External styles

Precedence of selector types (highest to lowest)
1) The ID selector
2) The attribute selector
3) The class selector
4) The child selector
5) The adjacent sibling selector
6) The descendant selector
7) The type selector
0
 

Author Comment

by:arendt73
ID: 39708665
Angelp1ay, I have attached my example/sample code, script, and css for your review. Any assistance or help is greatly appreciated.

Thank you.
experts.htm
experts.css
experts.js
0
 
LVL 11

Expert Comment

by:Angelp1ay
ID: 39708668
I figure it might be helpful to give you some examples too:
table#specificTable { ... }     // ID selector
a[rel=external] { ... }         // attribute selector
table.typeOfTable { ... }       // class selector
div.outer > p.child { ... }     // child selector 
img + p { ... }                 // adjacent sibling selector 
div p { ... }                   // descendant selector 
div { ... }                     // type selector

Open in new window


...oh and the hover in CSS is a selector known as a psuedo class (Mozzilla have a nice list):
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 11

Expert Comment

by:Angelp1ay
ID: 39708675
Just saw your example! Checking now :)
0
 
LVL 11

Expert Comment

by:Angelp1ay
ID: 39708743
It all seems to be working fine here (using Chrome on Win 8).

I've quickly extracted the CSS and HTML that your JS is writing. This is the core structure of your menu HTML (notice all the IDs and classes you can hook onto):
            <span id="menuspan842">
                <table width=489 id="menutable842" cellspacing=0 cellpadding=4>
                    <tr>
                        <td class="topcell842" ...>
                            <a ... class="topitem842">...</a>
                            etc.
                </table><p>
                    <div id="submenu842_0">
                        <table id="submenutable842" width=166 cellspacing=0>
                            ...
                        </table>
                    </div>
                    <div id="submenu842_1">
                        <table id="submenutable842" width=160 cellspacing=0>
                            ...
                        </table>
                    </div>
                    <div id="submenu842_2">
                        <table id="submenutable842" width=159 cellspacing=0>
                            ...
                        </table>
                    </div>
            </span>

Open in new window


Where the associated CSS for your menu is not specifying anything e.g. for :hover, :visited, etc. they are inheriting these from your more generic CSS (this is the cascade part of CSS).

You can prevent this by specifying the behaviour these items should have more specifically. For example (background-color set generically and overridden for JS menu elements):
--- Current ---
a.topitem842 {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 700;
    font-family: Times New Roman;
    font-size: 13px;
    font-style: normal;
}

    a.topitem842:hover {
        text-decoration: none;
        color: #FFFFFF;
        font-weight: 700;
        font-family: Times New Roman;
        font-size: 13px;
        font-style: normal;
    }

--- Updated ---
a { background-color: White; }
a:visited { background-color: Pink; }
a:hover { background-color: Red; }

a.topitem842, a.topitem842:visited {      <--- add visited psuedo class
    text-decoration: none;
    color: #FFFFFF;
    background-color: transparent;        <--- override generic
    font-weight: 700;
    font-family: Times New Roman;
    font-size: 13px;
    font-style: normal;
}

a.topitem842:hover {
    text-decoration: none;
    color: #FFFFFF;
    background-color: transparent;        <--- override generic
    font-weight: 700;
    font-family: Times New Roman;
    font-size: 13px;
    font-style: normal;
}

Open in new window

temp.css
temp.htm
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39708816
You have some issues there to start with you are using an obsolete doctype with a 20th century table based lay out filled with obsolete attributes that are going to interfere with the proper application of cascaded CSS properties.

That then gets compounded by using document.write in script to generate CSS.  That is about as backward an inefficient as anything I have ever seen.

You may develop something to gives you what you want with that mess, but everytime you want to do something with it you are going to spend 10 times as much time as it should take.

If it was me I would scrap it and re-write it using modern maintainable technology. so instead of spending all this time trying to do a simple change you could do it in the 30 seconds it would take on a modern page.

Cd&
0
 
LVL 11

Expert Comment

by:Angelp1ay
ID: 39708904
@Cd - Agree

@arendt - Should you want to upgrade (it may make you life easier) then it seems there are plenty of menus you can grab off the web. It's so much easier than when I was last developing front end!! Here are some good looking links I found from a quick Google search:

http://www.cssmenubuilder.com/build-horizontal-menu
http://cssmenumaker.com/menu/animated-drop-down-css3
http://css3menu.com/mac-green.html

We're diverging off scope quite a bit but I'd also like to suggest you make use of these validators to help you produce valid (and hence more reliable / consistently performing) code:

http://html5.validator.nu/
http://www.css-validator.org/
http://www.jslint.com/
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39708915
Got to agree with Cd& here

If you continue using code like that your site will more than likely fail. Can't for the life of me think of a single reason for that Javascript.
0
 

Author Comment

by:arendt73
ID: 39708962
The Java script was created using a menu maker program.  Not hand coded by me.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39708983
Yeah well the menu maker is your main problem.  There are thousands of plugins, templates, themes, and stand alone code sets that use modern approaches.

If you don't want to learn to do the coding so you actually control the page, then at least move to something that is not based on 1998 technology.

Cd&
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39708985
That makes sense - generated code is almost always bloated, ugly and unreliable - any web developer that is serious about what they do will mostly hand-code their sites ;)
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

816 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now