In the process of making a single page website, the css for my form is interfering with the rest of my page. Can the div be specified without going one by one through the css and specifying the div. Any help appreciated.
4
-
Please post a link or sample code. It's pretty hard to offer any help based on the info you've provided. Can you add your HTML and CSS to your question along with a description of which styles are causing this issue?ryantdecker– ryantdecker2017-03-29 02:09:06 +00:00Commented Mar 29, 2017 at 2:09
-
I am using this template: blackrockdigital.github.io/startbootstrap-grayscale and this form: codepen.io/matmarsiglio/pen/HLIorskyper12345– skyper123452017-03-29 02:13:17 +00:00Commented Mar 29, 2017 at 2:13
-
And what, specifically, is 'interfering' with your page? What result are you getting that you want to avoid?ryantdecker– ryantdecker2017-03-29 02:16:06 +00:00Commented Mar 29, 2017 at 2:16
-
The navbar is changing color, rather than is being transparent. Also, the text on the first page is doing a weird spacing.skyper12345– skyper123452017-03-29 02:17:40 +00:00Commented Mar 29, 2017 at 2:17
Add a comment
|
2 Answers
I recommend you to read up on CSS Selectors, which are different ways in CSS that you can select specific parts of your HTML elements.
The most basic ones are:
The Element Selector
p { color: #ff0000; }
This selects any element in your HTML that match the CSS rule. In this case it would match all <p>.
The ID Selector
#paragraph { color: #ff0000; }
This selects the element that got a unique ID set to "paragraph". In this case it would select any of the following elements:
<div id="paragraph"></div>
<p id="paragraph"></p>
<span id="paragraph"></span>
Note that ID's are suppose to be unique. You are not suppose to have multiple elements with the same ID in your HTML.
The Class Selector
.paragraph { color: #ff0000; }
The class selector selects all element with a class name that match the CSS rule. Note that class names do not need to be unique, unlike ID's, many elements can share the same class name.
The rule above match all of the following elements
<div class="paragraph"></div>
<p class="paragraph header"></p>
<span class="image paragraph"></span>
You can also combine these (and other CSS selectors) to be more specific of what you want to select and style with your rule. For example, if you only want to select all <p> with the class name paragraph, but no other elements with the same class. You would write the following:
p.paragraph { color: #ff0000; }
Fix your problem
With the knowledge above you can easily fix the issue you are having. The CSS of your form is very generic and it uses Element Selectors to select all elements on the page. You can fix this by setting classes and ID's on your HTML elements, and then adjusting your CSS rules to select the specific elements that you want to change.
Comments
The form you are trying to use includes some very generic CSS - it styles the <body> and <header> elements, for starters, as well as all <input> elements. If you want to limit the impact of the CSS from the form on the rest of your site, you will need to make it more specific. For example, if you change
header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
to
#form header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
it will only be applied to <header> elements that are inside of an element with the id="form" attribute (in this case, that's the ID on the form you are trying to use). You may have to add this more specific selector to several of the CSS selectors from the form that are impacting other parts of your page.
