I have a question related to the CSS priority.
If I have something like this:
<div id="reportBox">
<p id="reportBoxTitle">MAIN REPORT</p>
<p id="reportBoxContent">Promoting Investment in Agriculture</p>
</div>
And then I have the following CSS settings:
#reportBox p{
text-align: center;
font-size: 12px;
font-weight: bold;
color: #004673;
}
#reportBoxTitle{
padding-top: 5px;
font-size: 18px;
}
In this way the text Promoting Investment in Agriculture that is into reportBoxTitle div still have a size of 12px and not 18px as specified by #reportBoxTitle settings.
It seems that the general #reportBox p settings have the priority on the specific #reportBoxTitle settings.
Is it a normal behavior?
Tnx
Andrea
Yes, it's normal: the specificity for the first selector is higher (id + tag) than for the the second one (just id), so the rules written there prevail.
The easiest way to solve it is to add a tag to the second selector as well, making specificity of the selectors the same so that the last one can 'win' now:
p#reportBoxTitle {
padding-top: 5px;
font-size: 18px;
}
Fiddle.
But actually, I don't understand why you've used <p> here instead of <hN> selector: this paragraph is clearly a header of the report, and should not only be styled, but also marked in HTML accordingly. For example:
<div id="reportBox">
<h3 id="reportBoxTitle">MAIN REPORT</h3>
<p id="reportBoxContent">Promoting Investment in Agriculture</p>
</div>
Now you can use the fact that all the properties you're setting in #reportBox currently are inherited by its children, and rewrite CSS as follows:
#reportBox {
text-align: center;
font-size: 12px;
font-weight: bold;
color: #004673;
}
#reportBox h3{
padding-top: 5px;
font-size: 18px;
}
Fiddle.
All info about CSS specificity nightmare here :D
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Try this :
#reportBox p#reportBoxTitle{
padding-top: 5px;
font-size: 18px;
}
Related
I'm trying to figure out if there's a way to style a paragraph in multiple ways such that the formatting is responsive and the text of different styles remains on the same line. I am a beginner, and have searched for other answers but can't figure it out, so please forgive me if the answer is quite obvious.
For example: I HATE hot dogs!
"I" would need to be 16px, "HATE" would need to be 40px, and "hot dogs!" would need to be 16px again, but I want all of the text within the same <p> if possible, or if not possible, at least to LOOK as if they're all in the same <p>. (The actual text I'm using is rather a long paragraph that needs to respond to different browser widths, so it's important for the text to be able to act as if it's one paragraph.)
I've jerry-rigged an extremely messy and only semi-successful solution using divs but I feel sure there should be a more elegant answer:
.container1 {
position: absolute;
font-size: 16px;
}
.container2 {
position: relative;
float: left;
padding-top: 22px;
}
.container3 {
position: relative;
float: right;
font-size: 40px;
padding-left: 4px;
}
.container4 {
position: relative;
float: right;
padding-left: 4px;
font-size: 16px;
padding-top: 22px;
}
<div class="container1">
<div class="container2">I</div>
<div class="container3">HATE
<div class="container4">hot dogs!</div>
</div>
</div>
As some people already said, you don't use <div> for this type of situation, instead, you need <span></span> which will allow different styles inside the same <p>. You can use CSS to define specific text styles:
CSS Classes defining font size
.textA {
font-size: 16px;
}
.textB {
font-size: 40px;
}
<p>
<span class="textA">I</span>
<span class="textB">HATE</span>
<span class="textA">hot dogs!</span>
</p>
Inline Style
This approach may seem shorter but it won't be as nice when styling a whole paragraph.
Edit (note by #tacoshy): should also never been used outside of email-templates. This will cause major specificty weight issues, cause low readbility and cant be cached which causes longer loading times.
<p>
<span style="font-size: 16px;">I</span>
<span style="font-size: 40px;">HATE</span>
<span style="font-size: 16px;">hot dogs!</span>
</p>
Remember you can also set other styles as font color, italic, bold, background color, etc.
In this case, you would not use <div>. You would use the <span> element. It's meant for applying different styles to the same paragraph. Here the example from the one you gave in the question:
p {
font-size: 16px;
}
.i {
padding-top: 22px;
}
.hate {
font-size: 40px;
padding-left: 4px;
}
.hd {
padding-left: 4px;
font-size: 16px;
padding-top: 22px;
}
<p>
<span class='i'>I</span>
<span class="hate">HATE</span>
<span class="hd">hot dogs!</span>
</p>
One thing no one has noted is that you can (and should, IMO) use native, semantic HTML elements where possible, falling back to generic HTML elements where those fail.
There's no need for more than two elements; the containing paragraph, and the emphasized HATE word. Note I've defined the 16px font at the root level (html) and defined the 40px in relative terms to that (2.5rem). That way if a user changed their font sizes, the HATE would still be relatively large.
html { font-size: 16px; }
em { font-size: 2.5rem; font-style: normal; }
<p>I <em>HATE</em> hot dogs!</p>
You should use inline-elements such as a <span>. You can either add classes to them or just use the :nth-child selector instead. Using float here is completely wrong. Also no reason for position: absolut or relative
p :nth-child(1) {
padding-top: 22px;
}
p :nth-child(2) {
font-size: 40px;
}
p :nth-child(3) {
font-size: 16px;
}
<p>
<span>I</span>
<span>HATE</span>
<span>hot dogs!</span>
</p>
You could use span. So...
HTML
<div class="container1">
<p>I
<span class="text-effect-1">HATE</span>
<span class="text-effect-2">HOT DOGS</span>
</p>
</div>
CSS
.container1 p{
font-size: ---;
font-weight: ---;
color: ---;
}
.text-effect-1{
font-size: ---;
font-weight: ---;
color: ----;
}
.text-effect-2{
font-size: ---;
font-weight: ---;
color: ----;
}
I am trying to align an icon right next to a text. I have used the :before tag but it doesn't seem to work? Is it because I am using google icons? Below is the code I want to replicate
.review {
width: 317px;
height: 25%;
}
.review h2 {
color: white;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 23px;
margin-left: 15px;
}
.review p {
color: white;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 16px;
text-transform: capitalize;
transition: 0.3s;
/* margin: 20px; */
}
<div class="review">
<h2>Reviews</h2>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p class="rec">Most Recent</p>
<p>Most Relevant</p>
</div>
Please google first before asking a question on SO. Just by googling your problem, I found your answer in the first link. It is another question on SO. Click here.
Just put both items inside a <div> element and use the css class display: inline-block as you can see in the example.
<div>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p style="display: inline-block" class="rec">Most Recent</p>
</div>
Sorry, Your Question is not very clear, but the use of google icons should not be an issue. My advice would be to use css grid for layout issues (since the code that you have provided is html and css).
Here is a helpful link:
https://www.w3schools.com/css/css_grid.asp
grid-column should solve your problem: have 2 columns, the first one for your image and the second one for your text. You can additionally add grid-row for better layouts
I think you want icon with links.
Put it inside the paragraph tag.
I am working with a pre-existing theme and have the following html:
<blockquote>
<p>BLOCKQUOTE TEXT</p>
<footer>
<cite>CITED AUTHOR</cite>
</footer>
</blockquote>
The corresponding css is as follows:
blockquote {
font-size: 22px;
font-size: 2.2rem;
line-height: 1.8182;
}
blockquote cite {
font-size: 19px;
font-size: 1.9rem;
line-height: 1.6842;
}
The site does use a css reset that leaves the html (root) font-size at 10px. Therefore 1rem = 10px. The computed css would look like this:
blockquote {
font-size: 22px;
line-height: 40.0004005432129px;
}
blockquote cite {
font-size: 19px;
line-height: 31.9997997283936px;
}
My problem is that replacing the line-height value for cite in the above css reflects only if the line-height has a value greater than the current line-height. For example, if I were to write:
blockquote cite {
font-size: 19px;
line-height: 1.2;
}
The visual output still looks as if the line-height is 1.6842 (or 31.9px). Changing the line-height in the blockquote itself reflects as it should with no problems.
I'm unsure if that is enough information to determine where the problem lies, but I can't seem to wrap my head around why a cite inside a blockquote would not reflect the declared line-height, regardless of what units I use. I simply want to reduce the line-height of the cite. Please note the issue occurs across all current major browsers.
Try adding display:inline-block for the cite element.
blockquote {
font-size: 22px;
font-size: 2.2rem;
line-height: 1.8182;
}
blockquote cite {
font-size: 19px;
font-size: 1.9rem;
line-height: .75;
background:red;
display:inline-block;
}
<blockquote>
<p>BLOCKQUOTE TEXT</p>
<footer>
<cite>CITED AUTHOR</cite>
</footer>
</blockquote>
I have this following html codes.
<div class="box extend">
<h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
<figure><img src="myimg.png" /></figure>
<p>
<strong>Hosted Exchange Server</strong>
<strong>Cloud Server Solutions</strong>
<strong>Backup Servicesd Server Solution</strong>
</p>
</div>
and the css of the above html (updated css)
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
}
now the problem is the strong element has spaces between each other as supposedly it should not (base on my css set up), please refer to the image below
Is there anyway I could get raid or remove that space gap between each others element? Any recommendations, suggestions and ideas, I would love to hear! thank you in advance.
It seems making them display block kills the thin line
http://jsfiddle.net/5qqLR/2/
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
display: block;
}
After further research setting the parent line-height to 1 will solve this issue
http://jsfiddle.net/5qqLR/3/
.box p {
line-height: 1;
}
Take a look at here http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element
Add to strong HTML tag:
white-space: break-spaces;
I'm a student from Belgium. I'm creating my portfolio website and I came across an error
that I cannot fix. My teacher advised me to post a question here for help.
As you can see in the screenshot the bold text is acting weird. It should act like the lower text part.
Is there any way to fix this?
http://imgur.com/aYiYu
HTML
<div id="content">
<div class = "intro" id="introtext">
<h2 id="h2intro">My name is not Joren and I am a <span class="cyan">designer</span> from Belgium. </h2>
<h3 class="h3intro">I am passionate about making very <span class="cyan">simple and clean</span> designs that are easy on the eye and very simple to use.</h3>
</div><!--end intro-->
CSS
.cyan
{
color:#00d1e0;
}
#h2intro
{
font-weight: bold;
}
.h3intro
{
color: #463E3F;
}
Thanks in advance!
Joren
i think you need to change the default font-size for both h2 and h3 to the same size. Try
h2, h3 {
font-size:14px;
}
#h2intro {
font-weight: bold;
}
.h3intro {
color: #463E3F; }
i believe you have set default styles to H2 and H3. This is why you are seeing padding and size differences. you can additionally set the size in #h2intro and .h3intro if you don't want to affect the other h2 and h3 tags.
In response to a comment, please use the following styles at the bottom of the stylesheet.
#introtext h2.h2intro
{
font-size: 14px;
font-weight: bold;
margin: 0px;
padding: 0px;
}
#introtext h3.h3intro
{
font-size: 14px;
margin: 0px;
padding: 0px;
color: #463E3F;
}