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.
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.
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.
Related
I have a popup that will be added to websites via javascript. I have no clue on what sort of styles will be applied on these websites.
Example website has the current styles added:
h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
My Popup which is added to the body of the website has:
PopupText = styled.h3`
font-size: 16px;
color: black;
`;
This means that font size and color are what i've declared but the border will be added regardless, is there any way to remove the added extra css properties, or to protect from additional styling added by the website?
To sum up, I want my popup to look the same, no matter where it is added. As of right now, when i add it to a website it changes depending on what styling is on the website
You can use all attribute like this :
.class {
all: unset;
}
Check it here
I think you need use iframe tag for wrap
You can use the :not() selector to achieve that: If your popup element has a class (which is probably the case) you can modify your regular css rule for h3 as follows:
*:not(.yourpopupclass) h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
This will affect any h3 element that is a child element of anything (i.e. also of body), except if it's a child of an element that has class .yourpopupclass (i.e. is inside your popup).
The same woud be possible with an ID if the popup has no class, but an ID.
Is there a way to only target the direct text within a <h1>-Tag?
Here is an example on what I want to do:
<h1>I want to select this text with a css selector <small>but not this text</small></h1>
This does not seem to work:
h1:not(small)
Is it even possible?
h1:not(small)
Your selector h1:not(small) doesn't work because it says this:
Target all h1 elements that are not small elements.
It's that same as using the h1 selector by itself.
h1 :not(small)
You would have been closer with h1 :not(small), which says:
Target all descendants of an h1 except small elements.
Boom! Exactly what you want.
Except that text contained directly inside an element (i.e, text with no tags around it) becomes an anonymous element. And anonymous elements are not selectable by CSS.
h1 :not(small) {
color: orange;
}
<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>
<hr>
<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>
CSS Parent Selector
For the small element to be excluded it would have to identify itself as a child of the h1.
But there is no parent selector in CSS.
Solution: Two selectors
You need two selectors to make this work:
The first sets the style on the parent.
The second overrides the first on the child.
h1 {
color: orange;
}
h1 > small {
color: black;
}
<h1>I want to select this text with a css selector <small>but not this text</small></h1>
More Information
Targeting text nodes with CSS
Is it possible to style anonymous flex items explicitly?
Is it possible to select elements not preceded by text?
This is the closest it gets to retaining the style without any css that has been implemented by the parent div. This feature hasn't been fully integrated in all browsers, but it should work for some. Hope, it helps.
Browser support -
What's being done here?
The small tag is retaining its original CSS without being affected by the other styles. You can apply this on any of the child elements whose style you want to preserve.
small {
all: initial;
* {
all: unset;
}
}
h1 {
color: #ff0000;
}
<h1>I want to select this tex with a css selector <small>but not this text</small></h1>
Apply styles to h1 however you want, then, revert those changes in small, for example, if you only want to change the color you would use this code;
h1 { color: red; }
h1 small { color: initial; }
Or, if you have multiple style changes;
h1 {
color: red;
font-weight: italic;
text-transform: uppercase;
}
h1 small {
color: initial;
font-weight: initial;
text-transform: initial;
}
Please note that the initial CSS value can be used on every browser, except for IE and Opera Mini. View this page for more information
I write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>
currently i have
<div class="rightBoxesTop">
<h3>My Pages</h3>
<h3 style="line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;">
show in-active <input id="show-in" type="checkbox"></h3>
</div>
I would like to move the inline style to the css. Is this only way to the second H3 an id or is there a way to reference the class rightBoxesTop and use some thing like second something? Also if you could tell me what this kind of styling is so i could search for keywords on how to use it correctly
Thanks
You can try this to style 2nd, 3rd and other following h3 tags:
.rightBoxesTop h3 + h3
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
Also you can use CSS3 selector to style only the second h3:
.rightBoxesTop h3:nth-child(2)
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
if you are able to remove the inline styles, then you can also add a class for it.
This gives you the option to style it easily by its class in the CSS.
UPDATE: Because you must remove the inline styles, you can not override them in your CSS.
You can use the selector div.rightBoxesTop h3 + h3. It will style only h3 elements that are preceded by another h3 element. This does mean, that if you got more of them, they will all be styled, except the first one.
But in this case, I would consider adding a class (rather than an id) to the second h3.
You can use .rightBoxesTop h3+h3{} as people suggested, but be careful, if you add another h3 the last 2 h3's will have that styling, or if you create another div inside .rightBoxesTop that has more than h3's they will get the styling as well, so a precise way would be:
.rightBoxesTop>h3:first-child+h3{
//your css here
}
Which would mean "The first children's( ">" means direct child, so if there are more nested levels they won't count) next h3, will get the css"
How can I make multiple H3 tags using different text style & font size inside post body?
My H3 CSS is look like this
.post h3{
border-top:1px dotted #84ce31;
border-bottom:1px dotted #84ce31;
font-size: 10pt;padding:3px;
}
Any ideas?
Give each one of them a class:
.post h3.class1 { color: white; }
.post h3.class2 { color: black; }
.post h3.class3 { color: red; }
there can be done by either adding the id or the class like
.post h3.#hea1{ color: white; }
.post h3.#hea2{ color: black; }
.post h3.#hea3{ color: red; }
or as class explained above
not point is that what should be use ..to know that you must know
difference between id and class
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
note : There are no browser defaults for any ID or Class
Adding a class name or ID to an element does nothing to that element by default.
This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn't work.
I would give them all ID's. ID's are meant for special Identification of elements that only exists once and use classes for more common recurring styles with just the h3 style at a default that will be appearing most often. All that said the answer is not wrong either, I am just considering design styles.