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;
}
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'm currently working on a simple COVID-19 site where some info gathered from some flask code is shown in s, with some CSS making the backgrounds into white boxes. However, I am not completely sure how I can add a "cases" right underneath the number while still being in the box. I'm sorry if my question is slightly unclear. I will show my code below.
HTML I am attempting to use:
<div class="boxed">{{data}}</div>
<div><p>cases</p></div>
CSS I am attempting to use:
.boxed {
font-size: 800%;
width: 700px;
text-align: center;
padding: 80px;
background: whitesmoke;
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-weight: bold;
color: rgb(49,74,128);
margin: 2% auto;
border-radius: 60px;
}
Right now, the "cases" text shows under the box with the number in it, instead of being inside of it.
I apologize if it is kind of a bad or simple question- I am a beginner in making websites. Any help would be greatly appreciated!
Just move the p tag inside div.boxed and add separate CSS for title and cases
.boxed {
font-size: 800%;
width: 700px;
text-align: center;
padding: 80px;
background: whitesmoke;
color: rgb(49,74,128);
margin: 2% auto;
border-radius: 60px;
}
.title {
font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
font-weight: bold;
}
.body {
/* your body styling */
}
<div class="boxed">
<div class="title">{{data}}</div>
<p class="body">cases</p>
</div>
You can move <p>cases</p> inside your .boxed div.
<div class="boxed">
{{data}}
<p>cases</p>
</div>
Then add the styling below to your css.
.boxed p {
font-size: 32px;
}
Testing: https://jsfiddle.net/z3acqfjg/1/
I'm working on React application where you can edit things inline. I'm switching from some tag (h1-h6 or p) to input when the sentence is clicked (no, contenteditable didn't work out)
Is there an easy way I could make the switch seamless? That is, to make the style of text inside an input exactly the same as the html tag counterpart?
I tried normalize.css with no luck, I can still see the switch change styles. Is there a better alternative?
Currently I have this CSS (I am still trying out the reset stylesheets):
.tag {
letter-spacing: 1px;
padding: 0;
border: 0;
line-height: 10px;
}
.heading {
font-weight: bold;
}
.h1 {
font-size: 32px;
}
.h2 {
font-size: 28px;
}
.h3 {
font-size: 24px;
}
.h4 {
font-size: 20px;
}
.h5 {
font-size: 18px;
}
.h6 {
font-size: 16px;
}
.p {
font-size: 14px;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
input {
width: 100%;
font-family: Arial;
}
<h1 class="h1 heading tag">Heading text</h1>
<input class="h1 heading tag" value="Heading text"/>
<p class="p tag">Paragraph text</p>
<input class="p tag" value="Paragraph text"/>
Try using custom styles inside span/div instead of h1. It is a bit of extra work but makes it easier to achieve the same style because you're in total control of all applied style properties, where with the h1 tag, the browser already applies some styles so you have to match all of those in the input component, not to mention there can be some cross-browser issues.
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 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;
}