CSS - Main Css File Overriding Local Style Tags

I am using style sheet for fonts etc. I was wondering is it OK to use style sheet and <Font> tags at the same time on a page. I mean if you are using certain font only once. Why bother creating a class in style sheet and then calling using that class ..

Hello Everyone @ Devshed,

I'm trying to improve my limited CSS skills and have a few simple questions which would really help clean up my HTML. I haven't been able to find the answer in the excellent CSS resources in the sticky (if you haven't already they are worth checking out), or in past questions so here is a new post.

I understand it is possible to set styles for html tags which then apply to all document elements without having to specify a class in the actual html, so a style sheet looking like,

table {border: 1px solid #000000; background-color: #EEEEEE;}
th {font-weight: bold;}
td {font-size: 10px;} ....

Applies to a table such as the one below without having to specify a class attribute in each element.

<table>
<th>Title</th>
<td>Cell </td>
</table>

I have 8 small tables on a page and would like to specify each with a unique style. A example styling could be

table .style1 {border: 2px solid #000000; background-color: #CCCCCC;}
th .style1 {font-style: italic;}
td .style1 {font-size: 12px;},

Is there anyway I can re-write the style sheet declarations so that I declare the style I want to apply to the entire table just the once? As opposed to writing class='style1' in each table element (see below). Are ID's usefull here?

<table class='style1'>
<th class='style1'>Title</th>
<td class='style1'>Cell</td>
</table>

Thanks in advance for your time,

Peter

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!

hello. i'm building a javascript application which will allow the user to select a file from his/her hard drive (using <input type='file' />) and display the image in the background. when the user hits submit, the image will be uploaded and in the future, the user will have the image hosted from the server.

the reason i post this in the CSS forum is because the error is coming from CSS, not javascript. i need to know how to point the css to an image on the user's local machine.

Why will Code:

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

work in the document inside style tags but won't work if set into a separate css file?

Thanks.

HeadElf

Hi,

I'm wondering if it is possible to override style settings in an external html document. I'm using the <--#include file command to include a html file. I don't want to modify the html file, because people (here at work) are making documents in word9 and save it to html. The major problem is that the <hr> line is too long and so is the text, so it don't fit on our website, at this point these documents are opened in a new window, but it would be nicer to intergrate them into our site.

thanks

-Dan

I am using a stylesheet to set some styles on my tables etc.

I want to override a table that is inside of a <div> to use a separate style... is this possible and if so how?

I tried using div id="idhere" and then setting a style with that ID but it didn't seem to work.

Thank you.

Hi, I am trying to add bottom borders and image bullets to only the first level of unordered lists and no matter what is code, I get them everywhere.

Can someone offer some insight (or where I can get some) for targeting specific ul li levels?

Thanks...

Hi,

Is there a way to tell the browser to replace certain colours with other colours? For example replace #FF0000 with #00FF00?

Also is there anyway to refer to the parent of an element?

Thanks,
Matthew

I'm making changes to a web application and right at the top of the CSS of the common header for the generated HTML there are pseudoclasses for the link colors. a:link a:hover.... etc.

I was trying to change the color of a few links further down on the page by creating seperate classes and I was getting very odd results. Some links would change color and some would not. Finally I noticed the pseudoclasses at the top and commented them out. Suddenly all my colors looked GREAT in internet explorer, but it seems that Mozilla is ignoring my seperate classes and making the links into the browser default.

Here is a summary of my generated code right now:

CSS:
a:link,a:active,a:visited { color : #5E6C85; }
a:hover { text-decoration: underline; color : #DD6900; }

.indnav { font-weight: bold; font-size: 11px; color : #000000; }
a.indnav { text-decoration: none; color : #000000; }
a.indnav:hover { text-decoration: underline; }


HTML:
<span class="indnav"><a href="index.php" class="indnav">(link text)</a></span>


So what I would really like is for the pseudoclasses to apply for all links, except for when I define a specific class it should override the pseudoclasses. How do I do this? Thanks so much for your time in answering.

so...
having this problem where i have some css styles applied to form inut boxes, and one of them asks for the user to input his/her email address. IE, thinking it's being helpful, is overriding my nice green background with an ugly yellow background.

I've done some testing, and if i put the word "email", "e_mail", "e-mail", or even "mail_e" in either the html text NEXT to the blank, or in the name of the INPUT tag, IE assumes i want it to be yellow.

any way of overriding this?

CSS:
Code:

.inputBox {
	border: 1 solid black;
	background-color: #bcdd4a;
	font-size: 12;
	width: 200;
	height: 16;
	color: #145e16;
	font-weight: bold;
}

HTML:
Code:

<td valign=top>E-mail:</td>
<td valign=top><input type="text" class="inputBox" name="emailAddress" size=20></td>

IE Version: 6.0.2800.1106
LINK: http://www.t-2.biz/contact.php

please help, frustration setting in.

cheers \\ kfancy

I have this tag in an external css file

Code:

td {
   text-align:left;  //and yes i know that its left by default
}

Inside my html file I have a td with alignment set to right, which according to my understanding should override the external css file, however it doesn't. The content is still left aligned. Why is that?

Thanks

please delete

Hi there!
http://pastebin.com/m46dae086

Basically, see line #218? I define a background image for my lists, and it works great.

See line #473? I try to erase the background image if the <dl> class has the "forum" class attached to it.

That background's not going away. What am I doing wrong?

I am working in Drupal and have a menu with secondary levels. I have coded css on the menu a tag with borders and no background.

.primary-menu-inner ul.sf-menu a {
color: #FFFFFF;
display:block;
border-left:1px solid #ffcc33;
border-right:1px solid #6f4c23;
}

I am trying to override the .primary-menu-inner ul.sf-menu li.active-trail

.primary-menu-inner ul.sf-menu li.active-trail {
background: url(../images/nav.png) no-repeat right -64px;
border-bottom:1px solid #a67c52;
border-right:1px solid #a67c52;
border-left: 1px solid #38230b;
visibility: visible;
}

to where the borders settings on the a tag does not show up on the li.active trail.

Any suggestions would be great...