|
CSS - Universal Selector & @import In External Stylesheets
i thought i was pretty well versed in css, but i have come across an annoying problem.
on my website, i have multiple external stylesheets; there is virtually 0 internal and inline styling. this is to make the code as clean and elegant as possible. the primary stylesheet, full.css , references to two other external stylesheets ( background.css and spacing.css ). background.css ' only purpose is to enable the background scaling feature. spacing.css ' only purpose is to set the margins, padding, etc of the page(s). i have an alternate stylesheet, bw.css , but it only references spacing.css , since the scaling background feature is not intended to part of how the page looks when styled with bw.css . i have used (or attempted to use) the * universal selector in bw.css to style every element to use a different background, different font color, and different font than what was used in full.css . the problem is, the * doesnt seem to work as intended, when combined with @import . only certain css properties seem to work, but i do not know which ones work and which ones dont. i can rectify the problem by using !important , but id rather not, since its not as elegant as not using it. my question is, how do i solve this problem without using !important ? my site: prototism.co.cc full.css css Code: Original - css Code @import url("background.css"); @import url("spacing.css"); * { cursor: default; font-family: "Verdana", sans-serif; } a { color: #ddd; cursor: pointer; text-decoration: none; } a:hover { background-image: url("../img/link-bg.png"); color: white; } #links, #header { font-size: 34pt; letter-spacing: -3px; } #links, #footer { text-transform: lowercase; } #header { color: white; } #footer { font-size: 12pt; } #footer span { color: #ddd; }
@import url("background.css");
bw.css css Code: Original - css Code @import url("spacing.css"); * { font-family: "Georgia", "Times New Roman", serif; background-image: none; color: black; } a:hover { color: white; background-color: black; } .check { color: #006400; } #links a { margin-left: 30px; } #background { display: none; }
@import url("spacing.css");
Similar TutorialsI'm building a site that will have a style sheet that should be applied site wide (main.css) and then some pages will have styles that should only be applied to them (custom<X>.css). Should I use multiple <link> tags to import each stylesheet or should I edit custom<X>.css and add @import "main.css"; to the beginning. Doing this would make the code look cleaner, but will the browser still cache the main.css file? Am I being too persnickety about the look of my code and just use multiple <link>s? Hi everyone, Been racking my brains trying to figure out why a class is not being applied to a div, then i narrowed it down and realised that the ID selector is always taking precedence to the class attribute. Consdier this html page: Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <style type="text/css"> #container { background-color: red; width: 100px; height: 50px; } .change_bg { background-color: green; } </style> </head> <body> <div id="container" class="change_bg" ></div> </body> </html> The div's background color comes out red and not green, as one would expect. Why is this happening? aren't styles supposed to be cascading? isn't that what CSS is all about? I can use !important but i want to know why it's not doing what is expected. Many thanks Is there some script or something you can put into your page to fix any IE7 haslayout problems? I'm trying to change my site to have a css for easy changing. I've gotten 1 written that encompasses all styles, however I'm trying to do data as well. Navigational menu, header etc. I'm assuming I ought to be able to have css1 for styles, css2 for data and html page that pulls from each? Here's my style css: body { margin : 0; padding : 0; } body { background-image: url('PrairieWindbkg.gif') } body {background-color: #0000FF;} p, ul, ol, li { font : 10pt Arial,geneva,helvetica; } h2 { font : bold 12pt Arial, Helvetica, geneva; } #leftnavigation { position : absolute; left : 0; width : 240px; margin-left : 10px; margin-top : 140px; color : #FFFFFF; padding : 3px; } a:link, a:visited { color: #FFFFFF; } a:hover, a:active { color: #FFFFFF; } #leftnavigation { font : 15pt Arial, Helvetica, geneva; } #headnavigation { position : absolute; left : 0; width : 550px; margin-left : 220px; margin-top : 10px; color : #ffffff; padding : 3px; } #headnavigation { font : 40pt Vivaldi, Helvetica, white, geneva; } #content { margin-left : 10px; margin-top : 80px; padding : 3px; color : #000000; } #content h1, #content h2 { color : #cc0000; } #productnavigation { position : absolute; left : 0; width : 950px; margin-left : 263px; margin-top : 35px; color : #ffffff; padding : 3px; } #productnavigation { font : 25pt Arial, Helvetica, geneva; } #counternavigation { position : absolute; left : 0; width : 150px; margin-left : 350px; margin-top : 700px; color : #ffffff; padding : 3px; } It can be seen on http://jewelrybydawn.com/TestCss.html in use. Now the parts I'm trying to make dynamic/static (?) (ok, universal!) are the left menu, top heading, top menu. Then I want each page to have the jewelry items that apply to it. I tried making another css along the lines of: #navbar { <br><A HREF="Shows.html" TARGET="">Current 2005-2006 Show Schedule!</A> <P><A HREF="Lampwork.html" TARGET="">Lampwork Beads</A> <p><A HREF="JewelryClub.html" TARGET="">Jewelry of the Month Club</A> <P><A HREF="Necklaces.html" TARGET="">Necklaces</A> <P><A HREF="Bracelets.html" TARGET="">Bracelets</A> <P><A HREF="Earrings.html" TARGET="">Earrings</A> <P><A HREF="Personalized_Jewelry.html" TARGET="">Personalized Bracelets</A> <P><A HREF="Gift_Certificates.html" TARGET="">Gift Certificates</A> <P><A HREF="samples.html" TARGET="">Jewelry & Bead Gallery</A> <P><A HREF="Katrina.html" TARGET="">My Hurricane Katrina House Update!</A> <P><A HREF="Newsletter.html" TARGET="_blank">Current Newsletter</A> <P></p> } so that on each actual page I would have: <link href="Test.css" rel="stylesheet" type="text/css" /> <link href="TestNavbar.css" rel="stylesheet" type="text/css" /> </head> <div id="leftnavigation"> <div id="navbar"> </div></div> OR something to this effect... that way if I kill the Katrina link for example, I don't have to revise every single page, just the TestNavbar.css. Can anyone help? Thanks! Dawn Hello. I have 3 stylesheets included on a page. The first one is for media, the second is for printing and the third I just added for printing an alternate page. Since I added the 3rd sheet my second sheet no longer works. Why is that?? <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="print.css" media="print"> <link rel='alternate' media='print' href="null" id='printstyle'> The third sheet should ONLY get called by this... <script type="text/javascript"> function setPrintPage(prnThis){ document.getElementById('printstyle').href = prnThis; window.print(); } </script> Is there a way to check if the user is using a mac, and if so, tell it to use a different stylesheet? I'm trying to manipulate a stylesheet to make elements appear and disappear on an HTML form. The code I've adapted from various sources works fine on non-IE browsers and sort of works on IE but there's something I don't understand and can't get to work. My page starts: Code:
<style ID=\"xyzzy\" TYPE=\"text/css\">
</style>
<SCRIPT TYPE=\"text/javascript\">
<!--
function setClassAttr(c, a, v) {
var agt=navigator.userAgent.toLowerCase();
var e;
// Style sheet management depends on browser.
// See URL or URL
if (agt.indexOf('gecko') != -1) {
e=document.getElementById('xyzzy');
e.sheet.insertRule(c + ' { ' + a + ': ' + v + '}',
e.sheet.cssRules.length)
}
else if ( (parseInt(navigator.appVersion)>=4)
&& (agt.indexOf('msie') != -1) ) {
document.styleSheets['xyzzy'].addRule(c, a+':'+v);
}
}
...
And I use this to set "display" to "block" or "none" for subordinate elements when a checkbox is checked or unchecked. As I said, this works for non-IE browsers but in IE, I click the first checkbox and nothing appears to happen. If I then click the background of the document, the elements appear. I've searched the web and MSDN for some way of flushing the stylesheet change or generating a Click from JavaScript and I can't find anything. I tried disabling and reabling the stylesheet and it didn't help. I tried moveBy(0,0) and it didn't help. Is this a bug in IE or in my understanding of what should happen? If the former, how can I work around it? Can I generate a Click from JavaScript somehow? Redraw the window somehow? If the latter, what am I missing? TIA. alright just a quickie question, can you include css stylesheets that are outside of the web root folder? cuz i just switched all my include files for a project im working on to outside the webroot, and now my css wont include and yes i changed the path...... might just be a coding error on my part i dont know Is there coding that can be added into a stylesheet so that when a <div> tag is used in an HTML document, it will display HTML information (tables, images, hyperlinked text, centering, etc.) from the stylesheet in the HTML document that is linked to that stylesheet? Meaning: If I wanted a single-row table, divided into two columns: one column with plain text, another with hyperlinked text to pages throughout my website (including pages in subfolders) to appear on every page that has a link to the stylesheet. This way, I could have the same table, text, and hyperlinks appear on any page that has the DIV tag placed (ie: <div id="idlabel"></div>) I wanted this so that if I need to update those links, I can do it globally by changing the stylesheet, and not having to go to each page individually. I don't know how to code, nor have a server that can use, ASP or PHP. Can CSS be used to "dynamically" update webpages, just as you can change fonts, spans, indents, text/image placement, etc. globally by changing the stylesheet? Also, if the HTML is possible, can a graphical, Flash, or JavaScript/Form drop-down menu also be handled in the same way? I'm writing an application that uses stylesheets to display certain items. The user can alter the positioning etc. of these items (which then rewrites the stylesheet for future use), and then reloads the page. Unfortunately the old coordinates are still apllied to the elements in question until I manually hit the browser's reload button, then the new values are used. I'm guessing the style is being cached somewhere? If so can anyone advise how to stop this? thanks p.s. Its just a basic refresh that sorts it out, not a *hard* refresh. ================== I've come up with a fix of sorts. If I write the style out dynamically within the div itself each time then my problem is solved. I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS Hi all, I know this info is out there, but I'm having trouble getting a precise answer. I am a web software developer, and I would like to include one stylesheet that points to x number of other stylesheets. My goal is to give the designers full control over the styles and I won't have to re-cache pages when they want to import another css file. Will it work to simply link to one main stylesheet, such as @import url('http://www.somewhere.com/css/main.css');, that includes additional @import statements? Thanks! I would like to know if anyone has done something like this - I need to have the look and feel of a site totally configurable through a web interface. All data is going to be stored in a database and I would like to know whether I can autogenerate or update a style sheet based on data from a database. Has anyone done this? Or is this the wrong approach to take in such a case? I also have several clients using the same site, each needing to have their own configurations. I would like to avoid having to have a separate style sheet for each client if possible. Can the properties in a stylesheet be set dynamically on a session per session basis? Is there a CSS selector that only IE5 will detect? I have my site working fine in IE6 and Firefox now and it displays legibly in IE5 but the padding is a bit off. Is there a selector I can use (such as * for IE in general) to make a change to the padding on IE5. Or should I be looking into loading separate CSS files dependent on the users browser? Hi, I check my css file on 3wc. you will find the error messages/warnings and my css code in this link http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Falicelee.no-ip.com&usermedium=all I did some research on ID selector. I still don;t understand understand why 3wc css validator cannot recognize ID selector... how should i correct the errors and warning? i have already done the html validation... it is error-free and valid in html 4.0 thanks I'm new to CSS but have read more in the past two days than I care to tell you about. I'm stuck on how to reference a deeply nested element that is automatically generated by a drupal view. The problem lies with the fact that I can select it directly and style it but other views (pages) are rendered with the exact same attributes (Name, Class, and ID). The Class of the page or view is different but is nested about seven tags back. My question is: How can I select the Element to be styled when the only differentiator is so far back in the hierarchy of the page without using a local or inline CSS? The following are snippets of the two pages that share the same Element attributes (<select name="filter0" class="form-select" id="edit-filter0" >) Thanks for any suggestions you might have. Mike ********* First page ******************* Code: <div class='view view-firstview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
******** Second Page ******************** Code: <div class='view view-secondview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
is there a specific order in which to put the css selectors in a style sheet, eg a:link a:hover a:active a:visited my problem is that the hover state isn't activated for links i have already visited. thank you Hello friends How can i define a css rule with an ID selector for two or more different ID's for an <div> element thanks I have a large data sheet with individual td IDs, numbered 1 to 49 (first 3 shown for reference). <td id="data_cell_1"> <td id="data_cell_2"> <td id="data_cell_3"> I have been trying to apply a style to all of them (No I don't want to use a class, because they override the id's don't they? Or could I apply both a class and id to an element?) td[rel~="data_cell_"]:hover{background: #87F0FF;} td#[rel~="data_cell_"]:hover{background: #87F0FF;} td[id~="data_cell_"]:hover{background: #87F0FF;} td#[id~="data_cell_"]:hover{background: #87F0FF;} None of those worked. Isn't there a way to select all ID's based on partial information? |
|||||||