PDA

View Full Version : Using a CSS file to only affect a particular section of my site?


tmacka88
07-20-2012, 07:35 AM
Ok.

I recently just added a contact form to my site that im setting up and in doing so the CSS file that I had to import into my site has now change all of my default settings throughout the rest of the page. No I no I can go through and make a rule for all the original items and set them to the right setting but this seems like a waste of time. Is there any way I can make my CSS file that I imported for the form only affect the form it self and nothing else.

So this is my CSS file:
ajax-contact-form.css

and this is the start of my form:

<div class="ajax-contact-form">

can I add an ID that the css file can recognise rather than a class id for a rule.

e.g.
<div class="ajax-contact-form" id="contactFormCssRules">

how can I get this
ajax-contact-form.css

to talk to this

<div class="ajax-contact-form" id="contactFormCssRules">

hope im not confusing you. cause its confusing me...


Thanks

Corrosive
07-20-2012, 07:54 AM
Ok.

I recently just added a contact form to my site that im setting up and in doing so the CSS file that I had to import into my site has now change all of my default settings throughout the rest of the page. No I no I can go through and make a rule for all the original items and set them to the right setting but this seems like a waste of time. Is there any way I can make my CSS file that I imported for the form only affect the form it self and nothing else.

So this is my CSS file:
ajax-contact-form.css

and this is the start of my form:

<div class="ajax-contact-form">

can I add an ID that the css file can recognise rather than a class id for a rule.

e.g.
<div class="ajax-contact-form" id="contactFormCssRules">

how can I get this
ajax-contact-form.css

to talk to this

<div class="ajax-contact-form" id="contactFormCssRules">

hope im not confusing you. cause its confusing me...


Thanks

You can do this a number of ways but probably the most efficient is to create the styles in your existing stylesheet and target you form using;

#contactFormCssRules form {styles for form go here}
#contactFormCssRules form input {styles for form inputs go here}


and so on...

tmacka88
07-20-2012, 08:00 AM
You can do this a number of ways but probably the most efficient is to create the styles in your existing stylesheet and target you form using;

#contactFormCssRules form {styles for form go here}
#contactFormCssRules form input {styles for form inputs go here}


and so on...

Im only new to making site and DW so im not exactly sure what you mean.
Do you mean move the styles from the contact-form.css to the main .css file the whole site uses.

can you go into more detail after that. SOrry.

Also is there any way I can keep the styles in their own .css file as I have alot of styles in both .css files and dont really want to mix them up.

this is my site if it helps

http://multidisplayutility.site11.com/Contact.html

thanks again

Corrosive
07-20-2012, 08:12 AM
Yes you can link a second stylesheet;

<link href="pathtofile/ajax-contact-form.css" rel="stylesheet">

Goes in between your head tags

tmacka88
07-20-2012, 08:50 AM
Yes you can link a second stylesheet;

<link href="pathtofile/ajax-contact-form.css" rel="stylesheet">

Goes in between your head tags

already have that.

<link href="hero_v1_files/bootstrap-responsive.css" rel="stylesheet">

but bootstrap-responsive.css is affecting the style of the rest of the page.

So this is my contact form html

<div class="ajax-contact-form"> <!-- CSS add for contact form step 3 -->
<div class="form">
<div class="title">
<p>Contact Form</p>
</div>
<div class="form-holder">
<div class="notification canhide"></div>
<form id="frm_contact" name="frm_contact" action="contact.php" method="post">
<div class="field first">
<label for="name">Name <span class="required">*</span></label>
<div class="inputs">
<input class="aweform" type="text" id="name" name="name" />
</div>
</div>
<div class="field">
<label for="email">E-mail Address <span class="required">*</span></label>
<div class="inputs">
<input class="aweform" type="text" autocapitalize="off" autocorrect="off" id="email" name="email" />
</div>
</div>
<div class="field">
<label for="subject">Subject<span class="required"> *</span></label>
<div class="inputs">
<select class="aweform" id="subject" name="subject">
<option>Please Select</option>
<option value="Feedback">Feedback</option>
<option value="Feature Request">Feature Request</option>
<option value="Support">Support</option>
<option value="General">General</option>
</select>
</div>
</div>
<div class="field">
<label for="message">Message <span class="required">*</span></label>
<div class="inputs">
<textarea class="aweform" id="message" name="message" rows="30" cols="5"></textarea>
</div>
</div>
<div class="field">
<label for="verify">Captcha? <span class="required">*</span></label>
<div class="inputs">
<div class="captcha">
<img src="tools/captcha/captcha.php" class="captcha-img" alt="Verification" width="200" height="70" />
<img src="images/refresh.png" class="change-captcha" alt="Change Text" title="Change Text" width="16" height="16" />
<br /><input class="aweform captcha autocomplete-off" autocapitalize="off" type="text" id="verify" name="verify" />
</div>
</div>
</div>
<div class="form-submit">
<button type="submit" id="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>

how to I make the bootstrap-responsive.css only affect this html code above and nothing else such as my footer nag bar etc which is all styled by another file called bootstrap.css

thanks

edbr
07-20-2012, 09:02 AM
you will have to find the conflicts and rename them

Corrosive
07-20-2012, 09:03 AM
Your 'repsonsive' stylesheet is aimed at mobiles/tablets. If you want to target specific form elements in a specific div tag then look at my first response about compound selectors. Just out of morbid curiosity... Have you actually bothered to study any CSS or web design theory at all before embarking on this build? http://htmldog.com/guides/cssbeginner/

tmacka88
07-20-2012, 10:20 AM
Your 'repsonsive' stylesheet is aimed at mobiles/tablets. If you want to target specific form elements in a specific div tag then look at my first response about compound selectors. Just out of morbid curiosity... Have you actually bothered to study any CSS or web design theory at all before embarking on this build? http://htmldog.com/guides/cssbeginner/

yes but I im only relatively new and am jumping into the deep end a little. I learn quicker this way.

Corrosive
07-20-2012, 12:32 PM
yes but I im only relatively new and am jumping into the deep end a little. I learn quicker this way.

Which is fine, as we all learn in different ways, but I'd thoroughly recommend reading through those basic tuts on html dog as they will help you to understand selectors and stylesheets a lot better and you might have a fighting chance of understanding the answers we can give you.