Only affect elements in container - html

I have a huge CSS/bootstrap file and it affects not just the elements. I want it to do that, but the css affects the whole page. I can't change every elements name to [name].slider. So is there an easy way to make it only affect elements inside a container?
<head>
<!--the stuff in here is also affected-->
</head>
<div>
<!--Stuff to get affected-->
</div>

Sure, put an id or class on the target div, and add that id or class to the start of the css file. If you are using Less or Sass you can just nest the contents of the entire file inside a rule with the id or class.
.my-styled-section h3 {
color: green;
}
.my-styled-section {
color: red;
}
<head>
<!--the stuff in here is no longer affected-->
<h3>Test</h3>
<p>Test</p>
</head>
<div class="my-styled-section">
<!--Stuff to get affected-->
<h3>Test</h3>
<p>Test</p>
</div>

Related

Change color of A element inside a div using inline css

I have a HTML like the following :
<p style="color:red">go here</p>
Where A element is produced by Server Side code I haven't access .
In the browser go is red but here isn't due to some CSS code in the page's head element.
I'm wondering is there a way to make the link color inherit without adding style tags or JS codes in inappropriate place of HTML doc that would be stinky . Note that I have no access to whole document but just this section.
You can put style-tags in your body.
<style>
.red, .red a {
color: red !important;
}
<style>
<p class="red">go here</p>
You can use inherit for color property, which means that color property value will be inherited from it's parent
In your case you can do:
<p style="color:inherit">go here</p>
give a name to that div like this
<style>
.vhd p, a{color:red}
</style>
<div class="vhd">
<p>go here</p>
</div>
hope it will work for you
As far as I know, What you are trying to do is not possible INLINE,
You can add style tags in your page if you are able to.
<p class="red">go link</p>
<style>
.red a{
color: red
}
.red{
color: red;
}
</style>
<style>
red.a {
backgrond-color: red;
}
</style>
<div>
<p class="red">here</p>
</div>
or u can use <p class="red"><a href="#" style="color:red;>"here</a></p>

how to use CSS to hide a header contains specific text

I want to hide a header text from the website.
because the same element "h2" has been used in more than one page, i can't apply a "display:none" to it.
I have tried it. The result is that it will remove other page's header too.
is there a way to apply CSS so that it only hides when the header text contains specific words?
i will be appreciate for any help i may get here
If I understand correctly, you can hide the header by removing the html on the specific page or with inline css, only on the page where you want to hide it ofcourse.
<header style="display: none;"></header>
Edit: If you only have access to css (not the the html or js) you can't achieve this unless the element has unique parents, attributes or something. You can find a list of css selectors here.
There is no way in CSS to select anything by its content currently. You can only select elements based on their ID, class, other attributes, specific ancestors, specific previous siblings, or their serial number among their siblings. So if you wand special styling for a specific element and you control the markup, the easiest way is to set this element a class or ID, as suggested above.
In your H2 tag that you want to hide, you can apply a class.
<html>
<head>
<style>
.hide-me { display: none; }
</style>
</head>
<body>
<h2>First header</h2>
<h2 class="hide-me">Your header</h2>
</body>
</html>
It's better to move the tag into a CSS file, but this will accomplish what you want.
You need to just add a id to your specific header and apply style to it.
CSS 101.
<head>
<style> //Internal CSS
#hide {
display: none;
}
</style>
</head>
<body>
<h2 id="hide"> Hello World </h2>
<h2> ... </h2>
<h2> ... </h2>
</body>
If you want to apply the same style from an external file copy the style inside the tag and paste it onto your style.css document.
The last and least used method is to use inline CSS :
<h2 style="display: none"> ... </h2>
More reference here : https://developer.mozilla.org/en-US/docs/Web/CSS/display
If you want to use the same style in more than one place use 'class' instead of id.
<head>
<style> //Internal CSS
.hide {
display: none;
}
</style>
</head>
<body>
<h2 class="hide"> Hello World </h2>
<h2> ... </h2>
<h2 class="hide"> Lorem Ipsum </h2>
</body>

How to use css to style id within many divs

I am styling a wordpress child-theme and the code below is what I am dealing with. each div is within the previous. It ends with a div then a h2. the last two our my additions to the code. I want to style the text in the h2 tag. when I use a id or class and go into the style sheet and type
#tag {
**Styles i want here**
}
or do it as a class, it wont register. How do I format it? I left the div and h2 without an id or class because idk how to format it like I said
<head>
<body>
<div clas="main-container">
<div id="page">
<div class="content">
<aside class="sidebar c-4-12">
<div id="sidebars">
<div class="sidebar_list">
<div>
<h2>TEXT HERE I WANT TO STYLE</h2>
ID of element should be unique. And because it's unique, you just have a CSS codes like below:
#your-id {
// Your css codes
}
It should work, but we should not use ID for styling element, class name instead.
In your case, your codes should be something like:
.content h2 {
// your css codes
}
Somehow, your h2 tag have a styling with higher priority. Then you can use !important in each of properties. But it's not a best practice for us.
.content h2 {
color: #fff !important; //Example code
}
By the way, I see wrong syntax in your code: clas="main-container", please correct class attribute
Thanks

Weird behaviour with strong tag within a height-defined element in HTML

Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.

Why isn't display inline working?

I am having a really odd situation here. I have spent the last 7 hours researching why I cannot get display: inline; to work at all, unless it's on my main page. Nothing seems to be helping.
Here is the relevant coding.
<!DOCTYPE html>
<html>
<head>
<title>Contact Info</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="name">
<p>*****<p>
Go Back
</div>
<div class="contact">
<p>
<span style="color:#000000">By Phone:</span>
**********
</p>
<p>
<span style="color:#000000">By Email:</span>
****#****.ca
</p>
<p>
<span style="color:#000000">By Mail:</span>
<span style="color:#3300cc">***************</span>
</p>
</div>
</body>
And here is the CSS.
.name {
display: inline;
}
The result is the two items, (The name "****" and the "Go Back" link), appear one on top of each other. I have tried making it a list, but that had no effect. I tried making them both links, but that had no effect. display: inline-block; also has no effect. Nothing I do has any effect on the div class name. I tried changing the name of the div class several times no effect.
The problem here is the the <p> tag is also a block level element. One solution would be to add a style such that a <p> within the .name div is also inline
.name, .name p {display: inline;}
See https://jsfiddle.net/t0z2p9bn/
It would be better to change your html such that the stars are not contained within a <p> tag
<div class ="name">
*****
Go Back
</div>
See https://jsfiddle.net/t0z2p9bn/1/
divs should not be used for inline elements. Did you mean to use a span?
There is a typo - it shouldn't make a difference, but there's an unneeded space after "class" here:
<div class ="name">